From ebe3b764a6b13d8586983f566271abd158b39a74 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 11:16:50 +0000
Subject: [PATCH 1/8] updated `style-dictionary` dev-dependency to `4.2.0`
 (latest)

---
 packages/tokens/package.json |   2 +-
 yarn.lock                    | 546 +++++++++++++++++++++++++----------
 2 files changed, 401 insertions(+), 147 deletions(-)

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 4db2f58fbf..4b5d7febe1 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -33,7 +33,7 @@
     "fs-extra": "^11.1.1",
     "lodash": "^4.17.21",
     "path": "^0.12.7",
-    "style-dictionary": "^3.9.0",
+    "style-dictionary": "^4.2.0",
     "tinycolor2": "^1.6.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3"
diff --git a/yarn.lock b/yarn.lock
index 296aa44987..7f404f08e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2474,6 +2474,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bundled-es-modules/deepmerge@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "@bundled-es-modules/deepmerge@npm:4.3.1"
+  dependencies:
+    deepmerge: "npm:^4.3.1"
+  checksum: 10/b96ad879ec052591ea9f3f3570294ee7a808df9f60c7e21977ee8dbdc3156324de7f85a432c9b290c73fec3519ee169a963002ddec9bc00cbca9582aa092910b
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/glob@npm:^10.4.2":
+  version: 10.4.2
+  resolution: "@bundled-es-modules/glob@npm:10.4.2"
+  dependencies:
+    buffer: "npm:^6.0.3"
+    events: "npm:^3.3.0"
+    glob: "npm:^10.4.2"
+    patch-package: "npm:^8.0.0"
+    path: "npm:^0.12.7"
+    stream: "npm:^0.0.3"
+    string_decoder: "npm:^1.3.0"
+    url: "npm:^0.11.3"
+  checksum: 10/7195b81873064c9f1ddfa687f8a36f4ca793b5c1051856792c8c3266944f4ab752316c4e83d265becb08c1b6f4f78655c53193dad2a35a2649f9c51e80f62af4
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/memfs@npm:^4.9.4":
+  version: 4.9.4
+  resolution: "@bundled-es-modules/memfs@npm:4.9.4"
+  dependencies:
+    assert: "npm:^2.0.0"
+    buffer: "npm:^6.0.3"
+    events: "npm:^3.3.0"
+    memfs: "npm:^4.9.3"
+    path: "npm:^0.12.7"
+    stream: "npm:^0.0.3"
+    util: "npm:^0.12.5"
+  checksum: 10/a11749ef14593a35610df720ae7ab9ce889c1cd0eff49451f68371913d236604bfc305e6e7bcd37c22438b0124937831a4a4b57c40d176dbdc792ccba99178b2
+  languageName: node
+  linkType: hard
+
 "@changesets/apply-release-plan@npm:^7.0.0":
   version: 7.0.0
   resolution: "@changesets/apply-release-plan@npm:7.0.0"
@@ -4323,7 +4363,7 @@ __metadata:
     fs-extra: "npm:^11.1.1"
     lodash: "npm:^4.17.21"
     path: "npm:^0.12.7"
-    style-dictionary: "npm:^3.9.0"
+    style-dictionary: "npm:^4.2.0"
     tinycolor2: "npm:^1.6.0"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.6.3"
@@ -4780,6 +4820,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonjoy.com/base64@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "@jsonjoy.com/base64@npm:1.1.2"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/d76bb58eff841c090d9bf69a073611ffa73c40a664ccbcea689f65961f57d7b24051269d06b437e4f6204285d6ba92f50f587c5e95c5f9e4f10b36a2ed4cd0c8
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/json-pack@npm:^1.0.3":
+  version: 1.1.0
+  resolution: "@jsonjoy.com/json-pack@npm:1.1.0"
+  dependencies:
+    "@jsonjoy.com/base64": "npm:^1.1.1"
+    "@jsonjoy.com/util": "npm:^1.1.2"
+    hyperdyperid: "npm:^1.2.0"
+    thingies: "npm:^1.20.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/cd2776085ad56b470cd53137880b87c2503b07781756c50f1e9f40dd909abeba130a6144d203fcf605ec03dee4cd19bb3424169c8cb588f90a3f06939994c64e
+  languageName: node
+  linkType: hard
+
+"@jsonjoy.com/util@npm:^1.1.2, @jsonjoy.com/util@npm:^1.3.0":
+  version: 1.5.0
+  resolution: "@jsonjoy.com/util@npm:1.5.0"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/5b370183700cb40af52841294ba99c3dfb3dcb7fe2a122e15c737eb908d11392d314b75518874c7d631092bb29658ebe298d174b05baeb1adeb33884b9aa33cf
+  languageName: node
+  linkType: hard
+
 "@lint-todo/utils@npm:^13.1.1":
   version: 13.1.1
   resolution: "@lint-todo/utils@npm:13.1.1"
@@ -6818,6 +6890,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@yarnpkg/lockfile@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@yarnpkg/lockfile@npm:1.1.0"
+  checksum: 10/cd19e1114aaf10a05126aeea8833ef4ca8af8a46e88e12884f8359d19333fd19711036dbc2698dbe937f81f037070cf9a8da45c2e8c6ca19cafd7d15659094ed
+  languageName: node
+  linkType: hard
+
+"@zip.js/zip.js@npm:^2.7.44":
+  version: 2.7.53
+  resolution: "@zip.js/zip.js@npm:2.7.53"
+  checksum: 10/e74098fee4b21d012878410aa446b44158c958527280fc4bb865fd24c6e4539035a8d4ef054ceccd51eaa849ce0b67baedf20dacf7c8886beecbaa2243899b99
+  languageName: node
+  linkType: hard
+
 "abab@npm:^2.0.3, abab@npm:^2.0.5, abab@npm:^2.0.6":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
@@ -7543,6 +7629,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assert@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "assert@npm:2.1.0"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    is-nan: "npm:^1.3.2"
+    object-is: "npm:^1.1.5"
+    object.assign: "npm:^4.1.4"
+    util: "npm:^0.12.5"
+  checksum: 10/6b9d813c8eef1c0ac13feac5553972e4bd180ae16000d4eb5c0ded2489188737c75a5aacefc97a985008b37502f62fe1bad34da1a7481a54bbfabec3964c8aa7
+  languageName: node
+  linkType: hard
+
 "assign-symbols@npm:^1.0.0":
   version: 1.0.0
   resolution: "assign-symbols@npm:1.0.0"
@@ -9749,6 +9848,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"buffer@npm:^6.0.3":
+  version: 6.0.3
+  resolution: "buffer@npm:6.0.3"
+  dependencies:
+    base64-js: "npm:^1.3.1"
+    ieee754: "npm:^1.2.1"
+  checksum: 10/b6bc68237ebf29bdacae48ce60e5e28fc53ae886301f2ad9496618efac49427ed79096750033e7eab1897a4f26ae374ace49106a5758f38fb70c78c9fda2c3b1
+  languageName: node
+  linkType: hard
+
 "builtin-modules@npm:^3.3.0":
   version: 3.3.0
   resolution: "builtin-modules@npm:3.3.0"
@@ -9919,16 +10028,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camel-case@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "camel-case@npm:4.1.2"
-  dependencies:
-    pascal-case: "npm:^3.1.2"
-    tslib: "npm:^2.0.3"
-  checksum: 10/bcbd25cd253b3cbc69be3f535750137dbf2beb70f093bdc575f73f800acc8443d34fd52ab8f0a2413c34f1e8203139ffc88428d8863e4dfe530cfb257a379ad6
-  languageName: node
-  linkType: hard
-
 "camelcase-keys@npm:^4.0.0":
   version: 4.2.0
   resolution: "camelcase-keys@npm:4.2.0"
@@ -10009,17 +10108,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"capital-case@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "capital-case@npm:1.0.4"
-  dependencies:
-    no-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-    upper-case-first: "npm:^2.0.2"
-  checksum: 10/41fa8fa87f6d24d0835a2b4a9341a3eaecb64ac29cd7c5391f35d6175a0fa98ab044e7f2602e1ec3afc886231462ed71b5b80c590b8b41af903ec2c15e5c5931
-  languageName: node
-  linkType: hard
-
 "capture-exit@npm:^2.0.0":
   version: 2.0.0
   resolution: "capture-exit@npm:2.0.0"
@@ -10112,23 +10200,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"change-case@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "change-case@npm:4.1.2"
-  dependencies:
-    camel-case: "npm:^4.1.2"
-    capital-case: "npm:^1.0.4"
-    constant-case: "npm:^3.0.4"
-    dot-case: "npm:^3.0.4"
-    header-case: "npm:^2.0.4"
-    no-case: "npm:^3.0.4"
-    param-case: "npm:^3.0.4"
-    pascal-case: "npm:^3.1.2"
-    path-case: "npm:^3.0.4"
-    sentence-case: "npm:^3.0.4"
-    snake-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10/e4bc4a093a1f7cce8b33896665cf9e456e3bc3cc0def2ad7691b1994cfca99b3188d0a513b16855b01a6bd20692fcde12a7d4d87a5615c4c515bbbf0e651f116
+"change-case@npm:^5.3.0":
+  version: 5.4.4
+  resolution: "change-case@npm:5.4.4"
+  checksum: 10/446e5573f3c854290a91292afef92b957d2e43a928260c91989b482aa860caaa29711b6725fc40c200af68061cbab357b033446d16a17bc5c553636994074e92
   languageName: node
   linkType: hard
 
@@ -10785,6 +10860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"component-emitter@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "component-emitter@npm:2.0.0"
+  checksum: 10/017715272fcf82203932237260451df4c7c27e32a51a4a291faf6f503d6ef9e8583add993850cb5b98cc0c1b0846ff0c68938ad3ef1d544f9b480a290e74fb4f
+  languageName: node
+  linkType: hard
+
 "compress-commons@npm:^5.0.1":
   version: 5.0.1
   resolution: "compress-commons@npm:5.0.1"
@@ -10916,17 +10998,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"constant-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "constant-case@npm:3.0.4"
-  dependencies:
-    no-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-    upper-case: "npm:^2.0.2"
-  checksum: 10/6c3346d51afc28d9fae922e966c68eb77a19d94858dba230dd92d7b918b37d36db50f0311e9ecf6847e43e934b1c01406a0936973376ab17ec2c471fbcfb2cf3
-  languageName: node
-  linkType: hard
-
 "content-disposition@npm:0.5.4, content-disposition@npm:^0.5.4":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
@@ -11832,7 +11903,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2":
+"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10/058d9e1b0ff1a154468bf3837aea436abcfea1ba1d165ddaaf48ca93765fdd01a30d33c36173da8fbbed951dd0a267602bc782fe288b0fc4b7e1e7091afc4529
@@ -14739,7 +14810,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"events@npm:^3.2.0":
+"events@npm:^3.2.0, events@npm:^3.3.0":
   version: 3.3.0
   resolution: "events@npm:3.3.0"
   checksum: 10/a3d47e285e28d324d7180f1e493961a2bbb4cad6412090e4dec114f4db1f5b560c7696ee8e758f55e23913ede856e3689cd3aa9ae13c56b5d8314cd3b3ddd1be
@@ -15853,7 +15924,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^9.0.1, fs-extra@npm:^9.1.0":
+"fs-extra@npm:^9.0.0, fs-extra@npm:^9.0.1, fs-extra@npm:^9.1.0":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
   dependencies:
@@ -16225,6 +16296,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^10.4.2":
+  version: 10.4.5
+  resolution: "glob@npm:10.4.5"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  languageName: node
+  linkType: hard
+
 "glob@npm:^5.0.10":
   version: 5.0.15
   resolution: "glob@npm:5.0.15"
@@ -16879,16 +16966,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"header-case@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "header-case@npm:2.0.4"
-  dependencies:
-    capital-case: "npm:^1.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10/571c83eeb25e8130d172218712f807c0b96d62b020981400bccc1503a7cf14b09b8b10498a962d2739eccf231d950e3848ba7d420b58a6acd2f9283439546cd9
-  languageName: node
-  linkType: hard
-
 "heimdalljs-fs-monitor@npm:^1.1.1":
   version: 1.1.1
   resolution: "heimdalljs-fs-monitor@npm:1.1.1"
@@ -17190,6 +17267,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hyperdyperid@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "hyperdyperid@npm:1.2.0"
+  checksum: 10/64abb5568ff17aa08ac0175ae55e46e22831c5552be98acdd1692081db0209f36fff58b31432017b4e1772c178962676a2cc3c54e4d5d7f020d7710cec7ad7a6
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
@@ -17217,7 +17301,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ieee754@npm:^1.1.13":
+"ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
   checksum: 10/d9f2557a59036f16c282aaeb107832dc957a93d73397d89bbad4eb1130560560eb695060145e8e6b3b498b15ab95510226649a0b8f52ae06583575419fe10fc4
@@ -17572,6 +17656,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arguments@npm:^1.0.4":
+  version: 1.1.1
+  resolution: "is-arguments@npm:1.1.1"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/a170c7e26082e10de9be6e96d32ae3db4d5906194051b792e85fae3393b53cf2cb5b3557863e5c8ccbab55e2fd8f2f75aa643d437613f72052cf0356615c34be
+  languageName: node
+  linkType: hard
+
 "is-array-buffer@npm:^3.0.1, is-array-buffer@npm:^3.0.2":
   version: 3.0.2
   resolution: "is-array-buffer@npm:3.0.2"
@@ -17788,6 +17882,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-generator-function@npm:^1.0.7":
+  version: 1.0.10
+  resolution: "is-generator-function@npm:1.0.10"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/499a3ce6361064c3bd27fbff5c8000212d48506ebe1977842bbd7b3e708832d0deb1f4cc69186ece3640770e8c4f1287b24d99588a0b8058b2dbdd344bc1f47f
+  languageName: node
+  linkType: hard
+
 "is-git-url@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-git-url@npm:1.0.0"
@@ -17843,6 +17946,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-nan@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "is-nan@npm:1.3.2"
+  dependencies:
+    call-bind: "npm:^1.0.0"
+    define-properties: "npm:^1.1.3"
+  checksum: 10/1f784d3472c09bc2e47acba7ffd4f6c93b0394479aa613311dc1d70f1bfa72eb0846c81350967722c959ba65811bae222204d6c65856fdce68f31986140c7b0e
+  languageName: node
+  linkType: hard
+
 "is-negative-zero@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-negative-zero@npm:2.0.2"
@@ -17917,7 +18030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-obj@npm:^4.0.0":
+"is-plain-obj@npm:^4.0.0, is-plain-obj@npm:^4.1.0":
   version: 4.1.0
   resolution: "is-plain-obj@npm:4.1.0"
   checksum: 10/6dc45da70d04a81f35c9310971e78a6a3c7a63547ef782e3a07ee3674695081b6ca4e977fbb8efc48dae3375e0b34558d2bcd722aec9bddfa2d7db5b041be8ce
@@ -18064,7 +18177,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.13":
+"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.3":
   version: 1.1.13
   resolution: "is-typed-array@npm:1.1.13"
   dependencies:
@@ -18124,7 +18237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-wsl@npm:^2.2.0":
+"is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-wsl@npm:2.2.0"
   dependencies:
@@ -18305,6 +18418,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jackspeak@npm:^3.1.2":
+  version: 3.4.3
+  resolution: "jackspeak@npm:3.4.3"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+    "@pkgjs/parseargs": "npm:^0.11.0"
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 10/96f8786eaab98e4bf5b2a5d6d9588ea46c4d06bbc4f2eb861fdd7b6b182b16f71d8a70e79820f335d52653b16d4843b29dd9cdcf38ae80406756db9199497cf3
+  languageName: node
+  linkType: hard
+
 "jest-changed-files@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-changed-files@npm:29.7.0"
@@ -19057,6 +19183,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-stable-stringify@npm:^1.0.2":
+  version: 1.1.1
+  resolution: "json-stable-stringify@npm:1.1.1"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    isarray: "npm:^2.0.5"
+    jsonify: "npm:^0.0.1"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/60853c1f63451319b5c7953465a555aa816cf84e60e3ca36b6c05225d8fdc4615127fb4ecb92f9f5ad880c552ab8cbae9a519f78b995e7788d6d89e57afafdeb
+  languageName: node
+  linkType: hard
+
 "json-stringify-safe@npm:~5.0.1":
   version: 5.0.1
   resolution: "json-stringify-safe@npm:5.0.1"
@@ -19103,13 +19241,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-parser@npm:^3.0.0":
-  version: 3.2.0
-  resolution: "jsonc-parser@npm:3.2.0"
-  checksum: 10/bd68b902e5f9394f01da97921f49c5084b2dc03a0c5b4fdb2a429f8d6f292686c1bf87badaeb0a8148d024192a88f5ad2e57b2918ba43fe25cf15f3371db64d4
-  languageName: node
-  linkType: hard
-
 "jsonfile@npm:^2.1.0":
   version: 2.4.0
   resolution: "jsonfile@npm:2.4.0"
@@ -19223,6 +19354,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klaw-sync@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "klaw-sync@npm:6.0.0"
+  dependencies:
+    graceful-fs: "npm:^4.1.11"
+  checksum: 10/0da397f8961313c3ef8f79fb63af9002cde5a8fb2aeb1a37351feff0dd6006129c790400c3f5c3b4e757bedcabb13d21ec0a5eaef5a593d59515d4f2c291e475
+  languageName: node
+  linkType: hard
+
 "kleur@npm:^3.0.3":
   version: 3.0.3
   resolution: "kleur@npm:3.0.3"
@@ -19770,6 +19910,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^10.2.0":
+  version: 10.4.3
+  resolution: "lru-cache@npm:10.4.3"
+  checksum: 10/e6e90267360476720fa8e83cc168aa2bf0311f3f2eea20a6ba78b90a885ae72071d9db132f40fda4129c803e7dcec3a6b6a6fbb44ca90b081630b810b5d6a41a
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^4.0.1":
   version: 4.1.5
   resolution: "lru-cache@npm:4.1.5"
@@ -20264,6 +20411,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memfs@npm:^4.9.3":
+  version: 4.14.0
+  resolution: "memfs@npm:4.14.0"
+  dependencies:
+    "@jsonjoy.com/json-pack": "npm:^1.0.3"
+    "@jsonjoy.com/util": "npm:^1.3.0"
+    tree-dump: "npm:^1.0.1"
+    tslib: "npm:^2.0.0"
+  checksum: 10/d1a5a38fb8e97cbdff012e47d05c92852484f37a03e9c57b252fdc180c4ffe35ee7ec83acea3be8950e1f13f9152db4d5478124b43f9673f4653e741ba26d584
+  languageName: node
+  linkType: hard
+
 "memory-streams@npm:^0.1.3":
   version: 0.1.3
   resolution: "memory-streams@npm:0.1.3"
@@ -20996,6 +21155,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minipass@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "minipass@npm:7.1.2"
+  checksum: 10/c25f0ee8196d8e6036661104bacd743785b2599a21de5c516b32b3fa2b83113ac89a2358465bc04956baab37ffb956ae43be679b2262bf7be15fce467ccd7950
+  languageName: node
+  linkType: hard
+
 "minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
   version: 2.1.2
   resolution: "minizlib@npm:2.1.2"
@@ -21535,6 +21701,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-is@npm:^1.1.5":
+  version: 1.1.6
+  resolution: "object-is@npm:1.1.6"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+  checksum: 10/4f6f544773a595da21c69a7531e0e1d6250670f4e09c55f47eb02c516035cfcb1b46ceb744edfd3ecb362309dbccb6d7f88e43bf42e4d4595ac10a329061053a
+  languageName: node
+  linkType: hard
+
 "object-keys@npm:^1.1.1":
   version: 1.1.1
   resolution: "object-keys@npm:1.1.1"
@@ -21689,6 +21865,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^7.4.2":
+  version: 7.4.2
+  resolution: "open@npm:7.4.2"
+  dependencies:
+    is-docker: "npm:^2.0.0"
+    is-wsl: "npm:^2.1.1"
+  checksum: 10/4fc02ed3368dcd5d7247ad3566433ea2695b0713b041ebc0eeb2f0f9e5d4e29fc2068f5cdd500976b3464e77fe8b61662b1b059c73233ccc601fe8b16d6c1cd6
+  languageName: node
+  linkType: hard
+
 "optionator@npm:^0.9.3":
   version: 0.9.3
   resolution: "optionator@npm:0.9.3"
@@ -21947,6 +22133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"package-json-from-dist@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "package-json-from-dist@npm:1.0.1"
+  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
+  languageName: node
+  linkType: hard
+
 "package-json@npm:^6.3.0, package-json@npm:^6.5.0":
   version: 6.5.0
   resolution: "package-json@npm:6.5.0"
@@ -21966,16 +22159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"param-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "param-case@npm:3.0.4"
-  dependencies:
-    dot-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10/b34227fd0f794e078776eb3aa6247442056cb47761e9cd2c4c881c86d84c64205f6a56ef0d70b41ee7d77da02c3f4ed2f88e3896a8fefe08bdfb4deca037c687
-  languageName: node
-  linkType: hard
-
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -22083,16 +22266,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pascal-case@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "pascal-case@npm:3.1.2"
-  dependencies:
-    no-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10/ba98bfd595fc91ef3d30f4243b1aee2f6ec41c53b4546bfa3039487c367abaa182471dcfc830a1f9e1a0df00c14a370514fa2b3a1aacc68b15a460c31116873e
-  languageName: node
-  linkType: hard
-
 "pascalcase@npm:^0.1.1":
   version: 0.1.1
   resolution: "pascalcase@npm:0.1.1"
@@ -22100,13 +22273,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "path-case@npm:3.0.4"
+"patch-package@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "patch-package@npm:8.0.0"
   dependencies:
-    dot-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-  checksum: 10/61de0526222629f65038a66f63330dd22d5b54014ded6636283e1d15364da38b3cf29e4433aa3f9d8b0dba407ae2b059c23b0104a34ee789944b1bc1c5c7e06d
+    "@yarnpkg/lockfile": "npm:^1.1.0"
+    chalk: "npm:^4.1.2"
+    ci-info: "npm:^3.7.0"
+    cross-spawn: "npm:^7.0.3"
+    find-yarn-workspace-root: "npm:^2.0.0"
+    fs-extra: "npm:^9.0.0"
+    json-stable-stringify: "npm:^1.0.2"
+    klaw-sync: "npm:^6.0.0"
+    minimist: "npm:^1.2.6"
+    open: "npm:^7.4.2"
+    rimraf: "npm:^2.6.3"
+    semver: "npm:^7.5.3"
+    slash: "npm:^2.0.0"
+    tmp: "npm:^0.0.33"
+    yaml: "npm:^2.2.2"
+  bin:
+    patch-package: index.js
+  checksum: 10/8714322c35b29266e71c82d58443ce5322400a546a3327f1b8907b8eeb7e366dff33c4fdfbd25e3f0b3a9927189c26e9ac60636ca1e4140d6dbc11cca10f9b5d
   languageName: node
   linkType: hard
 
@@ -22199,6 +22387,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-scurry@npm:^1.11.1":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
+  dependencies:
+    lru-cache: "npm:^10.2.0"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+  checksum: 10/5e8845c159261adda6f09814d7725683257fcc85a18f329880ab4d7cc1d12830967eae5d5894e453f341710d5484b8fdbbd4d75181b4d6e1eb2f4dc7aeadc434
+  languageName: node
+  linkType: hard
+
 "path-to-regexp@npm:0.1.10":
   version: 0.1.10
   resolution: "path-to-regexp@npm:0.1.10"
@@ -22252,6 +22450,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-unified@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "path-unified@npm:0.1.0"
+  checksum: 10/6a433dc924a04be67860c09deba737013f4e8834c1514072a8b9e346fb0b50f20bbdc39d37ede1da5d37c9ccb1b1a99faa730750020b056444dcbbbedf722330
+  languageName: node
+  linkType: hard
+
 "path@npm:^0.12.7":
   version: 0.12.7
   resolution: "path@npm:0.12.7"
@@ -22961,6 +23166,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"punycode@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "punycode@npm:1.4.1"
+  checksum: 10/af2700dde1a116791ff8301348ff344c47d6c224e875057237d1b5112035655fb07a6175cfdb8bf0e3a8cdfd2dc82b3a622e0aefd605566c0e949a6d0d1256a4
+  languageName: node
+  linkType: hard
+
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.0":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
@@ -22991,7 +23203,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.13.0":
+"qs@npm:6.13.0, qs@npm:^6.12.3":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
   dependencies:
@@ -24598,17 +24810,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sentence-case@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "sentence-case@npm:3.0.4"
-  dependencies:
-    no-case: "npm:^3.0.4"
-    tslib: "npm:^2.0.3"
-    upper-case-first: "npm:^2.0.2"
-  checksum: 10/3cfe6c0143e649132365695706702d7f729f484fa7b25f43435876efe7af2478243eefb052bacbcce10babf9319fd6b5b6bc59b94c80a1c819bcbb40651465d5
-  languageName: node
-  linkType: hard
-
 "serialize-javascript@npm:^6.0.1":
   version: 6.0.1
   resolution: "serialize-javascript@npm:6.0.1"
@@ -25035,7 +25236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"snake-case@npm:^3.0.3, snake-case@npm:^3.0.4":
+"snake-case@npm:^3.0.3":
   version: 3.0.4
   resolution: "snake-case@npm:3.0.4"
   dependencies:
@@ -25479,6 +25680,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "stream@npm:0.0.3"
+  dependencies:
+    component-emitter: "npm:^2.0.0"
+  checksum: 10/a40db1ce8def8929c689c98c1644288d4099d34be8e8f72853c7cb8e2bae64e90f5c967f79fd792cdf349d8a3baf38f19d99e7f7ff13c35b4f7c5ae1b78c0115
+  languageName: node
+  linkType: hard
+
 "streamx@npm:^2.15.0":
   version: 2.15.6
   resolution: "streamx@npm:2.15.6"
@@ -25651,7 +25861,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string_decoder@npm:^1.1.1":
+"string_decoder@npm:^1.1.1, string_decoder@npm:^1.3.0":
   version: 1.3.0
   resolution: "string_decoder@npm:1.3.0"
   dependencies:
@@ -25794,22 +26004,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-dictionary@npm:^3.9.0":
-  version: 3.9.1
-  resolution: "style-dictionary@npm:3.9.1"
+"style-dictionary@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "style-dictionary@npm:4.2.0"
   dependencies:
-    chalk: "npm:^4.0.0"
-    change-case: "npm:^4.1.2"
+    "@bundled-es-modules/deepmerge": "npm:^4.3.1"
+    "@bundled-es-modules/glob": "npm:^10.4.2"
+    "@bundled-es-modules/memfs": "npm:^4.9.4"
+    "@zip.js/zip.js": "npm:^2.7.44"
+    chalk: "npm:^5.3.0"
+    change-case: "npm:^5.3.0"
     commander: "npm:^8.3.0"
-    fs-extra: "npm:^10.0.0"
-    glob: "npm:^10.3.10"
+    is-plain-obj: "npm:^4.1.0"
     json5: "npm:^2.2.2"
-    jsonc-parser: "npm:^3.0.0"
-    lodash: "npm:^4.17.15"
-    tinycolor2: "npm:^1.4.1"
+    patch-package: "npm:^8.0.0"
+    path-unified: "npm:^0.1.0"
+    tinycolor2: "npm:^1.6.0"
+  peerDependencies:
+    prettier: 3.x
   bin:
-    style-dictionary: bin/style-dictionary
-  checksum: 10/4dc7ddd2c58fb37c0c3511134cc866212321c287ec5252a399f89ce81c904e0743d527dca2ad2346775782bb62317e39b116895d6351941a167f31b8476e5185
+    style-dictionary: bin/style-dictionary.js
+  checksum: 10/aff8ceea46c6ae1d4e6bfba28d9d312cbcc9389e8454148c7622cbc299fa88711bb5285ad78285e563f5b8cc58d65c6a65e57da009ede2f7a012ca9672eb44f3
   languageName: node
   linkType: hard
 
@@ -26435,6 +26650,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thingies@npm:^1.20.0":
+  version: 1.21.0
+  resolution: "thingies@npm:1.21.0"
+  peerDependencies:
+    tslib: ^2
+  checksum: 10/5c3954b67391d1432c252cb7089f29480e2164f06987a63d83c9747aa6999bfc313d6edfce71ed967316a3378dfcaf38f35ea77aaa5d423edaf776b8ff854f83
+  languageName: node
+  linkType: hard
+
 "through2@npm:^3.0.1":
   version: 3.0.2
   resolution: "through2@npm:3.0.2"
@@ -26490,7 +26714,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.1, tinycolor2@npm:^1.6.0":
+"tinycolor2@npm:^1.6.0":
   version: 1.6.0
   resolution: "tinycolor2@npm:1.6.0"
   checksum: 10/066c3acf4f82b81c58a0d3ab85f49407efe95ba87afc3c7a16b1d77625193dfbe10dd46c26d0a263c1137361dd5a6a68bff2fb71def5fb9b9aec940fb030bcd4
@@ -26695,6 +26919,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tree-dump@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "tree-dump@npm:1.0.2"
+  peerDependencies:
+    tslib: 2
+  checksum: 10/ddcde4da9ded8edc2fa77fc9153ef8d7fba9cd5f813db27c30c7039191b50e1512b7106f0f4fe7ccaa3aa69f85b4671eda7ed0b9f9d34781eb26ebe4593ad4eb
+  languageName: node
+  linkType: hard
+
 "tree-kill@npm:^1.2.2":
   version: 1.2.2
   resolution: "tree-kill@npm:1.2.2"
@@ -26863,6 +27096,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.0.0":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10/3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.4.1, tslib@npm:^2.6.1, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
@@ -27555,24 +27795,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"upper-case-first@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "upper-case-first@npm:2.0.2"
-  dependencies:
-    tslib: "npm:^2.0.3"
-  checksum: 10/4487db4701effe3b54ced4b3e4aa4d9ab06c548f97244d04aafb642eedf96a76d5a03cf5f38f10f415531d5792d1ac6e1b50f2a76984dc6964ad530f12876409
-  languageName: node
-  linkType: hard
-
-"upper-case@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "upper-case@npm:2.0.2"
-  dependencies:
-    tslib: "npm:^2.0.3"
-  checksum: 10/508723a2b03ab90cf1d6b7e0397513980fab821cbe79c87341d0e96cedefadf0d85f9d71eac24ab23f526a041d585a575cfca120a9f920e44eb4f8a7cf89121c
-  languageName: node
-  linkType: hard
-
 "uri-js@npm:^4.2.2, uri-js@npm:^4.4.1":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -27608,6 +27830,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url@npm:^0.11.3":
+  version: 0.11.4
+  resolution: "url@npm:0.11.4"
+  dependencies:
+    punycode: "npm:^1.4.1"
+    qs: "npm:^6.12.3"
+  checksum: 10/e787d070f0756518b982a4653ef6cdf4d9030d8691eee2d483344faf2b530b71d302287fa63b292299455fea5075c502a5ad5f920cb790e95605847f957a65e4
+  languageName: node
+  linkType: hard
+
 "use@npm:^3.1.0":
   version: 3.1.1
   resolution: "use@npm:3.1.1"
@@ -27650,6 +27882,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"util@npm:^0.12.5":
+  version: 0.12.5
+  resolution: "util@npm:0.12.5"
+  dependencies:
+    inherits: "npm:^2.0.3"
+    is-arguments: "npm:^1.0.4"
+    is-generator-function: "npm:^1.0.7"
+    is-typed-array: "npm:^1.1.3"
+    which-typed-array: "npm:^1.1.2"
+  checksum: 10/61a10de7753353dd4d744c917f74cdd7d21b8b46379c1e48e1c4fd8e83f8190e6bd9978fc4e5102ab6a10ebda6019d1b36572fa4a325e175ec8b789a121f6147
+  languageName: node
+  linkType: hard
+
 "utils-merge@npm:1.0.1":
   version: 1.0.1
   resolution: "utils-merge@npm:1.0.1"
@@ -28329,7 +28574,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
   version: 1.1.15
   resolution: "which-typed-array@npm:1.1.15"
   dependencies:
@@ -28690,6 +28935,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.2.2":
+  version: 2.6.0
+  resolution: "yaml@npm:2.6.0"
+  bin:
+    yaml: bin.mjs
+  checksum: 10/f4369f667c7626c216ea81b5840fe9b530cdae4cff2d84d166ec1239e54bf332dbfac4a71bf60d121f8e85e175364a4e280a520292269b6cf9d074368309adf9
+  languageName: node
+  linkType: hard
+
 "yaml@npm:^2.4.1":
   version: 2.4.5
   resolution: "yaml@npm:2.4.5"

From 27f4242c4cc34d73178ff292632fcc2fe047c3cd Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 11:18:18 +0000
Subject: [PATCH 2/8] run the migration codemod

npx codemod styledictionary/4/migration-recipe

see: https://styledictionary.com/version-4/migration/
---
 packages/tokens/scripts/build.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts
index 85b194d441..fe4a8417e8 100644
--- a/packages/tokens/scripts/build.ts
+++ b/packages/tokens/scripts/build.ts
@@ -95,18 +95,18 @@ StyleDictionaryPackage.registerTransform({
 
 StyleDictionaryPackage.registerTransformGroup({
     name: 'products/web',
-    transforms: ['attribute/cti', 'name/cti/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
+    transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
 });
 
 StyleDictionaryPackage.registerTransformGroup({
     name: 'products/email',
     // notice: for emails we need the font-size in `px` (not `rem`)
-    transforms: ['attribute/cti', 'name/cti/kebab', 'font-size/px', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
+    transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
 });
 
 StyleDictionaryPackage.registerTransformGroup({
     name: 'marketing/web',
-    transforms: ['attribute/cti', 'name/cti/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
+    transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
 });
 
 StyleDictionaryPackage.registerFormat({
@@ -268,7 +268,7 @@ console.log('\n==============================================');
 console.log(`\nCleaning up dist folder`);
 fs.emptyDirSync(distFolder);
 
-Object.keys(targets).forEach(target => {
+Object.keys(targets).forEach(async target => {
     const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig({ target }));
 
     console.log(`\nProcessing target "${target}"...`);

From e08f10356b9e8a16fa896ebf3e4e4a2be5efe057 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 15:16:08 +0000
Subject: [PATCH 3/8] =?UTF-8?q?updated=20`package.json`=20file=20to=20be?=
 =?UTF-8?q?=20`"type":=20"module=E2=80=9D`=20per=20StyleDictionary=20guide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

see: https://styledictionary.com/version-4/migration/#es-modules-instead-of-commonjs
---
 packages/tokens/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 4b5d7febe1..9469f17184 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -16,6 +16,7 @@
   },
   "license": "MPL-2.0",
   "author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
+  "type": "module",
   "scripts": {
     "typecheck": "yarn tsc --noEmit",
     "lint": "yarn eslint --quiet --ext .js,.ts",

From 179d50f681dfeea19662fb853f3ab24ed06d8ddd Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 15:19:51 +0000
Subject: [PATCH 4/8] updated `build` script in `package.json` file to use
 `tsx` instead of `tsc`

I have seen this used in this way in other StyleDictionary 4 repos:
- https://github.com/navikt/aksel/blob/c5f46e60ad20a9b67723ddc930df1b9be8d8d3a6/%40navikt/core/tokens/package.json
- https://github.com/digital-go-jp/design-tokens/blob/431d2bacc7f5ca58ce4a456f02137cf87d8d0a11/package.json#L31
---
 packages/tokens/package.json |   3 +-
 yarn.lock                    | 281 ++++++++++++++++++++++++++++++++++-
 2 files changed, 281 insertions(+), 3 deletions(-)

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index 9469f17184..a55af29b3b 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -20,7 +20,7 @@
   "scripts": {
     "typecheck": "yarn tsc --noEmit",
     "lint": "yarn eslint --quiet --ext .js,.ts",
-    "build": "ts-node --transpile-only ./scripts/build"
+    "build": "tsx ./scripts/build"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.3",
@@ -37,6 +37,7 @@
     "style-dictionary": "^4.2.0",
     "tinycolor2": "^1.6.0",
     "ts-node": "^10.9.2",
+    "tsx": "^4.19.2",
     "typescript": "^5.6.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 7f404f08e6..b534606553 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3563,6 +3563,174 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/aix-ppc64@npm:0.23.1"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/android-arm64@npm:0.23.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/android-arm@npm:0.23.1"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/android-x64@npm:0.23.1"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/darwin-arm64@npm:0.23.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/darwin-x64@npm:0.23.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/freebsd-arm64@npm:0.23.1"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/freebsd-x64@npm:0.23.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-arm64@npm:0.23.1"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-arm@npm:0.23.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-ia32@npm:0.23.1"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-loong64@npm:0.23.1"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-mips64el@npm:0.23.1"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-ppc64@npm:0.23.1"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-riscv64@npm:0.23.1"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-s390x@npm:0.23.1"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/linux-x64@npm:0.23.1"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/netbsd-x64@npm:0.23.1"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-arm64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/openbsd-arm64@npm:0.23.1"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/openbsd-x64@npm:0.23.1"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/sunos-x64@npm:0.23.1"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/win32-arm64@npm:0.23.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/win32-ia32@npm:0.23.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.23.1":
+  version: 0.23.1
+  resolution: "@esbuild/win32-x64@npm:0.23.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.1.2, @eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -4366,6 +4534,7 @@ __metadata:
     style-dictionary: "npm:^4.2.0"
     tinycolor2: "npm:^1.6.0"
     ts-node: "npm:^10.9.2"
+    tsx: "npm:^4.19.2"
     typescript: "npm:^5.6.3"
   languageName: unknown
   linkType: soft
@@ -14286,6 +14455,89 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:~0.23.0":
+  version: 0.23.1
+  resolution: "esbuild@npm:0.23.1"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.23.1"
+    "@esbuild/android-arm": "npm:0.23.1"
+    "@esbuild/android-arm64": "npm:0.23.1"
+    "@esbuild/android-x64": "npm:0.23.1"
+    "@esbuild/darwin-arm64": "npm:0.23.1"
+    "@esbuild/darwin-x64": "npm:0.23.1"
+    "@esbuild/freebsd-arm64": "npm:0.23.1"
+    "@esbuild/freebsd-x64": "npm:0.23.1"
+    "@esbuild/linux-arm": "npm:0.23.1"
+    "@esbuild/linux-arm64": "npm:0.23.1"
+    "@esbuild/linux-ia32": "npm:0.23.1"
+    "@esbuild/linux-loong64": "npm:0.23.1"
+    "@esbuild/linux-mips64el": "npm:0.23.1"
+    "@esbuild/linux-ppc64": "npm:0.23.1"
+    "@esbuild/linux-riscv64": "npm:0.23.1"
+    "@esbuild/linux-s390x": "npm:0.23.1"
+    "@esbuild/linux-x64": "npm:0.23.1"
+    "@esbuild/netbsd-x64": "npm:0.23.1"
+    "@esbuild/openbsd-arm64": "npm:0.23.1"
+    "@esbuild/openbsd-x64": "npm:0.23.1"
+    "@esbuild/sunos-x64": "npm:0.23.1"
+    "@esbuild/win32-arm64": "npm:0.23.1"
+    "@esbuild/win32-ia32": "npm:0.23.1"
+    "@esbuild/win32-x64": "npm:0.23.1"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/f55fbd0bfb0f86ce67a6d2c6f6780729d536c330999ecb9f5a38d578fb9fda820acbbc67d6d1d377eed8fed50fc38f14ff9cb014f86dafab94269a7fb2177018
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -16012,7 +16264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
   dependencies:
@@ -16022,7 +16274,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
+"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
   dependencies:
@@ -16209,6 +16461,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-tsconfig@npm:^4.7.5":
+  version: 4.8.1
+  resolution: "get-tsconfig@npm:4.8.1"
+  dependencies:
+    resolve-pkg-maps: "npm:^1.0.0"
+  checksum: 10/3fb5a8ad57b9633eaea085d81661e9e5c9f78b35d8f8689eaf8b8b45a2a3ebf3b3422266d4d7df765e308cc1e6231648d114803ab3d018332e29916f2c1de036
+  languageName: node
+  linkType: hard
+
 "get-value@npm:^2.0.3, get-value@npm:^2.0.6":
   version: 2.0.6
   resolution: "get-value@npm:2.0.6"
@@ -27110,6 +27371,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsx@npm:^4.19.2":
+  version: 4.19.2
+  resolution: "tsx@npm:4.19.2"
+  dependencies:
+    esbuild: "npm:~0.23.0"
+    fsevents: "npm:~2.3.3"
+    get-tsconfig: "npm:^4.7.5"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    tsx: dist/cli.mjs
+  checksum: 10/4c5610ed1fb2f80d766681f8ac7827e1e8118dfe354c18f74800691f3ef1e9ed676a29842ab818806bcf8613cdc97c6af84b5645e768ddb7f4b0527b9100deda
+  languageName: node
+  linkType: hard
+
 "tty-table@npm:^4.1.5":
   version: 4.2.3
   resolution: "tty-table@npm:4.2.3"

From 210218527664b5c50fca3ea6e8ec747a1dbedd36 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 15:20:13 +0000
Subject: [PATCH 5/8] replaced `lodash` dev-dependency with `lodash-es`
 (compatible with ES Modules)

---
 packages/tokens/package.json |  4 ++--
 yarn.lock                    | 27 +++++++++++++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index a55af29b3b..37105ef2e6 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.3",
-    "@types/lodash": "^4.14.200",
+    "@types/lodash-es": "^4",
     "@types/node": "^22.8.7",
     "@types/tinycolor2": "^1.4.5",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
@@ -32,7 +32,7 @@
     "del": "^5.1.0",
     "eslint": "^8.57.0",
     "fs-extra": "^11.1.1",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "path": "^0.12.7",
     "style-dictionary": "^4.2.0",
     "tinycolor2": "^1.6.0",
diff --git a/yarn.lock b/yarn.lock
index b534606553..5d3c961d0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4521,7 +4521,7 @@ __metadata:
   resolution: "@hashicorp/design-system-tokens@workspace:packages/tokens"
   dependencies:
     "@types/fs-extra": "npm:^11.0.3"
-    "@types/lodash": "npm:^4.14.200"
+    "@types/lodash-es": "npm:^4"
     "@types/node": "npm:^22.8.7"
     "@types/tinycolor2": "npm:^1.4.5"
     "@typescript-eslint/eslint-plugin": "npm:^8.5.0"
@@ -4529,7 +4529,7 @@ __metadata:
     del: "npm:^5.1.0"
     eslint: "npm:^8.57.0"
     fs-extra: "npm:^11.1.1"
-    lodash: "npm:^4.17.21"
+    lodash-es: "npm:^4.17.21"
     path: "npm:^0.12.7"
     style-dictionary: "npm:^4.2.0"
     tinycolor2: "npm:^1.6.0"
@@ -6389,6 +6389,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash-es@npm:^4":
+  version: 4.17.12
+  resolution: "@types/lodash-es@npm:4.17.12"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 10/56b9a433348b11c31051c6fa9028540a033a08fb80b400c589d740446c19444d73b217cf1471d4036448ef686a83e8cf2a35d1fadcb3f2105f26701f94aebb07
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.17.13
+  resolution: "@types/lodash@npm:4.17.13"
+  checksum: 10/ddb34e20810c71be2d9445bcc4b64ec25b83976738454de709854b79c7f655b03704b76235445699956d65012987720e0e429a35489de65495cdb5420202d905
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4.14.200":
   version: 4.14.202
   resolution: "@types/lodash@npm:4.14.202"
@@ -19871,6 +19887,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 10/03f39878ea1e42b3199bd3f478150ab723f93cc8730ad86fec1f2804f4a07c6e30deaac73cad53a88e9c3db33348bb8ceeb274552390e7a75d7849021c02df43
+  languageName: node
+  linkType: hard
+
 "lodash._baseflatten@npm:^3.0.0":
   version: 3.1.4
   resolution: "lodash._baseflatten@npm:3.1.4"

From 68ce2aa70787a47a58fabfe17f36d9fee1ecb484 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 16:14:43 +0000
Subject: [PATCH 6/8] updated `tsconfig.json` to make the Node.js application
 run and build correctly

---
 packages/tokens/tsconfig.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json
index 576239a06c..73125fb8ab 100644
--- a/packages/tokens/tsconfig.json
+++ b/packages/tokens/tsconfig.json
@@ -24,9 +24,10 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "NodeNext",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "nodenext",                      /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleDetection": "force",                          /* This setting controls how TypeScript determines whether a file is a script or a module. The "force" option ensures that every non-declaration file is treated as a module. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
@@ -67,6 +68,7 @@
 
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "allowImportingTsExtensions": true,                  /* allows TypeScript files to import each other with a TypeScript-specific extension like .ts, .mts, or .tsx. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */

From d31731c5c7dc51d53e20d9cbf0bcae771cc98384 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 13 Nov 2024 11:54:29 +0000
Subject: [PATCH 7/8] updated `build.ts` script and other sub-scripts to follow
 the new StyleDictionary APIs and in the process fix all the TS issues raised
 by the linter

---
 packages/tokens/scripts/@types/Config.d.ts    |  3 +-
 .../build-parts/generateColorHelpers.ts       |  6 +-
 .../scripts/build-parts/generateCssHelpers.ts | 26 +++---
 .../build-parts/generateElevationHelpers.ts   |  8 +-
 .../build-parts/generateFocusRingHelpers.ts   |  6 +-
 .../build-parts/generateTypographyHelpers.ts  | 35 ++++---
 packages/tokens/scripts/build.ts              | 91 ++++++++++---------
 7 files changed, 97 insertions(+), 78 deletions(-)

diff --git a/packages/tokens/scripts/@types/Config.d.ts b/packages/tokens/scripts/@types/Config.d.ts
index 7499186f36..859d42a181 100644
--- a/packages/tokens/scripts/@types/Config.d.ts
+++ b/packages/tokens/scripts/@types/Config.d.ts
@@ -7,8 +7,7 @@ import { Config } from 'style-dictionary';
 
 export type ConfigTarget = {
     source: Config['source'],
-    // TODO- CR: why this can't be Config['transformGroup'] ??
-    transformGroup: string,
+    transformGroup: Config['transformGroup'],
     platforms: string[],
 };
 
diff --git a/packages/tokens/scripts/build-parts/generateColorHelpers.ts b/packages/tokens/scripts/build-parts/generateColorHelpers.ts
index 0e71329b05..3105202c8c 100644
--- a/packages/tokens/scripts/build-parts/generateColorHelpers.ts
+++ b/packages/tokens/scripts/build-parts/generateColorHelpers.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { TransformedToken }  from 'style-dictionary';
+import type { TransformedToken }  from 'style-dictionary';
 
-import { PREFIX } from './generateCssHelpers';
+import { PREFIX } from './generateCssHelpers.ts';
 
 type Helpers = string[];
 
@@ -17,7 +17,7 @@ export function generateColorHelpers(tokens: TransformedToken[], outputCssVars:
 
         if (!(token.attributes?.category === 'color')) return;
 
-        const group = token.attributes.type || '';
+        const group = typeof token.attributes.type === 'string' ? token.attributes.type : '';
         const value = outputCssVars ? `var(--${token.name})` : token.value;
 
         if (['foreground', 'page', 'surface', 'border'].includes(group)) {
diff --git a/packages/tokens/scripts/build-parts/generateCssHelpers.ts b/packages/tokens/scripts/build-parts/generateCssHelpers.ts
index 6e11209180..2b02bf59b2 100644
--- a/packages/tokens/scripts/build-parts/generateCssHelpers.ts
+++ b/packages/tokens/scripts/build-parts/generateCssHelpers.ts
@@ -5,21 +5,21 @@
 
 import fs from 'fs-extra';
 
-import { Dictionary, Platform }  from 'style-dictionary';
+import type { Dictionary, PlatformConfig }  from 'style-dictionary';
+import { fileHeader } from 'style-dictionary/utils';
 
-import { generateColorHelpers } from './generateColorHelpers';
-import { generateTypographyHelpers } from './generateTypographyHelpers';
-import { generateElevationHelpers } from './generateElevationHelpers';
-import { generateFocusRingHelpers } from './generateFocusRingHelpers';
+import { generateColorHelpers } from './generateColorHelpers.ts';
+import { generateTypographyHelpers } from './generateTypographyHelpers.ts';
+import { generateElevationHelpers } from './generateElevationHelpers.ts';
+import { generateFocusRingHelpers } from './generateFocusRingHelpers.ts';
 
 export const PREFIX = 'hds';
 
-export async function generateCssHelpers(dictionary: Dictionary, config: Platform ): Promise<void> {
+export async function generateCssHelpers(dictionary: Dictionary, config: PlatformConfig ): Promise<void> {
 
     fs.ensureDir(`${config.buildPath}helpers/`);
 
-    // tried to use style-dictionary/lib/common/formatHelpers/fileHeader.js but didn't work
-    const header = `/**\n * Do not edit directly\n * Generated on ${new Date().toUTCString()}\n */\n`;
+    const header = await fileHeader({});
 
     // unfortunately there's no way to pass arguments/parameters to the actions
     // so we need to use the `config` to detect which transformGroup is running
@@ -30,25 +30,25 @@ export async function generateCssHelpers(dictionary: Dictionary, config: Platfor
         // notice: the "color" tokens have different structure depending on the type
         // so it's simpler to process all the tokens (flat structure) and filter them
         const helpers = generateColorHelpers(dictionary.allTokens, outputCssVars);
-        const content = `${header}\n${helpers.join('\n')}\n`;
+        const content = `${header}${helpers.join('\n')}\n`;
         await fs.writeFile(`${config.buildPath}helpers/color.css`, content);
     }
 
     if (dictionary.tokens.typography) {
         const helpers = generateTypographyHelpers(dictionary.tokens.typography, outputCssVars);
-        const content = `${header}\n${helpers.join('\n')}\n`;
+        const content = `${header}${helpers.join('\n')}\n`;
         await fs.writeFile(`${config.buildPath}helpers/typography.css`, content);
     }
 
-    if (dictionary.tokens.elevation) {
+    if (dictionary.tokens.elevation && dictionary.tokens.surface) {
         const helpers = generateElevationHelpers(dictionary.tokens.elevation, dictionary.tokens.surface, outputCssVars);
-        const content = `${header}\n${helpers.join('\n')}\n`;
+        const content = `${header}${helpers.join('\n')}\n`;
         await fs.writeFile(`${config.buildPath}helpers/elevation.css`, content);
     }
 
     if (dictionary.tokens['focus-ring']) {
         const helpers = generateFocusRingHelpers(dictionary.tokens['focus-ring'], outputCssVars);
-        const content = `${header}\n${helpers.join('\n')}\n`;
+        const content = `${header}${helpers.join('\n')}\n`;
         await fs.writeFile(`${config.buildPath}helpers/focus-ring.css`, content);
     }
 }
diff --git a/packages/tokens/scripts/build-parts/generateElevationHelpers.ts b/packages/tokens/scripts/build-parts/generateElevationHelpers.ts
index 1b93e5eb15..bd1aeab63d 100644
--- a/packages/tokens/scripts/build-parts/generateElevationHelpers.ts
+++ b/packages/tokens/scripts/build-parts/generateElevationHelpers.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { TransformedTokens }  from 'style-dictionary';
+import type { TransformedTokens }  from 'style-dictionary';
 
-import { PREFIX } from './generateCssHelpers';
+import { PREFIX } from './generateCssHelpers.ts';
 
 type Helpers = string[];
 
@@ -22,7 +22,7 @@ export function generateElevationHelpers(tokensElevation: TransformedTokens, tok
         const levelName = key;
         const levelValues = tokensElevation[key];
 
-        if (levelValues.hasOwnProperty('box-shadow')) {
+        if (levelValues && levelValues.hasOwnProperty('box-shadow')) {
             const selector = `.${PREFIX}-elevation-${levelName}`;
             const value = outputCssVars ? `var(--token-elevation-${levelName}-box-shadow` : levelValues['box-shadow'].value;
             helpersElevation.push(`${selector} { box-shadow: ${value}); }`);
@@ -34,7 +34,7 @@ export function generateElevationHelpers(tokensElevation: TransformedTokens, tok
         const levelName = key;
         const levelValues = tokensSurface[key];
 
-        if (levelValues.hasOwnProperty('box-shadow')) {
+        if (levelValues && levelValues.hasOwnProperty('box-shadow')) {
             const selector = `.${PREFIX}-surface-${levelName}`;
             const value = outputCssVars ? `var(--token-surface-${levelName}-box-shadow)` : levelValues['box-shadow'].value;
             helpersSurface.push(`${selector} { box-shadow: ${value}; }`);
diff --git a/packages/tokens/scripts/build-parts/generateFocusRingHelpers.ts b/packages/tokens/scripts/build-parts/generateFocusRingHelpers.ts
index d53b8bc5cf..d12af3bab0 100644
--- a/packages/tokens/scripts/build-parts/generateFocusRingHelpers.ts
+++ b/packages/tokens/scripts/build-parts/generateFocusRingHelpers.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { TransformedTokens }  from 'style-dictionary';
+import type { TransformedTokens }  from 'style-dictionary';
 
-import { PREFIX } from './generateCssHelpers';
+import { PREFIX } from './generateCssHelpers.ts';
 
 type Helpers = string[];
 
@@ -15,7 +15,7 @@ export function generateFocusRingHelpers(tokens: TransformedTokens, outputCssVar
 
     Object.keys(tokens).forEach((key: string) => {
         const color = key;
-        if (tokens[color].hasOwnProperty('box-shadow')) {
+        if (tokens && tokens[color] && tokens[color].hasOwnProperty('box-shadow')) {
             const selector = `.${PREFIX}-focus-ring-${color}-box-shadow`;
             const value = outputCssVars ? `var(--token-focus-ring-${color}-box-shadow)` : tokens[color]['box-shadow'].value;
             helpersFocusRing.push(`${selector} { box-shadow: ${value}; }`);
diff --git a/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts b/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts
index c013663474..aed2536a74 100644
--- a/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts
+++ b/packages/tokens/scripts/build-parts/generateTypographyHelpers.ts
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { TransformedTokens }  from 'style-dictionary';
+import type { TransformedTokens } from 'style-dictionary';
 
-import { PREFIX } from './generateCssHelpers';
+import { PREFIX } from './generateCssHelpers.ts';
 
 type Helpers = string[];
 
@@ -39,22 +39,33 @@ export function generateTypographyHelpers(tokens: TransformedTokens, outputCssVa
 
             const fontWeightTokens = tokens[key];
 
-            Object.keys(fontWeightTokens).forEach(weight => {
-                const selector = `.${PREFIX}-font-weight-${weight}`;
-                helpers.push(`${selector} { font-weight: ${fontWeightTokens[weight].value}; }`);
-            });
+            if (fontWeightTokens) {
+                Object.keys(fontWeightTokens).forEach(weight => {
+                    const selector = `.${PREFIX}-font-weight-${weight}`;
+                    helpers.push(`${selector} { font-weight: ${fontWeightTokens[weight].value}; }`);
+                });
+            }
 
         } else {
 
             let stylename = key;
 
             // basic font styles
-            const valueFontFamily = outputCssVars ? `var(--token-typography-${stylename}-font-family)` : tokens[stylename]['font-family'].value;
-            const valueFontSize = outputCssVars ? `var(--token-typography-${stylename}-font-size)` : tokens[stylename]['font-size'].value;
-            const valueLineHeight = outputCssVars ? `var(--token-typography-${stylename}-line-height)` : tokens[stylename]['line-height'].value;
-            declarations.push(`font-family: ${valueFontFamily};`);
-            declarations.push(`font-size: ${valueFontSize};`);
-            declarations.push(`line-height: ${valueLineHeight};`);
+            if (outputCssVars) {
+                declarations.push(`font-family: var(--token-typography-${stylename}-font-family);`);
+                declarations.push(`font-size: var(--token-typography-${stylename}-font-size);`);
+                declarations.push(`line-height: var(--token-typography-${stylename}-line-height);`);
+            } else {
+                if (tokens[key] && tokens[key]['font-family'] && tokens[key]['font-family'].value) {
+                    declarations.push(`font-family: ${tokens[key]['font-family'].value};`);
+                }
+                if (tokens[key] && tokens[key]['font-size'] && tokens[key]['font-size'].value) {
+                    declarations.push(`font-size: ${tokens[key]['font-size'].value};`);
+                }
+                if (tokens[key] && tokens[key]['line-height'] && tokens[key]['line-height'].value) {
+                    declarations.push(`line-height: ${tokens[key]['line-height'].value};`);
+                }
+            }
 
             // we reset margin/padding for all the text elements
             declarations.push('margin: 0;');
diff --git a/packages/tokens/scripts/build.ts b/packages/tokens/scripts/build.ts
index fe4a8417e8..de6ae416dc 100644
--- a/packages/tokens/scripts/build.ts
+++ b/packages/tokens/scripts/build.ts
@@ -3,59 +3,65 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import StyleDictionaryPackage, { DesignToken, Transform, Config }  from 'style-dictionary';
+import StyleDictionary from 'style-dictionary';
+import type { Config, DesignToken, Transform } from 'style-dictionary/types';
+
 import tinycolor from 'tinycolor2';
 
 import fs from 'fs-extra';
 import path from 'path';
-import { cloneDeep } from 'lodash';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { cloneDeep } from 'lodash-es';
 
-import { ConfigTargets } from './@types/Config';
+import type { ConfigTargets } from './@types/Config.d.ts';
 
-import { generateCssHelpers } from './build-parts/generateCssHelpers';
+import { generateCssHelpers } from './build-parts/generateCssHelpers.ts';
 
 // SCRIPT CONFIG
 
+const __filename = fileURLToPath(import.meta.url); // Get the file path of the current module
+const __dirname = dirname(__filename); // Get the directory name of the current module
 const distFolder = path.resolve(__dirname, '../dist');
 
 // CUSTOM TRANSFORMS
 
-const transformPxToRem: Transform['transformer'] = (token, platform) => {
+const transformPxToRem: Transform['transform'] = (token, platform) => {
     const val = parseFloat(token.value);
     const baseFont = platform?.basePxFontSize || 16;
     if (isNaN(val)) throw `Invalid Number: '${token.name}: ${token.value}' is not a valid number, cannot transform to 'rem'.\n`;
     return `${(token.value / baseFont)}rem`;
 }
 
-StyleDictionaryPackage.registerTransform({
+StyleDictionary.registerTransform({
     name: 'size/px',
     type: 'value',
-    matcher: function(token) {
+    filter: function(token) {
         return token.type === 'size';
     },
-    transformer: function (token) {
+    transform: function (token) {
         const val = parseFloat(token.value);
         if (isNaN(val)) throw `Invalid Number: '${token.name}: ${token.value}' is not a valid number, cannot transform to 'px'.\n`;
         return `${token.value}px`;
     }
 });
 
-StyleDictionaryPackage.registerTransform({
+StyleDictionary.registerTransform({
     name: 'font-size/rem',
     type: 'value',
-    matcher: function(token) {
+    filter: function(token) {
         return token?.attributes?.category === 'typography' && token.type === 'font-size';
     },
-    transformer: transformPxToRem
+    transform: transformPxToRem
 });
 
-StyleDictionaryPackage.registerTransform({
+StyleDictionary.registerTransform({
     name: 'font-size/px',
     type: 'value',
-    matcher: function(token) {
+    filter: function(token) {
         return token?.attributes?.category === 'typography' && token.type === 'font-size';
     },
-    transformer: function (token) {
+    transform: function (token) {
         const val = parseFloat(token.value);
         if (isNaN(val)) throw `Invalid Number: '${token.name}: ${token.value}' is not a valid number, cannot transform to 'px'.\n`;
         return `${token.value}px`;
@@ -65,14 +71,14 @@ StyleDictionaryPackage.registerTransform({
 // NOTICE: in case in the future we need more complex transformations, we can use this approach (see the "modify" attribute):
 // https://github.com/amzn/style-dictionary/blob/main/examples/advanced/transitive-transforms/
 //
-StyleDictionaryPackage.registerTransform({
+StyleDictionary.registerTransform({
     name: 'color/with-alpha',
     type: 'value',
     transitive: true, // see: https://amzn.github.io/style-dictionary/#/transforms?id=transitive-transforms
-    matcher: function(token: DesignToken) {
+    filter: function(token: DesignToken) {
         return token.type === 'color' && token.alpha;
     },
-    transformer: function (token) {
+    transform: function (token) {
         const color = tinycolor(token.value);
         if (!color.isValid) throw `Invalid Color: '${token.name}: ${token.value}' is not a valid color.\n`;
         const alpha = parseFloat(token.alpha);
@@ -82,41 +88,41 @@ StyleDictionaryPackage.registerTransform({
     }
 });
 
-StyleDictionaryPackage.registerTransform({
-    name: 'time/seconds', // notice: the name is an override of an existing predefined method
+StyleDictionary.registerTransform({
+    name: 'time/sec',
     type: 'value',
-    matcher: function (token) {
+    filter: function (token) {
         return token.type === 'time' && token.value.match(/^[\d.]+$/);
     },
-    transformer: function (token) {
+    transform: function (token) {
         return `${token.value}s`;
     },
 });
 
-StyleDictionaryPackage.registerTransformGroup({
+StyleDictionary.registerTransformGroup({
     name: 'products/web',
-    transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
+    transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/sec']
 });
 
-StyleDictionaryPackage.registerTransformGroup({
+StyleDictionary.registerTransformGroup({
     name: 'products/email',
     // notice: for emails we need the font-size in `px` (not `rem`)
-    transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
+    transforms: ['attribute/cti', 'name/kebab', 'font-size/px', 'size/px', 'color/css', 'color/with-alpha', 'time/sec']
 });
 
-StyleDictionaryPackage.registerTransformGroup({
+StyleDictionary.registerTransformGroup({
     name: 'marketing/web',
-    transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/seconds']
+    transforms: ['attribute/cti', 'name/kebab', 'font-size/rem', 'size/px', 'color/css', 'color/with-alpha', 'time/sec']
 });
 
-StyleDictionaryPackage.registerFormat({
+StyleDictionary.registerFormat({
     name: 'docs/json',
-    formatter: function (dictionary: any) {
-        // console.log(dictionary.allProperties);
+    format: function (dictionary: any) {
+        // console.log(dictionary.allTokens);
         // Notice: this object shape is used also in the documentation so any updates
         // to this format should be reflected in the corresponding type definition.
         const output: {}[] = [];
-        dictionary.allProperties.forEach((token: any) => {
+        dictionary.allTokens.forEach((token: any) => {
             // we remove the "filePath" prop from the token because the orginal file path is irrelevant for us
             // (plus its value is an absolute path, so it causes useless diffs in git)
             const outputToken = cloneDeep(token);
@@ -128,7 +134,7 @@ StyleDictionaryPackage.registerFormat({
     },
 });
 
-StyleDictionaryPackage.registerAction({
+StyleDictionary.registerAction({
     name: 'generate-css-helpers',
     do: generateCssHelpers,
     undo: () => {}
@@ -177,11 +183,13 @@ const targets: ConfigTargets = {
 };
 
 function getStyleDictionaryConfig({ target }: { target: string }): Config {
-    const { source, transformGroup, platforms } = targets[target]
-    const config: Config = {
-        source,
-        platforms: {}
-    }
+    // @ts-ignore safe to ignore, since we control the `targets` object, and the `getStyleDictionaryConfig` invocations
+    const { source, transformGroup, platforms } = targets[target];
+
+    // we need to explicitly initialize the `config` object this way to make TS happy
+    const config: Config = {};
+    config.source = source;
+    config.platforms = {};
 
     if (platforms.includes('web/css-variables')) {
         config.platforms['web/css-variables'] = {
@@ -268,13 +276,14 @@ console.log('\n==============================================');
 console.log(`\nCleaning up dist folder`);
 fs.emptyDirSync(distFolder);
 
-Object.keys(targets).forEach(async target => {
-    const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig({ target }));
+for (const target of Object.keys(targets)) {
+    const StyleDictionaryInstance = new StyleDictionary(getStyleDictionaryConfig({ target }));
 
     console.log(`\nProcessing target "${target}"...`);
-    StyleDictionary.buildAllPlatforms()
+    await StyleDictionaryInstance.hasInitialized;
+    await StyleDictionaryInstance.buildAllPlatforms()
     console.log('\nEnd processing');
-})
+}
 
 
 console.log('\n==============================================');

From 56ff38b6ac64c7a2821ea0d6dc6383084b8833ce Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Thu, 14 Nov 2024 10:53:25 +0000
Subject: [PATCH 8/8] run `yarn build` with the new version of StyleDictonary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

there is a diff in code, but it’s not meaningful because:

- the header has changed, now there is no more a “Generated on” date
- the hex value of one tokena has been changed from `#fff` to `#ffffff` (probably due to a new version of the `tinycolor` dependency)
- the order of some tokens in the generated files has change, but I think it’s because of the async nature of the new StyleDictionary code and/or how the files are read from the filesystem in a recursive way (before child folders were read before child files, now it seems the order is child files and then child folders)

(to be 100% sure I compared the old vs the new file with the tokens sorted alphabetically, and the only differences were the one described above, so it should OK as is now too)
---
 .../tokens/dist/cloud-email/helpers/color.css |    3 +-
 .../dist/cloud-email/helpers/elevation.css    |    7 +-
 .../dist/cloud-email/helpers/focus-ring.css   |    3 +-
 .../dist/cloud-email/helpers/typography.css   |    3 +-
 packages/tokens/dist/cloud-email/tokens.scss  |    7 +-
 .../tokens/dist/devdot/css/helpers/color.css  |    3 +-
 .../dist/devdot/css/helpers/elevation.css     |    7 +-
 .../dist/devdot/css/helpers/focus-ring.css    |    3 +-
 .../dist/devdot/css/helpers/typography.css    |    3 +-
 packages/tokens/dist/devdot/css/tokens.css    |   91 +-
 .../tokens/dist/docs/products/tokens.json     | 2212 +++++------
 .../dist/marketing/css/helpers/color.css      |    3 +-
 .../dist/marketing/css/helpers/elevation.css  |    7 +-
 .../dist/marketing/css/helpers/focus-ring.css |    3 +-
 .../dist/marketing/css/helpers/typography.css |    3 +-
 packages/tokens/dist/marketing/css/tokens.css |   91 +-
 packages/tokens/dist/marketing/tokens.json    | 3310 ++++++++---------
 .../dist/products/css/helpers/color.css       |    3 +-
 .../dist/products/css/helpers/elevation.css   |    7 +-
 .../dist/products/css/helpers/focus-ring.css  |    3 +-
 .../dist/products/css/helpers/typography.css  |    3 +-
 packages/tokens/dist/products/css/tokens.css  |   91 +-
 22 files changed, 2923 insertions(+), 2943 deletions(-)

diff --git a/packages/tokens/dist/cloud-email/helpers/color.css b/packages/tokens/dist/cloud-email/helpers/color.css
index 83eb49c584..ddfd7479df 100644
--- a/packages/tokens/dist/cloud-email/helpers/color.css
+++ b/packages/tokens/dist/cloud-email/helpers/color.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-border-primary { border: 1px solid #656a7633; }
diff --git a/packages/tokens/dist/cloud-email/helpers/elevation.css b/packages/tokens/dist/cloud-email/helpers/elevation.css
index 152bcdd5cf..4ee5919eca 100644
--- a/packages/tokens/dist/cloud-email/helpers/elevation.css
+++ b/packages/tokens/dist/cloud-email/helpers/elevation.css
@@ -1,13 +1,12 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
-.hds-elevation-high { box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633); }
-.hds-elevation-higher { box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640); }
 .hds-elevation-inset { box-shadow: inset 0px 1px 2px 1px #656a761a); }
 .hds-elevation-low { box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d); }
 .hds-elevation-mid { box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633); }
+.hds-elevation-high { box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633); }
+.hds-elevation-higher { box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640); }
 .hds-elevation-overlay { box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559); }
 .hds-surface-inset { box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a; }
 .hds-surface-base { box-shadow: 0 0 0 1px #656a7633; }
diff --git a/packages/tokens/dist/cloud-email/helpers/focus-ring.css b/packages/tokens/dist/cloud-email/helpers/focus-ring.css
index 3c66b040fa..00cceb170d 100644
--- a/packages/tokens/dist/cloud-email/helpers/focus-ring.css
+++ b/packages/tokens/dist/cloud-email/helpers/focus-ring.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-focus-ring-action-box-shadow { box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff; }
diff --git a/packages/tokens/dist/cloud-email/helpers/typography.css b/packages/tokens/dist/cloud-email/helpers/typography.css
index 7475f2f263..7adb62f4fd 100644
--- a/packages/tokens/dist/cloud-email/helpers/typography.css
+++ b/packages/tokens/dist/cloud-email/helpers/typography.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-font-family-sans-display { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
diff --git a/packages/tokens/dist/cloud-email/tokens.scss b/packages/tokens/dist/cloud-email/tokens.scss
index ed276f1a68..481d6b2387 100644
--- a/packages/tokens/dist/cloud-email/tokens.scss
+++ b/packages/tokens/dist/cloud-email/tokens.scss
@@ -1,6 +1,5 @@
 
-// Do not edit directly
-// Generated on Fri, 20 Sep 2024 19:02:21 GMT
+// Do not edit directly, this file was auto-generated.
 
 $token-color-palette-blue-500: #1c345f;
 $token-color-palette-blue-400: #0046d1;
@@ -176,11 +175,11 @@ $token-color-waypoint-gradient-primary-start: #cbf1f3;
 $token-color-waypoint-gradient-primary-stop: #62d4dc;
 $token-color-waypoint-gradient-faint-start: #f6feff; // this is the 'waypoint-50' value at 25% opacity on white
 $token-color-waypoint-gradient-faint-stop: #e0fcff;
-$token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
-$token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
 $token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
 $token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
 $token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
+$token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
+$token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
 $token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
 $token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
 $token-surface-base-box-shadow: 0 0 0 1px #656a7633;
diff --git a/packages/tokens/dist/devdot/css/helpers/color.css b/packages/tokens/dist/devdot/css/helpers/color.css
index aa49145aca..37dea04d98 100644
--- a/packages/tokens/dist/devdot/css/helpers/color.css
+++ b/packages/tokens/dist/devdot/css/helpers/color.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
diff --git a/packages/tokens/dist/devdot/css/helpers/elevation.css b/packages/tokens/dist/devdot/css/helpers/elevation.css
index c95f4ed054..c7a86b7cba 100644
--- a/packages/tokens/dist/devdot/css/helpers/elevation.css
+++ b/packages/tokens/dist/devdot/css/helpers/elevation.css
@@ -1,13 +1,12 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
-.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
-.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
 .hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
 .hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
+.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
+.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
 .hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
 .hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
diff --git a/packages/tokens/dist/devdot/css/helpers/focus-ring.css b/packages/tokens/dist/devdot/css/helpers/focus-ring.css
index e9946a6735..57e7b9dee5 100644
--- a/packages/tokens/dist/devdot/css/helpers/focus-ring.css
+++ b/packages/tokens/dist/devdot/css/helpers/focus-ring.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }
diff --git a/packages/tokens/dist/devdot/css/helpers/typography.css b/packages/tokens/dist/devdot/css/helpers/typography.css
index 76a7605cc4..393b890090 100644
--- a/packages/tokens/dist/devdot/css/helpers/typography.css
+++ b/packages/tokens/dist/devdot/css/helpers/typography.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }
diff --git a/packages/tokens/dist/devdot/css/tokens.css b/packages/tokens/dist/devdot/css/tokens.css
index fc0c2286e1..9a9cc4d3c4 100644
--- a/packages/tokens/dist/devdot/css/tokens.css
+++ b/packages/tokens/dist/devdot/css/tokens.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
@@ -180,11 +179,11 @@
   --token-color-waypoint-gradient-primary-stop: #62d4dc;
   --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
   --token-color-waypoint-gradient-faint-stop: #e0fcff;
-  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
-  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
   --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
+  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
+  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
   --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -195,6 +194,47 @@
   --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
   --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
+  --token-app-header-height: 60px;
+  --token-app-header-home-link-size: 36px;
+  --token-app-header-logo-size: 28px;
+  --token-app-side-nav-wrapper-border-width: 1px;
+  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
+  --token-app-side-nav-wrapper-padding-horizontal: 16px;
+  --token-app-side-nav-wrapper-padding-vertical: 16px;
+  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
+  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
+  --token-app-side-nav-toggle-button-border-radius: 5px;
+  --token-app-side-nav-header-home-link-padding: 4px;
+  --token-app-side-nav-header-home-link-logo-size: 48px;
+  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
+  --token-app-side-nav-header-actions-spacing: 8px;
+  --token-app-side-nav-body-list-margin-vertical: 24px;
+  --token-app-side-nav-body-list-item-height: 36px;
+  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
+  --token-app-side-nav-body-list-item-padding-vertical: 4px;
+  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
+  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
+  --token-app-side-nav-body-list-item-border-radius: 5px;
+  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
+  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
+  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
+  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
+  --token-form-label-color: #0c0c0e;
+  --token-form-legend-color: #0c0c0e;
+  --token-form-helper-text-color: #656a76;
+  --token-form-indicator-optional-color: #656a76;
+  --token-form-error-color: #c00005;
+  --token-form-error-icon-size: 14px;
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+  --token-form-checkbox-border-width: 1px;
+  --token-form-checkbox-background-image-size: 12px;
+  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -217,20 +257,6 @@
   --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
   --token-form-control-border-radius: 5px;
   --token-form-control-border-width: 1px;
-  --token-form-label-color: #0c0c0e;
-  --token-form-legend-color: #0c0c0e;
-  --token-form-helper-text-color: #656a76;
-  --token-form-indicator-optional-color: #656a76;
-  --token-form-error-color: #c00005;
-  --token-form-error-icon-size: 14px;
-  --token-form-checkbox-size: 16px;
-  --token-form-checkbox-border-radius: 3px;
-  --token-form-checkbox-border-width: 1px;
-  --token-form-checkbox-background-image-size: 12px;
-  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-radio-size: 16px;
   --token-form-radio-border-width: 1px;
   --token-form-radio-background-image-size: 12px;
@@ -266,33 +292,6 @@
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
-  --token-app-header-height: 60px;
-  --token-app-header-home-link-size: 36px;
-  --token-app-header-logo-size: 28px;
-  --token-app-side-nav-wrapper-border-width: 1px;
-  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
-  --token-app-side-nav-wrapper-padding-horizontal: 16px;
-  --token-app-side-nav-wrapper-padding-vertical: 16px;
-  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
-  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
-  --token-app-side-nav-toggle-button-border-radius: 5px;
-  --token-app-side-nav-header-home-link-padding: 4px;
-  --token-app-side-nav-header-home-link-logo-size: 48px;
-  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
-  --token-app-side-nav-header-actions-spacing: 8px;
-  --token-app-side-nav-body-list-margin-vertical: 24px;
-  --token-app-side-nav-body-list-item-height: 36px;
-  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
-  --token-app-side-nav-body-list-item-padding-vertical: 4px;
-  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
-  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
-  --token-app-side-nav-body-list-item-border-radius: 5px;
-  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
-  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
-  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
-  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
-  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
-  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
   --token-pagination-nav-control-height: 36px;
   --token-pagination-nav-control-padding-horizontal: 12px;
   --token-pagination-nav-control-focus-inset: 4px;
@@ -320,7 +319,7 @@
   --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
   --token-side-nav-body-list-item-border-radius: 5px;
   --token-side-nav-color-foreground-primary: #dedfe3;
-  --token-side-nav-color-foreground-strong: #fff;
+  --token-side-nav-color-foreground-strong: #ffffff;
   --token-side-nav-color-foreground-faint: #8c909c;
   --token-side-nav-color-surface-primary: #0c0c0e;
   --token-side-nav-color-surface-interactive-hover: #3b3d45;
diff --git a/packages/tokens/dist/docs/products/tokens.json b/packages/tokens/dist/docs/products/tokens.json
index e2cbee6411..ffb45cd5e0 100644
--- a/packages/tokens/dist/docs/products/tokens.json
+++ b/packages/tokens/dist/docs/products/tokens.json
@@ -3860,87 +3860,87 @@
     ]
   },
   {
-    "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
+    "value": "inset 0px 1px 2px 1px #656a761a",
     "original": {
-      "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
+      "value": "{elevation.inset.box-shadow-01.value}"
     },
-    "name": "token-elevation-high-box-shadow",
+    "name": "token-elevation-inset-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "high",
+      "type": "inset",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "high",
+      "inset",
       "box-shadow"
     ]
   },
   {
-    "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
+    "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
     "original": {
-      "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
+      "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
     },
-    "name": "token-elevation-higher-box-shadow",
+    "name": "token-elevation-low-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "higher",
+      "type": "low",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "higher",
+      "low",
       "box-shadow"
     ]
   },
   {
-    "value": "inset 0px 1px 2px 1px #656a761a",
+    "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
     "original": {
-      "value": "{elevation.inset.box-shadow-01.value}"
+      "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
     },
-    "name": "token-elevation-inset-box-shadow",
+    "name": "token-elevation-mid-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "inset",
+      "type": "mid",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "inset",
+      "mid",
       "box-shadow"
     ]
   },
   {
-    "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
+    "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
     "original": {
-      "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
+      "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
     },
-    "name": "token-elevation-low-box-shadow",
+    "name": "token-elevation-high-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "low",
+      "type": "high",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "low",
+      "high",
       "box-shadow"
     ]
   },
   {
-    "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
+    "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
     "original": {
-      "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
+      "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
     },
-    "name": "token-elevation-mid-box-shadow",
+    "name": "token-elevation-higher-box-shadow",
     "attributes": {
       "category": "elevation",
-      "type": "mid",
+      "type": "higher",
       "item": "box-shadow"
     },
     "path": [
       "elevation",
-      "mid",
+      "higher",
       "box-shadow"
     ]
   },
@@ -4115,527 +4115,580 @@
     ]
   },
   {
-    "value": "#0c0c0e",
-    "type": "color",
-    "group": "components",
+    "value": "60px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.strong.value}",
-      "type": "color",
-      "group": "components"
+      "value": "60",
+      "type": "size"
     },
-    "name": "token-form-control-base-foreground-value-color",
+    "name": "token-app-header-height",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "foreground",
-      "state": "value-color"
+      "category": "app-header",
+      "type": "height"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "foreground",
-      "value-color"
+      "app-header",
+      "height"
     ]
   },
   {
-    "value": "#656a76",
-    "type": "color",
-    "group": "components",
+    "value": "36px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.faint.value}",
-      "type": "color",
-      "group": "components"
+      "value": "36",
+      "type": "size"
     },
-    "name": "token-form-control-base-foreground-placeholder-color",
+    "name": "token-app-header-home-link-size",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "foreground",
-      "state": "placeholder-color"
+      "category": "app-header",
+      "type": "home-link",
+      "item": "size"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "foreground",
-      "placeholder-color"
+      "app-header",
+      "home-link",
+      "size"
     ]
   },
   {
-    "value": "#ffffff",
-    "type": "color",
-    "group": "components",
+    "value": "28px",
+    "type": "size",
     "original": {
-      "value": "{color.surface.interactive.value}",
-      "type": "color",
-      "group": "components"
+      "value": "28",
+      "type": "size"
     },
-    "name": "token-form-control-base-surface-color-default",
+    "name": "token-app-header-logo-size",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "surface-color",
-      "state": "default"
+      "category": "app-header",
+      "type": "logo",
+      "item": "size"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "surface-color",
-      "default"
+      "app-header",
+      "logo",
+      "size"
     ]
   },
   {
-    "value": "#f1f2f3",
-    "type": "color",
-    "group": "components",
+    "value": "1px",
+    "type": "size",
     "original": {
-      "value": "{color.surface.interactive-hover.value}",
-      "type": "color",
-      "group": "components"
+      "value": "1",
+      "type": "size"
     },
-    "name": "token-form-control-base-surface-color-hover",
+    "name": "token-app-side-nav-wrapper-border-width",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "surface-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "border",
+      "subitem": "width"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "surface-color",
-      "hover"
+      "app-side-nav",
+      "wrapper",
+      "border",
+      "width"
     ]
   },
   {
-    "value": "#8c909c",
+    "value": "var(--token-color-palette-neutral-200)",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.palette.neutral-400.value}",
+      "value": "var(--token-color-palette-neutral-200)",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-base-border-color-default",
+    "name": "token-app-side-nav-wrapper-border-color",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "border-color",
-      "state": "default"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "border",
+      "subitem": "color"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "border-color",
-      "default"
+      "app-side-nav",
+      "wrapper",
+      "border",
+      "color"
     ]
   },
   {
-    "value": "#656a76",
-    "type": "color",
-    "group": "components",
+    "value": "16px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.neutral-500.value}",
-      "type": "color",
-      "group": "components"
+      "value": "16",
+      "type": "size"
     },
-    "name": "token-form-control-base-border-color-hover",
+    "name": "token-app-side-nav-wrapper-padding-horizontal",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "base",
-      "subitem": "border-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "horizontal"
     },
     "path": [
-      "form",
-      "control",
-      "base",
-      "border-color",
-      "hover"
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "horizontal"
     ]
   },
   {
-    "value": "#ffffff",
-    "type": "color",
-    "group": "components",
+    "value": "16px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.high-contrast.value}",
-      "type": "color",
-      "group": "components"
+      "value": "16",
+      "type": "size"
     },
-    "name": "token-form-control-checked-foreground-color",
+    "name": "token-app-side-nav-wrapper-padding-vertical",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "foreground-color"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "vertical"
     },
     "path": [
-      "form",
-      "control",
-      "checked",
-      "foreground-color"
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "vertical"
     ]
   },
   {
-    "value": "#1060ff",
-    "type": "color",
-    "group": "components",
+    "value": "8px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.blue-200.value}",
-      "type": "color",
-      "group": "components"
+      "value": "8",
+      "type": "size"
     },
-    "name": "token-form-control-checked-surface-color-default",
+    "name": "token-app-side-nav-wrapper-padding-horizontal-minimized",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "surface-color",
-      "state": "default"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "horizontal-minimized"
     },
     "path": [
-      "form",
-      "control",
-      "checked",
-      "surface-color",
-      "default"
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "horizontal-minimized"
     ]
   },
   {
-    "value": "#0c56e9",
-    "type": "color",
-    "group": "components",
+    "value": "22px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.blue-300.value}",
-      "type": "color",
-      "group": "components"
+      "value": "22",
+      "type": "size"
     },
-    "name": "token-form-control-checked-surface-color-hover",
+    "name": "token-app-side-nav-wrapper-padding-vertical-minimized",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "surface-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "wrapper",
+      "item": "padding",
+      "subitem": "vertical-minimized"
     },
     "path": [
-      "form",
-      "control",
-      "checked",
-      "surface-color",
-      "hover"
+      "app-side-nav",
+      "wrapper",
+      "padding",
+      "vertical-minimized"
     ]
   },
   {
-    "value": "#0c56e9",
-    "type": "color",
-    "group": "components",
+    "value": "5px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.blue-300.value}",
-      "type": "color",
-      "group": "components"
+      "value": "5",
+      "type": "size"
     },
-    "name": "token-form-control-checked-border-color-default",
+    "name": "token-app-side-nav-toggle-button-border-radius",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "border-color",
-      "state": "default"
+      "category": "app-side-nav",
+      "type": "toggle-button",
+      "item": "border",
+      "subitem": "radius"
     },
     "path": [
-      "form",
-      "control",
-      "checked",
-      "border-color",
-      "default"
+      "app-side-nav",
+      "toggle-button",
+      "border",
+      "radius"
     ]
   },
   {
-    "value": "#0046d1",
-    "type": "color",
-    "group": "components",
+    "value": "4px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.blue-400.value}",
-      "type": "color",
-      "group": "components"
+      "value": "4",
+      "type": "size"
     },
-    "name": "token-form-control-checked-border-color-hover",
+    "name": "token-app-side-nav-header-home-link-padding",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "checked",
-      "subitem": "border-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "home-link",
+      "subitem": "padding"
     },
     "path": [
-      "form",
-      "control",
-      "checked",
-      "border-color",
-      "hover"
+      "app-side-nav",
+      "header",
+      "home-link",
+      "padding"
     ]
   },
   {
-    "value": "#c00005",
-    "type": "color",
-    "group": "components",
+    "value": "48px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.red-300.value}",
-      "type": "color",
-      "group": "components"
+      "value": "48",
+      "type": "size"
     },
-    "name": "token-form-control-invalid-border-color-default",
+    "name": "token-app-side-nav-header-home-link-logo-size",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "invalid",
-      "subitem": "border-color",
-      "state": "default"
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "home-link",
+      "subitem": "logo-size"
     },
     "path": [
-      "form",
-      "control",
-      "invalid",
-      "border-color",
-      "default"
+      "app-side-nav",
+      "header",
+      "home-link",
+      "logo-size"
     ]
   },
   {
-    "value": "#940004",
-    "type": "color",
-    "group": "components",
+    "value": "32px",
+    "type": "size",
     "original": {
-      "value": "{color.palette.red-400.value}",
-      "type": "color",
-      "group": "components"
+      "value": "32",
+      "type": "size"
     },
-    "name": "token-form-control-invalid-border-color-hover",
+    "name": "token-app-side-nav-header-home-link-logo-size-minimized",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "invalid",
-      "subitem": "border-color",
-      "state": "hover"
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "home-link",
+      "subitem": "logo-size-minimized"
     },
     "path": [
-      "form",
-      "control",
-      "invalid",
-      "border-color",
-      "hover"
+      "app-side-nav",
+      "header",
+      "home-link",
+      "logo-size-minimized"
     ]
   },
   {
-    "value": "#3b3d45",
-    "type": "color",
-    "group": "components",
+    "value": "8px",
+    "type": "size",
     "original": {
-      "value": "{color.foreground.primary.value}",
-      "type": "color",
-      "group": "components"
+      "value": "8",
+      "type": "size"
     },
-    "name": "token-form-control-readonly-foreground-color",
+    "name": "token-app-side-nav-header-actions-spacing",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "readonly",
-      "subitem": "foreground-color"
+      "category": "app-side-nav",
+      "type": "header",
+      "item": "actions",
+      "subitem": "spacing"
     },
     "path": [
-      "form",
-      "control",
-      "readonly",
-      "foreground-color"
+      "app-side-nav",
+      "header",
+      "actions",
+      "spacing"
     ]
   },
   {
-    "value": "#f1f2f3",
-    "type": "color",
-    "group": "components",
+    "value": "24px",
+    "type": "size",
     "original": {
-      "value": "{color.surface.strong.value}",
-      "type": "color",
-      "group": "components"
+      "value": "24",
+      "type": "size"
     },
-    "name": "token-form-control-readonly-surface-color",
+    "name": "token-app-side-nav-body-list-margin-vertical",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "readonly",
-      "subitem": "surface-color"
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list",
+      "subitem": "margin-vertical"
     },
     "path": [
-      "form",
-      "control",
-      "readonly",
-      "surface-color"
+      "app-side-nav",
+      "body",
+      "list",
+      "margin-vertical"
     ]
   },
   {
-    "value": "#656a761a",
-    "type": "color",
-    "group": "components",
+    "value": "36px",
+    "type": "size",
     "original": {
-      "value": "{color.border.faint.value}",
-      "type": "color",
-      "group": "components"
+      "value": "36",
+      "type": "size"
     },
-    "name": "token-form-control-readonly-border-color",
+    "name": "token-app-side-nav-body-list-item-height",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "readonly",
-      "subitem": "border-color"
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "height"
     },
     "path": [
-      "form",
-      "control",
-      "readonly",
-      "border-color"
+      "app-side-nav",
+      "body",
+      "list-item",
+      "height"
     ]
   },
   {
-    "value": "#8c909c",
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-padding-horizontal",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "padding",
+      "state": "horizontal"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "4px",
+    "type": "size",
+    "original": {
+      "value": "4",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-padding-vertical",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "padding",
+      "state": "vertical"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "2px",
+    "type": "size",
+    "original": {
+      "value": "2",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-spacing-vertical",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "spacing-vertical"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "spacing-vertical"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-content-spacing-horizontal",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "content-spacing-horizontal"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "content-spacing-horizontal"
+    ]
+  },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-app-side-nav-body-list-item-border-radius",
+    "attributes": {
+      "category": "app-side-nav",
+      "type": "body",
+      "item": "list-item",
+      "subitem": "border-radius"
+    },
+    "path": [
+      "app-side-nav",
+      "body",
+      "list-item",
+      "border-radius"
+    ]
+  },
+  {
+    "value": "var(--token-color-foreground-primary)",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.foreground.disabled.value}",
+      "value": "var(--token-color-foreground-primary)",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-disabled-foreground-color",
+    "name": "token-app-side-nav-color-foreground-primary",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "disabled",
-      "subitem": "foreground-color"
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "primary"
     },
     "path": [
-      "form",
-      "control",
-      "disabled",
-      "foreground-color"
+      "app-side-nav",
+      "color",
+      "foreground",
+      "primary"
     ]
   },
   {
-    "value": "#fafafa",
+    "value": "var(--token-color-foreground-primary)",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.surface.interactive-disabled.value}",
+      "value": "var(--token-color-foreground-primary)",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-disabled-surface-color",
+    "name": "token-app-side-nav-color-foreground-strong",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "disabled",
-      "subitem": "surface-color"
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "strong"
     },
     "path": [
-      "form",
-      "control",
-      "disabled",
-      "surface-color"
+      "app-side-nav",
+      "color",
+      "foreground",
+      "strong"
     ]
   },
   {
-    "value": "#656a7633",
+    "value": "var(--token-color-foreground-faint)",
     "type": "color",
     "group": "components",
     "original": {
-      "value": "{color.border.primary.value}",
+      "value": "var(--token-color-foreground-faint)",
       "type": "color",
       "group": "components"
     },
-    "name": "token-form-control-disabled-border-color",
+    "name": "token-app-side-nav-color-foreground-faint",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "disabled",
-      "subitem": "border-color"
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "faint"
     },
     "path": [
-      "form",
-      "control",
-      "disabled",
-      "border-color"
+      "app-side-nav",
+      "color",
+      "foreground",
+      "faint"
     ]
   },
   {
-    "value": "7px",
-    "type": "size",
-    "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
+    "value": "var(--token-color-surface-faint)",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "7",
-      "type": "size",
-      "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
+      "value": "var(--token-color-surface-faint)",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-control-padding",
+    "name": "token-app-side-nav-color-surface-primary",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "padding"
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "surface",
+      "subitem": "primary"
     },
     "path": [
-      "form",
-      "control",
-      "padding"
+      "app-side-nav",
+      "color",
+      "surface",
+      "primary"
     ]
   },
   {
-    "value": "5px",
-    "type": "size",
+    "value": "var(--token-color-surface-interactive-hover)",
+    "type": "color",
+    "group": "semantic",
     "original": {
-      "value": "5",
-      "type": "size"
+      "value": "var(--token-color-surface-interactive-hover)",
+      "type": "color",
+      "group": "semantic"
     },
-    "name": "token-form-control-border-radius",
+    "name": "token-app-side-nav-color-surface-interactive-hover",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "border",
-      "subitem": "radius"
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "surface",
+      "subitem": "interactive-hover"
     },
     "path": [
-      "form",
-      "control",
-      "border",
-      "radius"
+      "app-side-nav",
+      "color",
+      "surface",
+      "interactive-hover"
     ]
   },
   {
-    "value": "1px",
-    "type": "size",
+    "value": "var(--token-color-palette-neutral-300)",
+    "type": "color",
+    "group": "semantic",
     "original": {
-      "value": "1",
-      "type": "size"
+      "value": "var(--token-color-palette-neutral-300)",
+      "type": "color",
+      "group": "semantic"
     },
-    "name": "token-form-control-border-width",
+    "name": "token-app-side-nav-color-surface-interactive-active",
     "attributes": {
-      "category": "form",
-      "type": "control",
-      "item": "border",
-      "subitem": "width"
+      "category": "app-side-nav",
+      "type": "color",
+      "item": "surface",
+      "subitem": "interactive-active"
     },
     "path": [
-      "form",
-      "control",
-      "border",
-      "width"
+      "app-side-nav",
+      "color",
+      "surface",
+      "interactive-active"
     ]
   },
   {
@@ -4931,564 +4984,504 @@
     ]
   },
   {
-    "value": "16px",
-    "type": "size",
-    "original": {
-      "value": "16",
-      "type": "size"
-    },
-    "name": "token-form-radio-size",
-    "attributes": {
-      "category": "form",
-      "type": "radio",
-      "item": "size"
-    },
-    "path": [
-      "form",
-      "radio",
-      "size"
-    ]
-  },
-  {
-    "value": "1px",
-    "type": "size",
-    "original": {
-      "value": "1",
-      "type": "size"
-    },
-    "name": "token-form-radio-border-width",
-    "attributes": {
-      "category": "form",
-      "type": "radio",
-      "item": "border",
-      "subitem": "width"
-    },
-    "path": [
-      "form",
-      "radio",
-      "border",
-      "width"
-    ]
-  },
-  {
-    "value": "12px",
-    "type": "size",
-    "original": {
-      "value": "12",
-      "type": "size"
-    },
-    "name": "token-form-radio-background-image-size",
-    "attributes": {
-      "category": "form",
-      "type": "radio",
-      "item": "background-image",
-      "subitem": "size"
-    },
-    "path": [
-      "form",
-      "radio",
-      "background-image",
-      "size"
-    ]
-  },
-  {
-    "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'dot' color is hardcoded here!",
-    "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'dot' color is hardcoded here!"
-    },
-    "name": "token-form-radio-background-image-data-url",
-    "attributes": {
-      "category": "form",
-      "type": "radio",
-      "item": "background-image",
-      "subitem": "data-url"
-    },
-    "path": [
-      "form",
-      "radio",
-      "background-image",
-      "data-url"
-    ]
-  },
-  {
-    "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'dot' color is hardcoded here!",
-    "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'dot' color is hardcoded here!"
-    },
-    "name": "token-form-radio-background-image-data-url-disabled",
-    "attributes": {
-      "category": "form",
-      "type": "radio",
-      "item": "background-image",
-      "subitem": "data-url-disabled"
-    },
-    "path": [
-      "form",
-      "radio",
-      "background-image",
-      "data-url-disabled"
-    ]
-  },
-  {
-    "value": "16px",
-    "type": "size",
-    "original": {
-      "value": "16",
-      "type": "size"
-    },
-    "name": "token-form-radiocard-group-gap",
-    "attributes": {
-      "category": "form",
-      "type": "radiocard-group",
-      "item": "gap"
-    },
-    "path": [
-      "form",
-      "radiocard-group",
-      "gap"
-    ]
-  },
-  {
-    "value": "1px",
-    "type": "size",
+    "value": "#0c0c0e",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "1",
-      "type": "size"
+      "value": "{color.foreground.strong.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-radiocard-border-width",
+    "name": "token-form-control-base-foreground-value-color",
     "attributes": {
       "category": "form",
-      "type": "radiocard",
-      "item": "border",
-      "subitem": "width"
+      "type": "control",
+      "item": "base",
+      "subitem": "foreground",
+      "state": "value-color"
     },
     "path": [
       "form",
-      "radiocard",
-      "border",
-      "width"
+      "control",
+      "base",
+      "foreground",
+      "value-color"
     ]
   },
   {
-    "value": "6px",
-    "type": "size",
+    "value": "#656a76",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "6",
-      "type": "size"
+      "value": "{color.foreground.faint.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-radiocard-border-radius",
+    "name": "token-form-control-base-foreground-placeholder-color",
     "attributes": {
       "category": "form",
-      "type": "radiocard",
-      "item": "border",
-      "subitem": "radius"
+      "type": "control",
+      "item": "base",
+      "subitem": "foreground",
+      "state": "placeholder-color"
     },
     "path": [
       "form",
-      "radiocard",
-      "border",
-      "radius"
+      "control",
+      "base",
+      "foreground",
+      "placeholder-color"
     ]
   },
   {
-    "value": "24px",
-    "type": "size",
+    "value": "#ffffff",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "24",
-      "type": "size"
+      "value": "{color.surface.interactive.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-radiocard-content-padding",
+    "name": "token-form-control-base-surface-color-default",
     "attributes": {
       "category": "form",
-      "type": "radiocard",
-      "item": "content-padding"
+      "type": "control",
+      "item": "base",
+      "subitem": "surface-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "radiocard",
-      "content-padding"
+      "control",
+      "base",
+      "surface-color",
+      "default"
     ]
   },
   {
-    "value": "8px",
-    "type": "size",
+    "value": "#f1f2f3",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "8",
-      "type": "size"
+      "value": "{color.surface.interactive-hover.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-radiocard-control-padding",
+    "name": "token-form-control-base-surface-color-hover",
     "attributes": {
       "category": "form",
-      "type": "radiocard",
-      "item": "control-padding"
+      "type": "control",
+      "item": "base",
+      "subitem": "surface-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "radiocard",
-      "control-padding"
+      "control",
+      "base",
+      "surface-color",
+      "hover"
     ]
   },
   {
-    "value": "0.2s",
-    "type": "time",
-    "unit": "s",
+    "value": "#8c909c",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "0.2",
-      "type": "time",
-      "unit": "s"
+      "value": "{color.palette.neutral-400.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-radiocard-transition-duration",
+    "name": "token-form-control-base-border-color-default",
     "attributes": {
       "category": "form",
-      "type": "radiocard",
-      "item": "transition",
-      "subitem": "duration"
+      "type": "control",
+      "item": "base",
+      "subitem": "border-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "radiocard",
-      "transition",
-      "duration"
+      "control",
+      "base",
+      "border-color",
+      "default"
     ]
   },
   {
-    "value": "16px",
-    "type": "size",
+    "value": "#656a76",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "16",
-      "type": "size"
+      "value": "{color.palette.neutral-500.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-select-background-image-size",
+    "name": "token-form-control-base-border-color-hover",
     "attributes": {
       "category": "form",
-      "type": "select",
-      "item": "background-image",
-      "subitem": "size"
+      "type": "control",
+      "item": "base",
+      "subitem": "border-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "select",
-      "background-image",
-      "size"
+      "control",
+      "base",
+      "border-color",
+      "hover"
     ]
   },
   {
-    "value": "7px",
-    "type": "size",
+    "value": "#ffffff",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "{form.control.padding.value}",
-      "type": "size"
+      "value": "{color.foreground.high-contrast.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-select-background-image-position-right-x",
+    "name": "token-form-control-checked-foreground-color",
     "attributes": {
       "category": "form",
-      "type": "select",
-      "item": "background-image",
-      "subitem": "position-right-x"
+      "type": "control",
+      "item": "checked",
+      "subitem": "foreground-color"
     },
     "path": [
       "form",
-      "select",
-      "background-image",
-      "position-right-x"
+      "control",
+      "checked",
+      "foreground-color"
     ]
   },
   {
-    "value": "9px",
-    "type": "size",
+    "value": "#1060ff",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "9",
-      "type": "size"
+      "value": "{color.palette.blue-200.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-select-background-image-position-top-y",
+    "name": "token-form-control-checked-surface-color-default",
     "attributes": {
       "category": "form",
-      "type": "select",
-      "item": "background-image",
-      "subitem": "position-top-y"
+      "type": "control",
+      "item": "checked",
+      "subitem": "surface-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "select",
-      "background-image",
-      "position-top-y"
+      "control",
+      "checked",
+      "surface-color",
+      "default"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
-    "comment": "notice: the 'caret' color is hardcoded here!",
+    "value": "#0c56e9",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
-      "comment": "notice: the 'caret' color is hardcoded here!"
+      "value": "{color.palette.blue-300.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-select-background-image-data-url",
+    "name": "token-form-control-checked-surface-color-hover",
     "attributes": {
       "category": "form",
-      "type": "select",
-      "item": "background-image",
-      "subitem": "data-url"
+      "type": "control",
+      "item": "checked",
+      "subitem": "surface-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "select",
-      "background-image",
-      "data-url"
+      "control",
+      "checked",
+      "surface-color",
+      "hover"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
-    "comment": "notice: the 'caret' color is hardcoded here!",
+    "value": "#0c56e9",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
-      "comment": "notice: the 'caret' color is hardcoded here!"
+      "value": "{color.palette.blue-300.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-select-background-image-data-url-disabled",
+    "name": "token-form-control-checked-border-color-default",
     "attributes": {
       "category": "form",
-      "type": "select",
-      "item": "background-image",
-      "subitem": "data-url-disabled"
+      "type": "control",
+      "item": "checked",
+      "subitem": "border-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "select",
-      "background-image",
-      "data-url-disabled"
+      "control",
+      "checked",
+      "border-color",
+      "default"
     ]
   },
   {
-    "value": "16px",
-    "type": "size",
+    "value": "#0046d1",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "16",
-      "type": "size"
+      "value": "{color.palette.blue-400.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-size",
+    "name": "token-form-control-checked-border-color-hover",
     "attributes": {
       "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "size"
+      "type": "control",
+      "item": "checked",
+      "subitem": "border-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "size"
+      "control",
+      "checked",
+      "border-color",
+      "hover"
     ]
   },
   {
-    "value": "7px",
-    "type": "size",
+    "value": "#c00005",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "{form.control.padding.value}",
-      "type": "size"
+      "value": "{color.palette.red-300.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-position-x",
+    "name": "token-form-control-invalid-border-color-default",
     "attributes": {
-      "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "position-x"
+      "category": "form",
+      "type": "control",
+      "item": "invalid",
+      "subitem": "border-color",
+      "state": "default"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "position-x"
+      "control",
+      "invalid",
+      "border-color",
+      "default"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
-    "comment": "notice: the icon color is hardcoded here!",
+    "value": "#940004",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
-      "comment": "notice: the icon color is hardcoded here!"
+      "value": "{color.palette.red-400.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-data-url-date",
+    "name": "token-form-control-invalid-border-color-hover",
     "attributes": {
       "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "data-url-date"
+      "type": "control",
+      "item": "invalid",
+      "subitem": "border-color",
+      "state": "hover"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "data-url-date"
+      "control",
+      "invalid",
+      "border-color",
+      "hover"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-    "comment": "notice: the icon color is hardcoded here!",
+    "value": "#3b3d45",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-      "comment": "notice: the icon color is hardcoded here!"
+      "value": "{color.foreground.primary.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-data-url-time",
+    "name": "token-form-control-readonly-foreground-color",
     "attributes": {
       "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "data-url-time"
+      "type": "control",
+      "item": "readonly",
+      "subitem": "foreground-color"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "data-url-time"
+      "control",
+      "readonly",
+      "foreground-color"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-    "comment": "notice: the icon color is hardcoded here!",
+    "value": "#f1f2f3",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-      "comment": "notice: the icon color is hardcoded here!"
+      "value": "{color.surface.strong.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-data-url-search",
+    "name": "token-form-control-readonly-surface-color",
     "attributes": {
       "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "data-url-search"
+      "type": "control",
+      "item": "readonly",
+      "subitem": "surface-color"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "data-url-search"
+      "control",
+      "readonly",
+      "surface-color"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
-    "comment": "notice: the icon color is hardcoded here!",
+    "value": "#656a761a",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
-      "comment": "notice: the icon color is hardcoded here!"
+      "value": "{color.border.faint.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-data-url-search-cancel",
+    "name": "token-form-control-readonly-border-color",
     "attributes": {
       "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "data-url-search-cancel"
+      "type": "control",
+      "item": "readonly",
+      "subitem": "border-color"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "data-url-search-cancel"
+      "control",
+      "readonly",
+      "border-color"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
-    "comment": "notice: the icon color and animation are hardcoded here!",
+    "value": "#8c909c",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
-      "comment": "notice: the icon color and animation are hardcoded here!"
+      "value": "{color.foreground.disabled.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-text-input-background-image-data-url-search-loading",
+    "name": "token-form-control-disabled-foreground-color",
     "attributes": {
       "category": "form",
-      "type": "text-input",
-      "item": "background-image",
-      "subitem": "data-url-search-loading"
+      "type": "control",
+      "item": "disabled",
+      "subitem": "foreground-color"
     },
     "path": [
       "form",
-      "text-input",
-      "background-image",
-      "data-url-search-loading"
+      "control",
+      "disabled",
+      "foreground-color"
     ]
   },
   {
-    "value": "32px",
-    "type": "size",
+    "value": "#fafafa",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "32",
-      "type": "size"
+      "value": "{color.surface.interactive-disabled.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-toggle-width",
+    "name": "token-form-control-disabled-surface-color",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "width"
+      "type": "control",
+      "item": "disabled",
+      "subitem": "surface-color"
     },
     "path": [
       "form",
-      "toggle",
-      "width"
+      "control",
+      "disabled",
+      "surface-color"
     ]
   },
   {
-    "value": "16px",
-    "type": "size",
+    "value": "#656a7633",
+    "type": "color",
+    "group": "components",
     "original": {
-      "value": "16",
-      "type": "size"
+      "value": "{color.border.primary.value}",
+      "type": "color",
+      "group": "components"
     },
-    "name": "token-form-toggle-height",
+    "name": "token-form-control-disabled-border-color",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "height"
+      "type": "control",
+      "item": "disabled",
+      "subitem": "border-color"
     },
     "path": [
       "form",
-      "toggle",
-      "height"
+      "control",
+      "disabled",
+      "border-color"
     ]
   },
   {
-    "value": "#f1f2f3",
-    "type": "color",
-    "group": "components",
-    "comment": "the toggle has a different base surface color, compared to the other controls",
+    "value": "7px",
+    "type": "size",
+    "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
     "original": {
-      "value": "{color.surface.strong.value}",
-      "type": "color",
-      "group": "components",
-      "comment": "the toggle has a different base surface color, compared to the other controls"
+      "value": "7",
+      "type": "size",
+      "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
     },
-    "name": "token-form-toggle-base-surface-color-default",
+    "name": "token-form-control-padding",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "base",
-      "subitem": "surface-color",
-      "state": "default"
+      "type": "control",
+      "item": "padding"
     },
     "path": [
       "form",
-      "toggle",
-      "base",
-      "surface-color",
-      "default"
+      "control",
+      "padding"
     ]
   },
   {
-    "value": "3px",
+    "value": "5px",
     "type": "size",
     "original": {
-      "value": "3",
+      "value": "5",
       "type": "size"
     },
-    "name": "token-form-toggle-border-radius",
+    "name": "token-form-control-border-radius",
     "attributes": {
       "category": "form",
-      "type": "toggle",
+      "type": "control",
       "item": "border",
       "subitem": "radius"
     },
     "path": [
       "form",
-      "toggle",
+      "control",
       "border",
       "radius"
     ]
@@ -5500,740 +5493,747 @@
       "value": "1",
       "type": "size"
     },
-    "name": "token-form-toggle-border-width",
+    "name": "token-form-control-border-width",
     "attributes": {
       "category": "form",
-      "type": "toggle",
+      "type": "control",
       "item": "border",
       "subitem": "width"
     },
     "path": [
       "form",
-      "toggle",
+      "control",
       "border",
       "width"
     ]
   },
   {
-    "value": "12px",
+    "value": "16px",
     "type": "size",
     "original": {
-      "value": "12",
+      "value": "16",
       "type": "size"
     },
-    "name": "token-form-toggle-background-image-size",
+    "name": "token-form-radio-size",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "background-image",
-      "subitem": "size"
+      "type": "radio",
+      "item": "size"
     },
     "path": [
       "form",
-      "toggle",
-      "background-image",
+      "radio",
       "size"
     ]
   },
   {
-    "value": "2px",
+    "value": "1px",
+    "type": "size",
+    "original": {
+      "value": "1",
+      "type": "size"
+    },
+    "name": "token-form-radio-border-width",
+    "attributes": {
+      "category": "form",
+      "type": "radio",
+      "item": "border",
+      "subitem": "width"
+    },
+    "path": [
+      "form",
+      "radio",
+      "border",
+      "width"
+    ]
+  },
+  {
+    "value": "12px",
     "type": "size",
     "original": {
-      "value": "2",
+      "value": "12",
       "type": "size"
     },
-    "name": "token-form-toggle-background-image-position-x",
+    "name": "token-form-radio-background-image-size",
     "attributes": {
       "category": "form",
-      "type": "toggle",
+      "type": "radio",
       "item": "background-image",
-      "subitem": "position-x"
+      "subitem": "size"
     },
     "path": [
       "form",
-      "toggle",
+      "radio",
       "background-image",
-      "position-x"
+      "size"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'tick' color is hardcoded here!",
+    "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dot' color is hardcoded here!",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'tick' color is hardcoded here!"
+      "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dot' color is hardcoded here!"
     },
-    "name": "token-form-toggle-background-image-data-url",
+    "name": "token-form-radio-background-image-data-url",
     "attributes": {
       "category": "form",
-      "type": "toggle",
+      "type": "radio",
       "item": "background-image",
       "subitem": "data-url"
     },
     "path": [
       "form",
-      "toggle",
+      "radio",
       "background-image",
       "data-url"
     ]
   },
   {
-    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-    "comment": "notice: the 'tick' color is hardcoded here!",
+    "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dot' color is hardcoded here!",
     "original": {
-      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-      "comment": "notice: the 'tick' color is hardcoded here!"
+      "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dot' color is hardcoded here!"
     },
-    "name": "token-form-toggle-background-image-data-url-disabled",
+    "name": "token-form-radio-background-image-data-url-disabled",
     "attributes": {
       "category": "form",
-      "type": "toggle",
+      "type": "radio",
       "item": "background-image",
       "subitem": "data-url-disabled"
     },
     "path": [
       "form",
-      "toggle",
+      "radio",
       "background-image",
       "data-url-disabled"
     ]
   },
   {
-    "value": "0.2s",
-    "type": "time",
-    "unit": "s",
+    "value": "16px",
+    "type": "size",
     "original": {
-      "value": "0.2",
-      "type": "time",
-      "unit": "s"
+      "value": "16",
+      "type": "size"
     },
-    "name": "token-form-toggle-transition-duration",
+    "name": "token-form-radiocard-group-gap",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "transition",
-      "subitem": "duration"
+      "type": "radiocard-group",
+      "item": "gap"
     },
     "path": [
       "form",
-      "toggle",
-      "transition",
-      "duration"
+      "radiocard-group",
+      "gap"
     ]
   },
   {
-    "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)",
+    "value": "1px",
+    "type": "size",
     "original": {
-      "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)"
+      "value": "1",
+      "type": "size"
     },
-    "name": "token-form-toggle-transition-timing-function",
+    "name": "token-form-radiocard-border-width",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "transition",
-      "subitem": "timing-function"
+      "type": "radiocard",
+      "item": "border",
+      "subitem": "width"
     },
     "path": [
       "form",
-      "toggle",
-      "transition",
-      "timing-function"
+      "radiocard",
+      "border",
+      "width"
     ]
   },
   {
-    "value": "16px",
+    "value": "6px",
     "type": "size",
     "original": {
-      "value": "{form.toggle.height.value}",
+      "value": "6",
       "type": "size"
     },
-    "name": "token-form-toggle-thumb-size",
+    "name": "token-form-radiocard-border-radius",
     "attributes": {
       "category": "form",
-      "type": "toggle",
-      "item": "thumb-size"
+      "type": "radiocard",
+      "item": "border",
+      "subitem": "radius"
     },
     "path": [
       "form",
-      "toggle",
-      "thumb-size"
+      "radiocard",
+      "border",
+      "radius"
     ]
   },
   {
-    "value": "60px",
+    "value": "24px",
     "type": "size",
     "original": {
-      "value": "60",
+      "value": "24",
       "type": "size"
     },
-    "name": "token-app-header-height",
+    "name": "token-form-radiocard-content-padding",
     "attributes": {
-      "category": "app-header",
-      "type": "height"
+      "category": "form",
+      "type": "radiocard",
+      "item": "content-padding"
     },
     "path": [
-      "app-header",
-      "height"
+      "form",
+      "radiocard",
+      "content-padding"
     ]
   },
   {
-    "value": "36px",
+    "value": "8px",
     "type": "size",
     "original": {
-      "value": "36",
+      "value": "8",
       "type": "size"
     },
-    "name": "token-app-header-home-link-size",
+    "name": "token-form-radiocard-control-padding",
     "attributes": {
-      "category": "app-header",
-      "type": "home-link",
-      "item": "size"
+      "category": "form",
+      "type": "radiocard",
+      "item": "control-padding"
     },
     "path": [
-      "app-header",
-      "home-link",
-      "size"
+      "form",
+      "radiocard",
+      "control-padding"
     ]
   },
   {
-    "value": "28px",
-    "type": "size",
+    "value": "0.2s",
+    "type": "time",
+    "unit": "s",
     "original": {
-      "value": "28",
-      "type": "size"
+      "value": "0.2",
+      "type": "time",
+      "unit": "s"
     },
-    "name": "token-app-header-logo-size",
+    "name": "token-form-radiocard-transition-duration",
     "attributes": {
-      "category": "app-header",
-      "type": "logo",
-      "item": "size"
+      "category": "form",
+      "type": "radiocard",
+      "item": "transition",
+      "subitem": "duration"
     },
     "path": [
-      "app-header",
-      "logo",
-      "size"
+      "form",
+      "radiocard",
+      "transition",
+      "duration"
     ]
   },
   {
-    "value": "1px",
+    "value": "16px",
     "type": "size",
     "original": {
-      "value": "1",
+      "value": "16",
       "type": "size"
     },
-    "name": "token-app-side-nav-wrapper-border-width",
+    "name": "token-form-select-background-image-size",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "wrapper",
-      "item": "border",
-      "subitem": "width"
+      "category": "form",
+      "type": "select",
+      "item": "background-image",
+      "subitem": "size"
     },
     "path": [
-      "app-side-nav",
-      "wrapper",
-      "border",
-      "width"
+      "form",
+      "select",
+      "background-image",
+      "size"
     ]
   },
   {
-    "value": "var(--token-color-palette-neutral-200)",
-    "type": "color",
-    "group": "components",
+    "value": "7px",
+    "type": "size",
     "original": {
-      "value": "var(--token-color-palette-neutral-200)",
-      "type": "color",
-      "group": "components"
+      "value": "{form.control.padding.value}",
+      "type": "size"
     },
-    "name": "token-app-side-nav-wrapper-border-color",
+    "name": "token-form-select-background-image-position-right-x",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "wrapper",
-      "item": "border",
-      "subitem": "color"
+      "category": "form",
+      "type": "select",
+      "item": "background-image",
+      "subitem": "position-right-x"
     },
     "path": [
-      "app-side-nav",
-      "wrapper",
-      "border",
-      "color"
+      "form",
+      "select",
+      "background-image",
+      "position-right-x"
     ]
   },
   {
-    "value": "16px",
+    "value": "9px",
     "type": "size",
     "original": {
-      "value": "16",
+      "value": "9",
       "type": "size"
     },
-    "name": "token-app-side-nav-wrapper-padding-horizontal",
+    "name": "token-form-select-background-image-position-top-y",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "wrapper",
-      "item": "padding",
-      "subitem": "horizontal"
+      "category": "form",
+      "type": "select",
+      "item": "background-image",
+      "subitem": "position-top-y"
     },
     "path": [
-      "app-side-nav",
-      "wrapper",
-      "padding",
-      "horizontal"
+      "form",
+      "select",
+      "background-image",
+      "position-top-y"
     ]
   },
   {
-    "value": "16px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
+    "comment": "notice: the 'caret' color is hardcoded here!",
     "original": {
-      "value": "16",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
+      "comment": "notice: the 'caret' color is hardcoded here!"
     },
-    "name": "token-app-side-nav-wrapper-padding-vertical",
+    "name": "token-form-select-background-image-data-url",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "wrapper",
-      "item": "padding",
-      "subitem": "vertical"
+      "category": "form",
+      "type": "select",
+      "item": "background-image",
+      "subitem": "data-url"
     },
     "path": [
-      "app-side-nav",
-      "wrapper",
-      "padding",
-      "vertical"
+      "form",
+      "select",
+      "background-image",
+      "data-url"
     ]
   },
   {
-    "value": "8px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
+    "comment": "notice: the 'caret' color is hardcoded here!",
     "original": {
-      "value": "8",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
+      "comment": "notice: the 'caret' color is hardcoded here!"
     },
-    "name": "token-app-side-nav-wrapper-padding-horizontal-minimized",
+    "name": "token-form-select-background-image-data-url-disabled",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "wrapper",
-      "item": "padding",
-      "subitem": "horizontal-minimized"
+      "category": "form",
+      "type": "select",
+      "item": "background-image",
+      "subitem": "data-url-disabled"
     },
     "path": [
-      "app-side-nav",
-      "wrapper",
-      "padding",
-      "horizontal-minimized"
+      "form",
+      "select",
+      "background-image",
+      "data-url-disabled"
     ]
   },
   {
-    "value": "22px",
+    "value": "16px",
     "type": "size",
     "original": {
-      "value": "22",
+      "value": "16",
       "type": "size"
     },
-    "name": "token-app-side-nav-wrapper-padding-vertical-minimized",
+    "name": "token-form-text-input-background-image-size",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "wrapper",
-      "item": "padding",
-      "subitem": "vertical-minimized"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "size"
     },
     "path": [
-      "app-side-nav",
-      "wrapper",
-      "padding",
-      "vertical-minimized"
+      "form",
+      "text-input",
+      "background-image",
+      "size"
     ]
   },
   {
-    "value": "5px",
+    "value": "7px",
     "type": "size",
     "original": {
-      "value": "5",
+      "value": "{form.control.padding.value}",
       "type": "size"
     },
-    "name": "token-app-side-nav-toggle-button-border-radius",
+    "name": "token-form-text-input-background-image-position-x",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "toggle-button",
-      "item": "border",
-      "subitem": "radius"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "position-x"
     },
     "path": [
-      "app-side-nav",
-      "toggle-button",
-      "border",
-      "radius"
+      "form",
+      "text-input",
+      "background-image",
+      "position-x"
     ]
   },
   {
-    "value": "4px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color is hardcoded here!",
     "original": {
-      "value": "4",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color is hardcoded here!"
     },
-    "name": "token-app-side-nav-header-home-link-padding",
+    "name": "token-form-text-input-background-image-data-url-date",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "header",
-      "item": "home-link",
-      "subitem": "padding"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-date"
     },
     "path": [
-      "app-side-nav",
-      "header",
-      "home-link",
-      "padding"
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-date"
     ]
   },
   {
-    "value": "48px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color is hardcoded here!",
     "original": {
-      "value": "48",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color is hardcoded here!"
     },
-    "name": "token-app-side-nav-header-home-link-logo-size",
+    "name": "token-form-text-input-background-image-data-url-time",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "header",
-      "item": "home-link",
-      "subitem": "logo-size"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-time"
     },
     "path": [
-      "app-side-nav",
-      "header",
-      "home-link",
-      "logo-size"
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-time"
     ]
   },
   {
-    "value": "32px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color is hardcoded here!",
     "original": {
-      "value": "32",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color is hardcoded here!"
     },
-    "name": "token-app-side-nav-header-home-link-logo-size-minimized",
+    "name": "token-form-text-input-background-image-data-url-search",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "header",
-      "item": "home-link",
-      "subitem": "logo-size-minimized"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-search"
     },
     "path": [
-      "app-side-nav",
-      "header",
-      "home-link",
-      "logo-size-minimized"
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-search"
     ]
   },
   {
-    "value": "8px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color is hardcoded here!",
     "original": {
-      "value": "8",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color is hardcoded here!"
     },
-    "name": "token-app-side-nav-header-actions-spacing",
+    "name": "token-form-text-input-background-image-data-url-search-cancel",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "header",
-      "item": "actions",
-      "subitem": "spacing"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-search-cancel"
     },
     "path": [
-      "app-side-nav",
-      "header",
-      "actions",
-      "spacing"
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-search-cancel"
     ]
   },
   {
-    "value": "24px",
-    "type": "size",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color and animation are hardcoded here!",
     "original": {
-      "value": "24",
-      "type": "size"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color and animation are hardcoded here!"
     },
-    "name": "token-app-side-nav-body-list-margin-vertical",
+    "name": "token-form-text-input-background-image-data-url-search-loading",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list",
-      "subitem": "margin-vertical"
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-search-loading"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list",
-      "margin-vertical"
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-search-loading"
     ]
   },
   {
-    "value": "36px",
+    "value": "32px",
     "type": "size",
     "original": {
-      "value": "36",
+      "value": "32",
       "type": "size"
     },
-    "name": "token-app-side-nav-body-list-item-height",
+    "name": "token-form-toggle-width",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list-item",
-      "subitem": "height"
+      "category": "form",
+      "type": "toggle",
+      "item": "width"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list-item",
-      "height"
+      "form",
+      "toggle",
+      "width"
     ]
   },
   {
-    "value": "8px",
+    "value": "16px",
     "type": "size",
     "original": {
-      "value": "8",
+      "value": "16",
       "type": "size"
     },
-    "name": "token-app-side-nav-body-list-item-padding-horizontal",
+    "name": "token-form-toggle-height",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list-item",
-      "subitem": "padding",
-      "state": "horizontal"
+      "category": "form",
+      "type": "toggle",
+      "item": "height"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list-item",
-      "padding",
-      "horizontal"
+      "form",
+      "toggle",
+      "height"
     ]
   },
   {
-    "value": "4px",
-    "type": "size",
+    "value": "#f1f2f3",
+    "type": "color",
+    "group": "components",
+    "comment": "the toggle has a different base surface color, compared to the other controls",
     "original": {
-      "value": "4",
-      "type": "size"
+      "value": "{color.surface.strong.value}",
+      "type": "color",
+      "group": "components",
+      "comment": "the toggle has a different base surface color, compared to the other controls"
     },
-    "name": "token-app-side-nav-body-list-item-padding-vertical",
+    "name": "token-form-toggle-base-surface-color-default",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list-item",
-      "subitem": "padding",
-      "state": "vertical"
+      "category": "form",
+      "type": "toggle",
+      "item": "base",
+      "subitem": "surface-color",
+      "state": "default"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list-item",
-      "padding",
-      "vertical"
+      "form",
+      "toggle",
+      "base",
+      "surface-color",
+      "default"
     ]
   },
   {
-    "value": "2px",
+    "value": "3px",
     "type": "size",
     "original": {
-      "value": "2",
+      "value": "3",
       "type": "size"
     },
-    "name": "token-app-side-nav-body-list-item-spacing-vertical",
+    "name": "token-form-toggle-border-radius",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list-item",
-      "subitem": "spacing-vertical"
+      "category": "form",
+      "type": "toggle",
+      "item": "border",
+      "subitem": "radius"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list-item",
-      "spacing-vertical"
+      "form",
+      "toggle",
+      "border",
+      "radius"
     ]
   },
   {
-    "value": "8px",
+    "value": "1px",
     "type": "size",
     "original": {
-      "value": "8",
+      "value": "1",
       "type": "size"
     },
-    "name": "token-app-side-nav-body-list-item-content-spacing-horizontal",
+    "name": "token-form-toggle-border-width",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list-item",
-      "subitem": "content-spacing-horizontal"
+      "category": "form",
+      "type": "toggle",
+      "item": "border",
+      "subitem": "width"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list-item",
-      "content-spacing-horizontal"
+      "form",
+      "toggle",
+      "border",
+      "width"
     ]
   },
   {
-    "value": "5px",
+    "value": "12px",
     "type": "size",
     "original": {
-      "value": "5",
+      "value": "12",
       "type": "size"
     },
-    "name": "token-app-side-nav-body-list-item-border-radius",
+    "name": "token-form-toggle-background-image-size",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "body",
-      "item": "list-item",
-      "subitem": "border-radius"
+      "category": "form",
+      "type": "toggle",
+      "item": "background-image",
+      "subitem": "size"
     },
     "path": [
-      "app-side-nav",
-      "body",
-      "list-item",
-      "border-radius"
+      "form",
+      "toggle",
+      "background-image",
+      "size"
     ]
   },
   {
-    "value": "var(--token-color-foreground-primary)",
-    "type": "color",
-    "group": "components",
+    "value": "2px",
+    "type": "size",
     "original": {
-      "value": "var(--token-color-foreground-primary)",
-      "type": "color",
-      "group": "components"
+      "value": "2",
+      "type": "size"
     },
-    "name": "token-app-side-nav-color-foreground-primary",
+    "name": "token-form-toggle-background-image-position-x",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "color",
-      "item": "foreground",
-      "subitem": "primary"
+      "category": "form",
+      "type": "toggle",
+      "item": "background-image",
+      "subitem": "position-x"
     },
     "path": [
-      "app-side-nav",
-      "color",
-      "foreground",
-      "primary"
+      "form",
+      "toggle",
+      "background-image",
+      "position-x"
     ]
   },
   {
-    "value": "var(--token-color-foreground-primary)",
-    "type": "color",
-    "group": "components",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'tick' color is hardcoded here!",
     "original": {
-      "value": "var(--token-color-foreground-primary)",
-      "type": "color",
-      "group": "components"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'tick' color is hardcoded here!"
     },
-    "name": "token-app-side-nav-color-foreground-strong",
+    "name": "token-form-toggle-background-image-data-url",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "color",
-      "item": "foreground",
-      "subitem": "strong"
+      "category": "form",
+      "type": "toggle",
+      "item": "background-image",
+      "subitem": "data-url"
     },
     "path": [
-      "app-side-nav",
-      "color",
-      "foreground",
-      "strong"
+      "form",
+      "toggle",
+      "background-image",
+      "data-url"
     ]
   },
   {
-    "value": "var(--token-color-foreground-faint)",
-    "type": "color",
-    "group": "components",
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'tick' color is hardcoded here!",
     "original": {
-      "value": "var(--token-color-foreground-faint)",
-      "type": "color",
-      "group": "components"
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'tick' color is hardcoded here!"
     },
-    "name": "token-app-side-nav-color-foreground-faint",
+    "name": "token-form-toggle-background-image-data-url-disabled",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "color",
-      "item": "foreground",
-      "subitem": "faint"
+      "category": "form",
+      "type": "toggle",
+      "item": "background-image",
+      "subitem": "data-url-disabled"
     },
     "path": [
-      "app-side-nav",
-      "color",
-      "foreground",
-      "faint"
+      "form",
+      "toggle",
+      "background-image",
+      "data-url-disabled"
     ]
   },
   {
-    "value": "var(--token-color-surface-faint)",
-    "type": "color",
-    "group": "components",
+    "value": "0.2s",
+    "type": "time",
+    "unit": "s",
     "original": {
-      "value": "var(--token-color-surface-faint)",
-      "type": "color",
-      "group": "components"
+      "value": "0.2",
+      "type": "time",
+      "unit": "s"
     },
-    "name": "token-app-side-nav-color-surface-primary",
+    "name": "token-form-toggle-transition-duration",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "color",
-      "item": "surface",
-      "subitem": "primary"
+      "category": "form",
+      "type": "toggle",
+      "item": "transition",
+      "subitem": "duration"
     },
     "path": [
-      "app-side-nav",
-      "color",
-      "surface",
-      "primary"
+      "form",
+      "toggle",
+      "transition",
+      "duration"
     ]
   },
   {
-    "value": "var(--token-color-surface-interactive-hover)",
-    "type": "color",
-    "group": "semantic",
+    "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)",
     "original": {
-      "value": "var(--token-color-surface-interactive-hover)",
-      "type": "color",
-      "group": "semantic"
+      "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)"
     },
-    "name": "token-app-side-nav-color-surface-interactive-hover",
+    "name": "token-form-toggle-transition-timing-function",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "color",
-      "item": "surface",
-      "subitem": "interactive-hover"
+      "category": "form",
+      "type": "toggle",
+      "item": "transition",
+      "subitem": "timing-function"
     },
     "path": [
-      "app-side-nav",
-      "color",
-      "surface",
-      "interactive-hover"
+      "form",
+      "toggle",
+      "transition",
+      "timing-function"
     ]
   },
   {
-    "value": "var(--token-color-palette-neutral-300)",
-    "type": "color",
-    "group": "semantic",
+    "value": "16px",
+    "type": "size",
     "original": {
-      "value": "var(--token-color-palette-neutral-300)",
-      "type": "color",
-      "group": "semantic"
+      "value": "{form.toggle.height.value}",
+      "type": "size"
     },
-    "name": "token-app-side-nav-color-surface-interactive-active",
+    "name": "token-form-toggle-thumb-size",
     "attributes": {
-      "category": "app-side-nav",
-      "type": "color",
-      "item": "surface",
-      "subitem": "interactive-active"
+      "category": "form",
+      "type": "toggle",
+      "item": "thumb-size"
     },
     "path": [
-      "app-side-nav",
-      "color",
-      "surface",
-      "interactive-active"
+      "form",
+      "toggle",
+      "thumb-size"
     ]
   },
   {
@@ -6814,7 +6814,7 @@
     ]
   },
   {
-    "value": "#fff",
+    "value": "#ffffff",
     "type": "color",
     "group": "components",
     "original": {
diff --git a/packages/tokens/dist/marketing/css/helpers/color.css b/packages/tokens/dist/marketing/css/helpers/color.css
index 36bea37b6a..9dd87a49f3 100644
--- a/packages/tokens/dist/marketing/css/helpers/color.css
+++ b/packages/tokens/dist/marketing/css/helpers/color.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
diff --git a/packages/tokens/dist/marketing/css/helpers/elevation.css b/packages/tokens/dist/marketing/css/helpers/elevation.css
index c95f4ed054..c7a86b7cba 100644
--- a/packages/tokens/dist/marketing/css/helpers/elevation.css
+++ b/packages/tokens/dist/marketing/css/helpers/elevation.css
@@ -1,13 +1,12 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
-.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
-.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
 .hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
 .hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
+.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
+.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
 .hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
 .hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
diff --git a/packages/tokens/dist/marketing/css/helpers/focus-ring.css b/packages/tokens/dist/marketing/css/helpers/focus-ring.css
index e9946a6735..57e7b9dee5 100644
--- a/packages/tokens/dist/marketing/css/helpers/focus-ring.css
+++ b/packages/tokens/dist/marketing/css/helpers/focus-ring.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }
diff --git a/packages/tokens/dist/marketing/css/helpers/typography.css b/packages/tokens/dist/marketing/css/helpers/typography.css
index 76a7605cc4..393b890090 100644
--- a/packages/tokens/dist/marketing/css/helpers/typography.css
+++ b/packages/tokens/dist/marketing/css/helpers/typography.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }
diff --git a/packages/tokens/dist/marketing/css/tokens.css b/packages/tokens/dist/marketing/css/tokens.css
index d4783b52a9..4b00c8a9d4 100644
--- a/packages/tokens/dist/marketing/css/tokens.css
+++ b/packages/tokens/dist/marketing/css/tokens.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
@@ -178,11 +177,11 @@
   --token-color-waypoint-gradient-primary-stop: #62d4dc;
   --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
   --token-color-waypoint-gradient-faint-stop: #e0fcff;
-  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
-  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
   --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
+  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
+  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
   --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -193,6 +192,47 @@
   --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
   --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
+  --token-app-header-height: 60px;
+  --token-app-header-home-link-size: 36px;
+  --token-app-header-logo-size: 28px;
+  --token-app-side-nav-wrapper-border-width: 1px;
+  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
+  --token-app-side-nav-wrapper-padding-horizontal: 16px;
+  --token-app-side-nav-wrapper-padding-vertical: 16px;
+  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
+  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
+  --token-app-side-nav-toggle-button-border-radius: 5px;
+  --token-app-side-nav-header-home-link-padding: 4px;
+  --token-app-side-nav-header-home-link-logo-size: 48px;
+  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
+  --token-app-side-nav-header-actions-spacing: 8px;
+  --token-app-side-nav-body-list-margin-vertical: 24px;
+  --token-app-side-nav-body-list-item-height: 36px;
+  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
+  --token-app-side-nav-body-list-item-padding-vertical: 4px;
+  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
+  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
+  --token-app-side-nav-body-list-item-border-radius: 5px;
+  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
+  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
+  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
+  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
+  --token-form-label-color: #0c0c0e;
+  --token-form-legend-color: #0c0c0e;
+  --token-form-helper-text-color: #656a76;
+  --token-form-indicator-optional-color: #656a76;
+  --token-form-error-color: #c00005;
+  --token-form-error-icon-size: 14px;
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+  --token-form-checkbox-border-width: 1px;
+  --token-form-checkbox-background-image-size: 12px;
+  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -215,20 +255,6 @@
   --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
   --token-form-control-border-radius: 5px;
   --token-form-control-border-width: 1px;
-  --token-form-label-color: #0c0c0e;
-  --token-form-legend-color: #0c0c0e;
-  --token-form-helper-text-color: #656a76;
-  --token-form-indicator-optional-color: #656a76;
-  --token-form-error-color: #c00005;
-  --token-form-error-icon-size: 14px;
-  --token-form-checkbox-size: 16px;
-  --token-form-checkbox-border-radius: 3px;
-  --token-form-checkbox-border-width: 1px;
-  --token-form-checkbox-background-image-size: 12px;
-  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-radio-size: 16px;
   --token-form-radio-border-width: 1px;
   --token-form-radio-background-image-size: 12px;
@@ -264,33 +290,6 @@
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
-  --token-app-header-height: 60px;
-  --token-app-header-home-link-size: 36px;
-  --token-app-header-logo-size: 28px;
-  --token-app-side-nav-wrapper-border-width: 1px;
-  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
-  --token-app-side-nav-wrapper-padding-horizontal: 16px;
-  --token-app-side-nav-wrapper-padding-vertical: 16px;
-  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
-  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
-  --token-app-side-nav-toggle-button-border-radius: 5px;
-  --token-app-side-nav-header-home-link-padding: 4px;
-  --token-app-side-nav-header-home-link-logo-size: 48px;
-  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
-  --token-app-side-nav-header-actions-spacing: 8px;
-  --token-app-side-nav-body-list-margin-vertical: 24px;
-  --token-app-side-nav-body-list-item-height: 36px;
-  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
-  --token-app-side-nav-body-list-item-padding-vertical: 4px;
-  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
-  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
-  --token-app-side-nav-body-list-item-border-radius: 5px;
-  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
-  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
-  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
-  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
-  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
-  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
   --token-pagination-nav-control-height: 36px;
   --token-pagination-nav-control-padding-horizontal: 12px;
   --token-pagination-nav-control-focus-inset: 4px;
@@ -318,7 +317,7 @@
   --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
   --token-side-nav-body-list-item-border-radius: 5px;
   --token-side-nav-color-foreground-primary: #dedfe3;
-  --token-side-nav-color-foreground-strong: #fff;
+  --token-side-nav-color-foreground-strong: #ffffff;
   --token-side-nav-color-foreground-faint: #8c909c;
   --token-side-nav-color-surface-primary: #0c0c0e;
   --token-side-nav-color-surface-interactive-hover: #3b3d45;
diff --git a/packages/tokens/dist/marketing/tokens.json b/packages/tokens/dist/marketing/tokens.json
index ae69ffa3ad..a0dc4bccf7 100644
--- a/packages/tokens/dist/marketing/tokens.json
+++ b/packages/tokens/dist/marketing/tokens.json
@@ -4310,107 +4310,107 @@
     }
   },
   "elevation": {
-    "high": {
+    "inset": {
       "box-shadow": {
-        "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
+        "value": "inset 0px 1px 2px 1px #656a761a",
         "filePath": "src/global/elevation/elevation.json",
         "isSource": true,
         "original": {
-          "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
+          "value": "{elevation.inset.box-shadow-01.value}"
         },
-        "name": "token-elevation-high-box-shadow",
+        "name": "token-elevation-inset-box-shadow",
         "attributes": {
           "category": "elevation",
-          "type": "high",
+          "type": "inset",
           "item": "box-shadow"
         },
         "path": [
           "elevation",
-          "high",
+          "inset",
           "box-shadow"
         ]
       }
     },
-    "higher": {
+    "low": {
       "box-shadow": {
-        "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
+        "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
         "filePath": "src/global/elevation/elevation.json",
         "isSource": true,
         "original": {
-          "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
+          "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
         },
-        "name": "token-elevation-higher-box-shadow",
+        "name": "token-elevation-low-box-shadow",
         "attributes": {
           "category": "elevation",
-          "type": "higher",
+          "type": "low",
           "item": "box-shadow"
         },
         "path": [
           "elevation",
-          "higher",
+          "low",
           "box-shadow"
         ]
       }
     },
-    "inset": {
+    "mid": {
       "box-shadow": {
-        "value": "inset 0px 1px 2px 1px #656a761a",
+        "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
         "filePath": "src/global/elevation/elevation.json",
         "isSource": true,
         "original": {
-          "value": "{elevation.inset.box-shadow-01.value}"
+          "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
         },
-        "name": "token-elevation-inset-box-shadow",
+        "name": "token-elevation-mid-box-shadow",
         "attributes": {
           "category": "elevation",
-          "type": "inset",
+          "type": "mid",
           "item": "box-shadow"
         },
         "path": [
           "elevation",
-          "inset",
+          "mid",
           "box-shadow"
         ]
       }
     },
-    "low": {
+    "high": {
       "box-shadow": {
-        "value": "0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d",
+        "value": "0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633",
         "filePath": "src/global/elevation/elevation.json",
         "isSource": true,
         "original": {
-          "value": "{elevation.low.box-shadow-01.value}, {elevation.low.box-shadow-02.value}"
+          "value": "{elevation.high.box-shadow-01.value}, {elevation.high.box-shadow-02.value}"
         },
-        "name": "token-elevation-low-box-shadow",
+        "name": "token-elevation-high-box-shadow",
         "attributes": {
           "category": "elevation",
-          "type": "low",
+          "type": "high",
           "item": "box-shadow"
         },
         "path": [
           "elevation",
-          "low",
+          "high",
           "box-shadow"
         ]
       }
     },
-    "mid": {
+    "higher": {
       "box-shadow": {
-        "value": "0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633",
+        "value": "0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640",
         "filePath": "src/global/elevation/elevation.json",
         "isSource": true,
         "original": {
-          "value": "{elevation.mid.box-shadow-01.value}, {elevation.mid.box-shadow-02.value}"
+          "value": "{elevation.higher.box-shadow-01.value}, {elevation.higher.box-shadow-02.value}"
         },
-        "name": "token-elevation-mid-box-shadow",
+        "name": "token-elevation-higher-box-shadow",
         "attributes": {
           "category": "elevation",
-          "type": "mid",
+          "type": "higher",
           "item": "box-shadow"
         },
         "path": [
           "elevation",
-          "mid",
+          "higher",
           "box-shadow"
         ]
       }
@@ -4630,601 +4630,676 @@
       }
     }
   },
-  "form": {
-    "control": {
-      "base": {
-        "foreground": {
-          "value-color": {
-            "value": "#0c0c0e",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.foreground.strong.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-base-foreground-value-color",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "base",
-              "subitem": "foreground",
-              "state": "value-color"
-            },
-            "path": [
-              "form",
-              "control",
-              "base",
-              "foreground",
-              "value-color"
-            ]
+  "app-header": {
+    "height": {
+      "value": "60px",
+      "type": "size",
+      "filePath": "src/products/shared/app-header.json",
+      "isSource": true,
+      "original": {
+        "value": "60",
+        "type": "size"
+      },
+      "name": "token-app-header-height",
+      "attributes": {
+        "category": "app-header",
+        "type": "height"
+      },
+      "path": [
+        "app-header",
+        "height"
+      ]
+    },
+    "home-link": {
+      "size": {
+        "value": "36px",
+        "type": "size",
+        "filePath": "src/products/shared/app-header.json",
+        "isSource": true,
+        "original": {
+          "value": "36",
+          "type": "size"
+        },
+        "name": "token-app-header-home-link-size",
+        "attributes": {
+          "category": "app-header",
+          "type": "home-link",
+          "item": "size"
+        },
+        "path": [
+          "app-header",
+          "home-link",
+          "size"
+        ]
+      }
+    },
+    "logo": {
+      "size": {
+        "value": "28px",
+        "type": "size",
+        "filePath": "src/products/shared/app-header.json",
+        "isSource": true,
+        "original": {
+          "value": "28",
+          "type": "size"
+        },
+        "name": "token-app-header-logo-size",
+        "attributes": {
+          "category": "app-header",
+          "type": "logo",
+          "item": "size"
+        },
+        "path": [
+          "app-header",
+          "logo",
+          "size"
+        ]
+      }
+    }
+  },
+  "app-side-nav": {
+    "wrapper": {
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "1",
+            "type": "size"
           },
-          "placeholder-color": {
-            "value": "#656a76",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.foreground.faint.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-base-foreground-placeholder-color",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "base",
-              "subitem": "foreground",
-              "state": "placeholder-color"
-            },
-            "path": [
-              "form",
-              "control",
-              "base",
-              "foreground",
-              "placeholder-color"
-            ]
-          }
+          "name": "token-app-side-nav-wrapper-border-width",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "wrapper",
+            "item": "border",
+            "subitem": "width"
+          },
+          "path": [
+            "app-side-nav",
+            "wrapper",
+            "border",
+            "width"
+          ]
         },
-        "surface-color": {
-          "default": {
-            "value": "#ffffff",
+        "color": {
+          "value": "var(--token-color-palette-neutral-200)",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--token-color-palette-neutral-200)",
             "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.surface.interactive.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-base-surface-color-default",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "base",
-              "subitem": "surface-color",
-              "state": "default"
-            },
-            "path": [
-              "form",
-              "control",
-              "base",
-              "surface-color",
-              "default"
-            ]
+            "group": "components"
           },
-          "hover": {
-            "value": "#f1f2f3",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.surface.interactive-hover.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-base-surface-color-hover",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "base",
-              "subitem": "surface-color",
-              "state": "hover"
-            },
-            "path": [
-              "form",
-              "control",
-              "base",
-              "surface-color",
-              "hover"
-            ]
-          }
-        },
-        "border-color": {
-          "default": {
-            "value": "#8c909c",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.palette.neutral-400.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-base-border-color-default",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "base",
-              "subitem": "border-color",
-              "state": "default"
-            },
-            "path": [
-              "form",
-              "control",
-              "base",
-              "border-color",
-              "default"
-            ]
+          "name": "token-app-side-nav-wrapper-border-color",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "wrapper",
+            "item": "border",
+            "subitem": "color"
           },
-          "hover": {
-            "value": "#656a76",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.palette.neutral-500.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-base-border-color-hover",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "base",
-              "subitem": "border-color",
-              "state": "hover"
-            },
-            "path": [
-              "form",
-              "control",
-              "base",
-              "border-color",
-              "hover"
-            ]
-          }
+          "path": [
+            "app-side-nav",
+            "wrapper",
+            "border",
+            "color"
+          ]
         }
       },
-      "checked": {
-        "foreground-color": {
-          "value": "#ffffff",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+      "padding": {
+        "horizontal": {
+          "value": "16px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.foreground.high-contrast.value}",
-            "type": "color",
-            "group": "components"
+            "value": "16",
+            "type": "size"
           },
-          "name": "token-form-control-checked-foreground-color",
+          "name": "token-app-side-nav-wrapper-padding-horizontal",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "checked",
-            "subitem": "foreground-color"
+            "category": "app-side-nav",
+            "type": "wrapper",
+            "item": "padding",
+            "subitem": "horizontal"
           },
           "path": [
-            "form",
-            "control",
-            "checked",
-            "foreground-color"
+            "app-side-nav",
+            "wrapper",
+            "padding",
+            "horizontal"
           ]
         },
-        "surface-color": {
-          "default": {
-            "value": "#1060ff",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.palette.blue-200.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-checked-surface-color-default",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "checked",
-              "subitem": "surface-color",
-              "state": "default"
-            },
-            "path": [
-              "form",
-              "control",
-              "checked",
-              "surface-color",
-              "default"
-            ]
+        "vertical": {
+          "value": "16px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "16",
+            "type": "size"
           },
-          "hover": {
-            "value": "#0c56e9",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.palette.blue-300.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-checked-surface-color-hover",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "checked",
-              "subitem": "surface-color",
-              "state": "hover"
-            },
-            "path": [
-              "form",
-              "control",
-              "checked",
-              "surface-color",
-              "hover"
-            ]
-          }
+          "name": "token-app-side-nav-wrapper-padding-vertical",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "wrapper",
+            "item": "padding",
+            "subitem": "vertical"
+          },
+          "path": [
+            "app-side-nav",
+            "wrapper",
+            "padding",
+            "vertical"
+          ]
         },
-        "border-color": {
-          "default": {
-            "value": "#0c56e9",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.palette.blue-300.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-checked-border-color-default",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "checked",
-              "subitem": "border-color",
-              "state": "default"
-            },
-            "path": [
-              "form",
-              "control",
-              "checked",
-              "border-color",
-              "default"
-            ]
+        "horizontal-minimized": {
+          "value": "8px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "8",
+            "type": "size"
           },
-          "hover": {
-            "value": "#0046d1",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.palette.blue-400.value}",
-              "type": "color",
-              "group": "components"
-            },
-            "name": "token-form-control-checked-border-color-hover",
-            "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "checked",
-              "subitem": "border-color",
-              "state": "hover"
-            },
-            "path": [
-              "form",
-              "control",
-              "checked",
-              "border-color",
-              "hover"
-            ]
-          }
+          "name": "token-app-side-nav-wrapper-padding-horizontal-minimized",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "wrapper",
+            "item": "padding",
+            "subitem": "horizontal-minimized"
+          },
+          "path": [
+            "app-side-nav",
+            "wrapper",
+            "padding",
+            "horizontal-minimized"
+          ]
+        },
+        "vertical-minimized": {
+          "value": "22px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "22",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-wrapper-padding-vertical-minimized",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "wrapper",
+            "item": "padding",
+            "subitem": "vertical-minimized"
+          },
+          "path": [
+            "app-side-nav",
+            "wrapper",
+            "padding",
+            "vertical-minimized"
+          ]
+        }
+      }
+    },
+    "toggle-button": {
+      "border": {
+        "radius": {
+          "value": "5px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "5",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-toggle-button-border-radius",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "toggle-button",
+            "item": "border",
+            "subitem": "radius"
+          },
+          "path": [
+            "app-side-nav",
+            "toggle-button",
+            "border",
+            "radius"
+          ]
+        }
+      }
+    },
+    "header": {
+      "home-link": {
+        "padding": {
+          "value": "4px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "4",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-header-home-link-padding",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "header",
+            "item": "home-link",
+            "subitem": "padding"
+          },
+          "path": [
+            "app-side-nav",
+            "header",
+            "home-link",
+            "padding"
+          ]
+        },
+        "logo-size": {
+          "value": "48px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "48",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-header-home-link-logo-size",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "header",
+            "item": "home-link",
+            "subitem": "logo-size"
+          },
+          "path": [
+            "app-side-nav",
+            "header",
+            "home-link",
+            "logo-size"
+          ]
+        },
+        "logo-size-minimized": {
+          "value": "32px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "32",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-header-home-link-logo-size-minimized",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "header",
+            "item": "home-link",
+            "subitem": "logo-size-minimized"
+          },
+          "path": [
+            "app-side-nav",
+            "header",
+            "home-link",
+            "logo-size-minimized"
+          ]
         }
       },
-      "invalid": {
-        "border-color": {
-          "default": {
-            "value": "#c00005",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
+      "actions": {
+        "spacing": {
+          "value": "8px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "8",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-header-actions-spacing",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "header",
+            "item": "actions",
+            "subitem": "spacing"
+          },
+          "path": [
+            "app-side-nav",
+            "header",
+            "actions",
+            "spacing"
+          ]
+        }
+      }
+    },
+    "body": {
+      "list": {
+        "margin-vertical": {
+          "value": "24px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "24",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-body-list-margin-vertical",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "body",
+            "item": "list",
+            "subitem": "margin-vertical"
+          },
+          "path": [
+            "app-side-nav",
+            "body",
+            "list",
+            "margin-vertical"
+          ]
+        }
+      },
+      "list-item": {
+        "height": {
+          "value": "36px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "36",
+            "type": "size"
+          },
+          "name": "token-app-side-nav-body-list-item-height",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "body",
+            "item": "list-item",
+            "subitem": "height"
+          },
+          "path": [
+            "app-side-nav",
+            "body",
+            "list-item",
+            "height"
+          ]
+        },
+        "padding": {
+          "horizontal": {
+            "value": "8px",
+            "type": "size",
+            "filePath": "src/products/shared/app-side-nav.json",
             "isSource": true,
             "original": {
-              "value": "{color.palette.red-300.value}",
-              "type": "color",
-              "group": "components"
+              "value": "8",
+              "type": "size"
             },
-            "name": "token-form-control-invalid-border-color-default",
+            "name": "token-app-side-nav-body-list-item-padding-horizontal",
             "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "invalid",
-              "subitem": "border-color",
-              "state": "default"
+              "category": "app-side-nav",
+              "type": "body",
+              "item": "list-item",
+              "subitem": "padding",
+              "state": "horizontal"
             },
             "path": [
-              "form",
-              "control",
-              "invalid",
-              "border-color",
-              "default"
+              "app-side-nav",
+              "body",
+              "list-item",
+              "padding",
+              "horizontal"
             ]
           },
-          "hover": {
-            "value": "#940004",
-            "type": "color",
-            "group": "components",
-            "filePath": "src/products/shared/form/generic-control/colors.json",
+          "vertical": {
+            "value": "4px",
+            "type": "size",
+            "filePath": "src/products/shared/app-side-nav.json",
             "isSource": true,
             "original": {
-              "value": "{color.palette.red-400.value}",
-              "type": "color",
-              "group": "components"
+              "value": "4",
+              "type": "size"
             },
-            "name": "token-form-control-invalid-border-color-hover",
+            "name": "token-app-side-nav-body-list-item-padding-vertical",
             "attributes": {
-              "category": "form",
-              "type": "control",
-              "item": "invalid",
-              "subitem": "border-color",
-              "state": "hover"
+              "category": "app-side-nav",
+              "type": "body",
+              "item": "list-item",
+              "subitem": "padding",
+              "state": "vertical"
             },
             "path": [
-              "form",
-              "control",
-              "invalid",
-              "border-color",
-              "hover"
+              "app-side-nav",
+              "body",
+              "list-item",
+              "padding",
+              "vertical"
             ]
           }
-        }
-      },
-      "readonly": {
-        "foreground-color": {
-          "value": "#3b3d45",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+        },
+        "spacing-vertical": {
+          "value": "2px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.foreground.primary.value}",
-            "type": "color",
-            "group": "components"
+            "value": "2",
+            "type": "size"
           },
-          "name": "token-form-control-readonly-foreground-color",
+          "name": "token-app-side-nav-body-list-item-spacing-vertical",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "readonly",
-            "subitem": "foreground-color"
+            "category": "app-side-nav",
+            "type": "body",
+            "item": "list-item",
+            "subitem": "spacing-vertical"
           },
           "path": [
-            "form",
-            "control",
-            "readonly",
-            "foreground-color"
+            "app-side-nav",
+            "body",
+            "list-item",
+            "spacing-vertical"
           ]
         },
-        "surface-color": {
-          "value": "#f1f2f3",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+        "content-spacing-horizontal": {
+          "value": "8px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.surface.strong.value}",
-            "type": "color",
-            "group": "components"
+            "value": "8",
+            "type": "size"
           },
-          "name": "token-form-control-readonly-surface-color",
+          "name": "token-app-side-nav-body-list-item-content-spacing-horizontal",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "readonly",
-            "subitem": "surface-color"
+            "category": "app-side-nav",
+            "type": "body",
+            "item": "list-item",
+            "subitem": "content-spacing-horizontal"
           },
           "path": [
-            "form",
-            "control",
-            "readonly",
-            "surface-color"
+            "app-side-nav",
+            "body",
+            "list-item",
+            "content-spacing-horizontal"
           ]
         },
-        "border-color": {
-          "value": "#656a761a",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+        "border-radius": {
+          "value": "5px",
+          "type": "size",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.border.faint.value}",
-            "type": "color",
-            "group": "components"
+            "value": "5",
+            "type": "size"
           },
-          "name": "token-form-control-readonly-border-color",
+          "name": "token-app-side-nav-body-list-item-border-radius",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "readonly",
-            "subitem": "border-color"
+            "category": "app-side-nav",
+            "type": "body",
+            "item": "list-item",
+            "subitem": "border-radius"
           },
           "path": [
-            "form",
-            "control",
-            "readonly",
-            "border-color"
+            "app-side-nav",
+            "body",
+            "list-item",
+            "border-radius"
           ]
         }
-      },
-      "disabled": {
-        "foreground-color": {
-          "value": "#8c909c",
+      }
+    },
+    "color": {
+      "foreground": {
+        "primary": {
+          "value": "var(--token-color-foreground-primary)",
           "type": "color",
           "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.foreground.disabled.value}",
+            "value": "var(--token-color-foreground-primary)",
             "type": "color",
             "group": "components"
           },
-          "name": "token-form-control-disabled-foreground-color",
+          "name": "token-app-side-nav-color-foreground-primary",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "disabled",
-            "subitem": "foreground-color"
+            "category": "app-side-nav",
+            "type": "color",
+            "item": "foreground",
+            "subitem": "primary"
           },
           "path": [
-            "form",
-            "control",
-            "disabled",
-            "foreground-color"
+            "app-side-nav",
+            "color",
+            "foreground",
+            "primary"
           ]
         },
-        "surface-color": {
-          "value": "#fafafa",
+        "strong": {
+          "value": "var(--token-color-foreground-primary)",
           "type": "color",
           "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.surface.interactive-disabled.value}",
+            "value": "var(--token-color-foreground-primary)",
             "type": "color",
             "group": "components"
           },
-          "name": "token-form-control-disabled-surface-color",
+          "name": "token-app-side-nav-color-foreground-strong",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "disabled",
-            "subitem": "surface-color"
+            "category": "app-side-nav",
+            "type": "color",
+            "item": "foreground",
+            "subitem": "strong"
           },
           "path": [
-            "form",
-            "control",
-            "disabled",
-            "surface-color"
+            "app-side-nav",
+            "color",
+            "foreground",
+            "strong"
           ]
         },
-        "border-color": {
-          "value": "#656a7633",
+        "faint": {
+          "value": "var(--token-color-foreground-faint)",
           "type": "color",
           "group": "components",
-          "filePath": "src/products/shared/form/generic-control/colors.json",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "{color.border.primary.value}",
+            "value": "var(--token-color-foreground-faint)",
             "type": "color",
             "group": "components"
           },
-          "name": "token-form-control-disabled-border-color",
+          "name": "token-app-side-nav-color-foreground-faint",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "disabled",
-            "subitem": "border-color"
+            "category": "app-side-nav",
+            "type": "color",
+            "item": "foreground",
+            "subitem": "faint"
           },
           "path": [
-            "form",
-            "control",
-            "disabled",
-            "border-color"
+            "app-side-nav",
+            "color",
+            "foreground",
+            "faint"
           ]
         }
       },
-      "padding": {
-        "value": "7px",
-        "type": "size",
-        "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
-        "filePath": "src/products/shared/form/generic-control/sizing.json",
-        "isSource": true,
-        "original": {
-          "value": "7",
-          "type": "size",
-          "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
-        },
-        "name": "token-form-control-padding",
-        "attributes": {
-          "category": "form",
-          "type": "control",
-          "item": "padding"
+      "surface": {
+        "primary": {
+          "value": "var(--token-color-surface-faint)",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/app-side-nav.json",
+          "isSource": true,
+          "original": {
+            "value": "var(--token-color-surface-faint)",
+            "type": "color",
+            "group": "components"
+          },
+          "name": "token-app-side-nav-color-surface-primary",
+          "attributes": {
+            "category": "app-side-nav",
+            "type": "color",
+            "item": "surface",
+            "subitem": "primary"
+          },
+          "path": [
+            "app-side-nav",
+            "color",
+            "surface",
+            "primary"
+          ]
         },
-        "path": [
-          "form",
-          "control",
-          "padding"
-        ]
-      },
-      "border": {
-        "radius": {
-          "value": "5px",
-          "type": "size",
-          "filePath": "src/products/shared/form/generic-control/sizing.json",
+        "interactive-hover": {
+          "value": "var(--token-color-surface-interactive-hover)",
+          "type": "color",
+          "group": "semantic",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "5",
-            "type": "size"
+            "value": "var(--token-color-surface-interactive-hover)",
+            "type": "color",
+            "group": "semantic"
           },
-          "name": "token-form-control-border-radius",
+          "name": "token-app-side-nav-color-surface-interactive-hover",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "border",
-            "subitem": "radius"
+            "category": "app-side-nav",
+            "type": "color",
+            "item": "surface",
+            "subitem": "interactive-hover"
           },
           "path": [
-            "form",
-            "control",
-            "border",
-            "radius"
+            "app-side-nav",
+            "color",
+            "surface",
+            "interactive-hover"
           ]
         },
-        "width": {
-          "value": "1px",
-          "type": "size",
-          "filePath": "src/products/shared/form/generic-control/sizing.json",
+        "interactive-active": {
+          "value": "var(--token-color-palette-neutral-300)",
+          "type": "color",
+          "group": "semantic",
+          "filePath": "src/products/shared/app-side-nav.json",
           "isSource": true,
           "original": {
-            "value": "1",
-            "type": "size"
+            "value": "var(--token-color-palette-neutral-300)",
+            "type": "color",
+            "group": "semantic"
           },
-          "name": "token-form-control-border-width",
+          "name": "token-app-side-nav-color-surface-interactive-active",
           "attributes": {
-            "category": "form",
-            "type": "control",
-            "item": "border",
-            "subitem": "width"
+            "category": "app-side-nav",
+            "type": "color",
+            "item": "surface",
+            "subitem": "interactive-active"
           },
           "path": [
-            "form",
-            "control",
-            "border",
-            "width"
+            "app-side-nav",
+            "color",
+            "surface",
+            "interactive-active"
           ]
         }
       }
-    },
+    }
+  },
+  "form": {
     "label": {
       "color": {
         "value": "#0c0c0e",
@@ -5439,172 +5514,7 @@
           },
           "path": [
             "form",
-            "checkbox",
-            "border",
-            "width"
-          ]
-        }
-      },
-      "background-image": {
-        "size": {
-          "value": "12px",
-          "type": "size",
-          "filePath": "src/products/shared/form/checkbox.json",
-          "isSource": true,
-          "original": {
-            "value": "12",
-            "type": "size"
-          },
-          "name": "token-form-checkbox-background-image-size",
-          "attributes": {
-            "category": "form",
-            "type": "checkbox",
-            "item": "background-image",
-            "subitem": "size"
-          },
-          "path": [
-            "form",
-            "checkbox",
-            "background-image",
-            "size"
-          ]
-        },
-        "data-url": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'tick' color is hardcoded here!",
-          "filePath": "src/products/shared/form/checkbox.json",
-          "isSource": true,
-          "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'tick' color is hardcoded here!"
-          },
-          "name": "token-form-checkbox-background-image-data-url",
-          "attributes": {
-            "category": "form",
-            "type": "checkbox",
-            "item": "background-image",
-            "subitem": "data-url"
-          },
-          "path": [
-            "form",
-            "checkbox",
-            "background-image",
-            "data-url"
-          ]
-        },
-        "data-url-indeterminate": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'dash' color is hardcoded here!",
-          "filePath": "src/products/shared/form/checkbox.json",
-          "isSource": true,
-          "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'dash' color is hardcoded here!"
-          },
-          "name": "token-form-checkbox-background-image-data-url-indeterminate",
-          "attributes": {
-            "category": "form",
-            "type": "checkbox",
-            "item": "background-image",
-            "subitem": "data-url-indeterminate"
-          },
-          "path": [
-            "form",
-            "checkbox",
-            "background-image",
-            "data-url-indeterminate"
-          ]
-        },
-        "data-url-disabled": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'tick' color is hardcoded here!",
-          "filePath": "src/products/shared/form/checkbox.json",
-          "isSource": true,
-          "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'tick' color is hardcoded here!"
-          },
-          "name": "token-form-checkbox-background-image-data-url-disabled",
-          "attributes": {
-            "category": "form",
-            "type": "checkbox",
-            "item": "background-image",
-            "subitem": "data-url-disabled"
-          },
-          "path": [
-            "form",
-            "checkbox",
-            "background-image",
-            "data-url-disabled"
-          ]
-        },
-        "data-url-indeterminate-disabled": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'dash' color is hardcoded here!",
-          "filePath": "src/products/shared/form/checkbox.json",
-          "isSource": true,
-          "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'dash' color is hardcoded here!"
-          },
-          "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
-          "attributes": {
-            "category": "form",
-            "type": "checkbox",
-            "item": "background-image",
-            "subitem": "data-url-indeterminate-disabled"
-          },
-          "path": [
-            "form",
-            "checkbox",
-            "background-image",
-            "data-url-indeterminate-disabled"
-          ]
-        }
-      }
-    },
-    "radio": {
-      "size": {
-        "value": "16px",
-        "type": "size",
-        "filePath": "src/products/shared/form/radio.json",
-        "isSource": true,
-        "original": {
-          "value": "16",
-          "type": "size"
-        },
-        "name": "token-form-radio-size",
-        "attributes": {
-          "category": "form",
-          "type": "radio",
-          "item": "size"
-        },
-        "path": [
-          "form",
-          "radio",
-          "size"
-        ]
-      },
-      "border": {
-        "width": {
-          "value": "1px",
-          "type": "size",
-          "filePath": "src/products/shared/form/radio.json",
-          "isSource": true,
-          "original": {
-            "value": "1",
-            "type": "size"
-          },
-          "name": "token-form-radio-border-width",
-          "attributes": {
-            "category": "form",
-            "type": "radio",
-            "item": "border",
-            "subitem": "width"
-          },
-          "path": [
-            "form",
-            "radio",
+            "checkbox",
             "border",
             "width"
           ]
@@ -5614,596 +5524,685 @@
         "size": {
           "value": "12px",
           "type": "size",
-          "filePath": "src/products/shared/form/radio.json",
+          "filePath": "src/products/shared/form/checkbox.json",
           "isSource": true,
           "original": {
             "value": "12",
             "type": "size"
           },
-          "name": "token-form-radio-background-image-size",
+          "name": "token-form-checkbox-background-image-size",
           "attributes": {
             "category": "form",
-            "type": "radio",
+            "type": "checkbox",
             "item": "background-image",
             "subitem": "size"
           },
           "path": [
             "form",
-            "radio",
+            "checkbox",
             "background-image",
             "size"
           ]
         },
         "data-url": {
-          "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'dot' color is hardcoded here!",
-          "filePath": "src/products/shared/form/radio.json",
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'tick' color is hardcoded here!",
+          "filePath": "src/products/shared/form/checkbox.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'dot' color is hardcoded here!"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'tick' color is hardcoded here!"
           },
-          "name": "token-form-radio-background-image-data-url",
+          "name": "token-form-checkbox-background-image-data-url",
           "attributes": {
             "category": "form",
-            "type": "radio",
+            "type": "checkbox",
             "item": "background-image",
             "subitem": "data-url"
           },
           "path": [
             "form",
-            "radio",
+            "checkbox",
             "background-image",
             "data-url"
           ]
         },
-        "data-url-disabled": {
-          "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'dot' color is hardcoded here!",
-          "filePath": "src/products/shared/form/radio.json",
+        "data-url-indeterminate": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'dash' color is hardcoded here!",
+          "filePath": "src/products/shared/form/checkbox.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'dot' color is hardcoded here!"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'dash' color is hardcoded here!"
           },
-          "name": "token-form-radio-background-image-data-url-disabled",
+          "name": "token-form-checkbox-background-image-data-url-indeterminate",
           "attributes": {
             "category": "form",
-            "type": "radio",
+            "type": "checkbox",
             "item": "background-image",
-            "subitem": "data-url-disabled"
+            "subitem": "data-url-indeterminate"
           },
           "path": [
             "form",
-            "radio",
+            "checkbox",
             "background-image",
-            "data-url-disabled"
-          ]
-        }
-      }
-    },
-    "radiocard-group": {
-      "gap": {
-        "value": "16px",
-        "type": "size",
-        "filePath": "src/products/shared/form/radiocard.json",
-        "isSource": true,
-        "original": {
-          "value": "16",
-          "type": "size"
-        },
-        "name": "token-form-radiocard-group-gap",
-        "attributes": {
-          "category": "form",
-          "type": "radiocard-group",
-          "item": "gap"
-        },
-        "path": [
-          "form",
-          "radiocard-group",
-          "gap"
-        ]
-      }
-    },
-    "radiocard": {
-      "border": {
-        "width": {
-          "value": "1px",
-          "type": "size",
-          "filePath": "src/products/shared/form/radiocard.json",
-          "isSource": true,
-          "original": {
-            "value": "1",
-            "type": "size"
-          },
-          "name": "token-form-radiocard-border-width",
-          "attributes": {
-            "category": "form",
-            "type": "radiocard",
-            "item": "border",
-            "subitem": "width"
-          },
-          "path": [
-            "form",
-            "radiocard",
-            "border",
-            "width"
+            "data-url-indeterminate"
           ]
         },
-        "radius": {
-          "value": "6px",
-          "type": "size",
-          "filePath": "src/products/shared/form/radiocard.json",
+        "data-url-disabled": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'tick' color is hardcoded here!",
+          "filePath": "src/products/shared/form/checkbox.json",
           "isSource": true,
           "original": {
-            "value": "6",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'tick' color is hardcoded here!"
           },
-          "name": "token-form-radiocard-border-radius",
+          "name": "token-form-checkbox-background-image-data-url-disabled",
           "attributes": {
             "category": "form",
-            "type": "radiocard",
-            "item": "border",
-            "subitem": "radius"
+            "type": "checkbox",
+            "item": "background-image",
+            "subitem": "data-url-disabled"
           },
           "path": [
             "form",
-            "radiocard",
-            "border",
-            "radius"
+            "checkbox",
+            "background-image",
+            "data-url-disabled"
           ]
-        }
-      },
-      "content-padding": {
-        "value": "24px",
-        "type": "size",
-        "filePath": "src/products/shared/form/radiocard.json",
-        "isSource": true,
-        "original": {
-          "value": "24",
-          "type": "size"
-        },
-        "name": "token-form-radiocard-content-padding",
-        "attributes": {
-          "category": "form",
-          "type": "radiocard",
-          "item": "content-padding"
-        },
-        "path": [
-          "form",
-          "radiocard",
-          "content-padding"
-        ]
-      },
-      "control-padding": {
-        "value": "8px",
-        "type": "size",
-        "filePath": "src/products/shared/form/radiocard.json",
-        "isSource": true,
-        "original": {
-          "value": "8",
-          "type": "size"
-        },
-        "name": "token-form-radiocard-control-padding",
-        "attributes": {
-          "category": "form",
-          "type": "radiocard",
-          "item": "control-padding"
         },
-        "path": [
-          "form",
-          "radiocard",
-          "control-padding"
-        ]
-      },
-      "transition": {
-        "duration": {
-          "value": "0.2s",
-          "type": "time",
-          "unit": "s",
-          "filePath": "src/products/shared/form/radiocard.json",
+        "data-url-indeterminate-disabled": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'dash' color is hardcoded here!",
+          "filePath": "src/products/shared/form/checkbox.json",
           "isSource": true,
           "original": {
-            "value": "0.2",
-            "type": "time",
-            "unit": "s"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'dash' color is hardcoded here!"
           },
-          "name": "token-form-radiocard-transition-duration",
+          "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
           "attributes": {
             "category": "form",
-            "type": "radiocard",
-            "item": "transition",
-            "subitem": "duration"
+            "type": "checkbox",
+            "item": "background-image",
+            "subitem": "data-url-indeterminate-disabled"
           },
           "path": [
             "form",
-            "radiocard",
-            "transition",
-            "duration"
+            "checkbox",
+            "background-image",
+            "data-url-indeterminate-disabled"
           ]
         }
       }
     },
-    "select": {
-      "background-image": {
-        "size": {
-          "value": "16px",
-          "type": "size",
-          "filePath": "src/products/shared/form/select.json",
-          "isSource": true,
-          "original": {
-            "value": "16",
-            "type": "size"
-          },
-          "name": "token-form-select-background-image-size",
-          "attributes": {
-            "category": "form",
-            "type": "select",
-            "item": "background-image",
-            "subitem": "size"
-          },
-          "path": [
-            "form",
-            "select",
-            "background-image",
-            "size"
-          ]
-        },
-        "position-right-x": {
-          "value": "7px",
-          "type": "size",
-          "filePath": "src/products/shared/form/select.json",
-          "isSource": true,
-          "original": {
-            "value": "{form.control.padding.value}",
-            "type": "size"
+    "control": {
+      "base": {
+        "foreground": {
+          "value-color": {
+            "value": "#0c0c0e",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.foreground.strong.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-base-foreground-value-color",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "base",
+              "subitem": "foreground",
+              "state": "value-color"
+            },
+            "path": [
+              "form",
+              "control",
+              "base",
+              "foreground",
+              "value-color"
+            ]
           },
-          "name": "token-form-select-background-image-position-right-x",
-          "attributes": {
-            "category": "form",
-            "type": "select",
-            "item": "background-image",
-            "subitem": "position-right-x"
+          "placeholder-color": {
+            "value": "#656a76",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.foreground.faint.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-base-foreground-placeholder-color",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "base",
+              "subitem": "foreground",
+              "state": "placeholder-color"
+            },
+            "path": [
+              "form",
+              "control",
+              "base",
+              "foreground",
+              "placeholder-color"
+            ]
+          }
+        },
+        "surface-color": {
+          "default": {
+            "value": "#ffffff",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.surface.interactive.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-base-surface-color-default",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "base",
+              "subitem": "surface-color",
+              "state": "default"
+            },
+            "path": [
+              "form",
+              "control",
+              "base",
+              "surface-color",
+              "default"
+            ]
           },
-          "path": [
-            "form",
-            "select",
-            "background-image",
-            "position-right-x"
-          ]
+          "hover": {
+            "value": "#f1f2f3",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.surface.interactive-hover.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-base-surface-color-hover",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "base",
+              "subitem": "surface-color",
+              "state": "hover"
+            },
+            "path": [
+              "form",
+              "control",
+              "base",
+              "surface-color",
+              "hover"
+            ]
+          }
         },
-        "position-top-y": {
-          "value": "9px",
-          "type": "size",
-          "filePath": "src/products/shared/form/select.json",
+        "border-color": {
+          "default": {
+            "value": "#8c909c",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.neutral-400.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-base-border-color-default",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "base",
+              "subitem": "border-color",
+              "state": "default"
+            },
+            "path": [
+              "form",
+              "control",
+              "base",
+              "border-color",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#656a76",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.neutral-500.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-base-border-color-hover",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "base",
+              "subitem": "border-color",
+              "state": "hover"
+            },
+            "path": [
+              "form",
+              "control",
+              "base",
+              "border-color",
+              "hover"
+            ]
+          }
+        }
+      },
+      "checked": {
+        "foreground-color": {
+          "value": "#ffffff",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "9",
-            "type": "size"
+            "value": "{color.foreground.high-contrast.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-select-background-image-position-top-y",
+          "name": "token-form-control-checked-foreground-color",
           "attributes": {
             "category": "form",
-            "type": "select",
-            "item": "background-image",
-            "subitem": "position-top-y"
+            "type": "control",
+            "item": "checked",
+            "subitem": "foreground-color"
           },
           "path": [
             "form",
-            "select",
-            "background-image",
-            "position-top-y"
+            "control",
+            "checked",
+            "foreground-color"
           ]
         },
-        "data-url": {
-          "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
-          "comment": "notice: the 'caret' color is hardcoded here!",
-          "filePath": "src/products/shared/form/select.json",
-          "isSource": true,
-          "original": {
-            "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
-            "comment": "notice: the 'caret' color is hardcoded here!"
-          },
-          "name": "token-form-select-background-image-data-url",
-          "attributes": {
-            "category": "form",
-            "type": "select",
-            "item": "background-image",
-            "subitem": "data-url"
+        "surface-color": {
+          "default": {
+            "value": "#1060ff",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.blue-200.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-checked-surface-color-default",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "checked",
+              "subitem": "surface-color",
+              "state": "default"
+            },
+            "path": [
+              "form",
+              "control",
+              "checked",
+              "surface-color",
+              "default"
+            ]
           },
-          "path": [
-            "form",
-            "select",
-            "background-image",
-            "data-url"
-          ]
+          "hover": {
+            "value": "#0c56e9",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.blue-300.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-checked-surface-color-hover",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "checked",
+              "subitem": "surface-color",
+              "state": "hover"
+            },
+            "path": [
+              "form",
+              "control",
+              "checked",
+              "surface-color",
+              "hover"
+            ]
+          }
         },
-        "data-url-disabled": {
-          "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
-          "comment": "notice: the 'caret' color is hardcoded here!",
-          "filePath": "src/products/shared/form/select.json",
-          "isSource": true,
-          "original": {
-            "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
-            "comment": "notice: the 'caret' color is hardcoded here!"
-          },
-          "name": "token-form-select-background-image-data-url-disabled",
-          "attributes": {
-            "category": "form",
-            "type": "select",
-            "item": "background-image",
-            "subitem": "data-url-disabled"
+        "border-color": {
+          "default": {
+            "value": "#0c56e9",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.blue-300.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-checked-border-color-default",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "checked",
+              "subitem": "border-color",
+              "state": "default"
+            },
+            "path": [
+              "form",
+              "control",
+              "checked",
+              "border-color",
+              "default"
+            ]
           },
-          "path": [
-            "form",
-            "select",
-            "background-image",
-            "data-url-disabled"
-          ]
+          "hover": {
+            "value": "#0046d1",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.blue-400.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-checked-border-color-hover",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "checked",
+              "subitem": "border-color",
+              "state": "hover"
+            },
+            "path": [
+              "form",
+              "control",
+              "checked",
+              "border-color",
+              "hover"
+            ]
+          }
         }
-      }
-    },
-    "text-input": {
-      "background-image": {
-        "size": {
-          "value": "16px",
-          "type": "size",
-          "filePath": "src/products/shared/form/text-input.json",
-          "isSource": true,
-          "original": {
-            "value": "16",
-            "type": "size"
-          },
-          "name": "token-form-text-input-background-image-size",
-          "attributes": {
-            "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "size"
+      },
+      "invalid": {
+        "border-color": {
+          "default": {
+            "value": "#c00005",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.red-300.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-invalid-border-color-default",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "invalid",
+              "subitem": "border-color",
+              "state": "default"
+            },
+            "path": [
+              "form",
+              "control",
+              "invalid",
+              "border-color",
+              "default"
+            ]
           },
-          "path": [
-            "form",
-            "text-input",
-            "background-image",
-            "size"
-          ]
-        },
-        "position-x": {
-          "value": "7px",
-          "type": "size",
-          "filePath": "src/products/shared/form/text-input.json",
+          "hover": {
+            "value": "#940004",
+            "type": "color",
+            "group": "components",
+            "filePath": "src/products/shared/form/generic-control/colors.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.palette.red-400.value}",
+              "type": "color",
+              "group": "components"
+            },
+            "name": "token-form-control-invalid-border-color-hover",
+            "attributes": {
+              "category": "form",
+              "type": "control",
+              "item": "invalid",
+              "subitem": "border-color",
+              "state": "hover"
+            },
+            "path": [
+              "form",
+              "control",
+              "invalid",
+              "border-color",
+              "hover"
+            ]
+          }
+        }
+      },
+      "readonly": {
+        "foreground-color": {
+          "value": "#3b3d45",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "{form.control.padding.value}",
-            "type": "size"
+            "value": "{color.foreground.primary.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-text-input-background-image-position-x",
+          "name": "token-form-control-readonly-foreground-color",
           "attributes": {
             "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "position-x"
+            "type": "control",
+            "item": "readonly",
+            "subitem": "foreground-color"
           },
           "path": [
             "form",
-            "text-input",
-            "background-image",
-            "position-x"
+            "control",
+            "readonly",
+            "foreground-color"
           ]
         },
-        "data-url-date": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
-          "comment": "notice: the icon color is hardcoded here!",
-          "filePath": "src/products/shared/form/text-input.json",
+        "surface-color": {
+          "value": "#f1f2f3",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
-            "comment": "notice: the icon color is hardcoded here!"
+            "value": "{color.surface.strong.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-text-input-background-image-data-url-date",
+          "name": "token-form-control-readonly-surface-color",
           "attributes": {
             "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "data-url-date"
+            "type": "control",
+            "item": "readonly",
+            "subitem": "surface-color"
           },
           "path": [
             "form",
-            "text-input",
-            "background-image",
-            "data-url-date"
+            "control",
+            "readonly",
+            "surface-color"
           ]
         },
-        "data-url-time": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-          "comment": "notice: the icon color is hardcoded here!",
-          "filePath": "src/products/shared/form/text-input.json",
+        "border-color": {
+          "value": "#656a761a",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-            "comment": "notice: the icon color is hardcoded here!"
+            "value": "{color.border.faint.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-text-input-background-image-data-url-time",
+          "name": "token-form-control-readonly-border-color",
           "attributes": {
             "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "data-url-time"
+            "type": "control",
+            "item": "readonly",
+            "subitem": "border-color"
           },
           "path": [
             "form",
-            "text-input",
-            "background-image",
-            "data-url-time"
+            "control",
+            "readonly",
+            "border-color"
           ]
-        },
-        "data-url-search": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-          "comment": "notice: the icon color is hardcoded here!",
-          "filePath": "src/products/shared/form/text-input.json",
+        }
+      },
+      "disabled": {
+        "foreground-color": {
+          "value": "#8c909c",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
-            "comment": "notice: the icon color is hardcoded here!"
+            "value": "{color.foreground.disabled.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-text-input-background-image-data-url-search",
+          "name": "token-form-control-disabled-foreground-color",
           "attributes": {
             "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "data-url-search"
+            "type": "control",
+            "item": "disabled",
+            "subitem": "foreground-color"
           },
           "path": [
             "form",
-            "text-input",
-            "background-image",
-            "data-url-search"
+            "control",
+            "disabled",
+            "foreground-color"
           ]
         },
-        "data-url-search-cancel": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
-          "comment": "notice: the icon color is hardcoded here!",
-          "filePath": "src/products/shared/form/text-input.json",
+        "surface-color": {
+          "value": "#fafafa",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
-            "comment": "notice: the icon color is hardcoded here!"
+            "value": "{color.surface.interactive-disabled.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-text-input-background-image-data-url-search-cancel",
+          "name": "token-form-control-disabled-surface-color",
           "attributes": {
             "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "data-url-search-cancel"
+            "type": "control",
+            "item": "disabled",
+            "subitem": "surface-color"
           },
           "path": [
             "form",
-            "text-input",
-            "background-image",
-            "data-url-search-cancel"
+            "control",
+            "disabled",
+            "surface-color"
           ]
         },
-        "data-url-search-loading": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
-          "comment": "notice: the icon color and animation are hardcoded here!",
-          "filePath": "src/products/shared/form/text-input.json",
+        "border-color": {
+          "value": "#656a7633",
+          "type": "color",
+          "group": "components",
+          "filePath": "src/products/shared/form/generic-control/colors.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
-            "comment": "notice: the icon color and animation are hardcoded here!"
+            "value": "{color.border.primary.value}",
+            "type": "color",
+            "group": "components"
           },
-          "name": "token-form-text-input-background-image-data-url-search-loading",
+          "name": "token-form-control-disabled-border-color",
           "attributes": {
             "category": "form",
-            "type": "text-input",
-            "item": "background-image",
-            "subitem": "data-url-search-loading"
+            "type": "control",
+            "item": "disabled",
+            "subitem": "border-color"
           },
           "path": [
             "form",
-            "text-input",
-            "background-image",
-            "data-url-search-loading"
+            "control",
+            "disabled",
+            "border-color"
           ]
         }
-      }
-    },
-    "toggle": {
-      "width": {
-        "value": "32px",
-        "type": "size",
-        "filePath": "src/products/shared/form/toggle.json",
-        "isSource": true,
-        "original": {
-          "value": "32",
-          "type": "size"
-        },
-        "name": "token-form-toggle-width",
-        "attributes": {
-          "category": "form",
-          "type": "toggle",
-          "item": "width"
-        },
-        "path": [
-          "form",
-          "toggle",
-          "width"
-        ]
       },
-      "height": {
-        "value": "16px",
+      "padding": {
+        "value": "7px",
         "type": "size",
-        "filePath": "src/products/shared/form/toggle.json",
+        "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma.",
+        "filePath": "src/products/shared/form/generic-control/sizing.json",
         "isSource": true,
         "original": {
-          "value": "16",
-          "type": "size"
+          "value": "7",
+          "type": "size",
+          "comment": "Notice: we have to take in account the border, so it's 1px less than in Figma."
         },
-        "name": "token-form-toggle-height",
+        "name": "token-form-control-padding",
         "attributes": {
           "category": "form",
-          "type": "toggle",
-          "item": "height"
+          "type": "control",
+          "item": "padding"
         },
         "path": [
           "form",
-          "toggle",
-          "height"
+          "control",
+          "padding"
         ]
       },
-      "base": {
-        "surface-color": {
-          "default": {
-            "value": "#f1f2f3",
-            "type": "color",
-            "group": "components",
-            "comment": "the toggle has a different base surface color, compared to the other controls",
-            "filePath": "src/products/shared/form/toggle.json",
-            "isSource": true,
-            "original": {
-              "value": "{color.surface.strong.value}",
-              "type": "color",
-              "group": "components",
-              "comment": "the toggle has a different base surface color, compared to the other controls"
-            },
-            "name": "token-form-toggle-base-surface-color-default",
-            "attributes": {
-              "category": "form",
-              "type": "toggle",
-              "item": "base",
-              "subitem": "surface-color",
-              "state": "default"
-            },
-            "path": [
-              "form",
-              "toggle",
-              "base",
-              "surface-color",
-              "default"
-            ]
-          }
-        }
-      },
       "border": {
         "radius": {
-          "value": "3px",
+          "value": "5px",
           "type": "size",
-          "filePath": "src/products/shared/form/toggle.json",
+          "filePath": "src/products/shared/form/generic-control/sizing.json",
           "isSource": true,
           "original": {
-            "value": "3",
+            "value": "5",
             "type": "size"
           },
-          "name": "token-form-toggle-border-radius",
+          "name": "token-form-control-border-radius",
           "attributes": {
             "category": "form",
-            "type": "toggle",
+            "type": "control",
             "item": "border",
             "subitem": "radius"
           },
           "path": [
             "form",
-            "toggle",
+            "control",
             "border",
             "radius"
           ]
@@ -6211,858 +6210,859 @@
         "width": {
           "value": "1px",
           "type": "size",
-          "filePath": "src/products/shared/form/toggle.json",
+          "filePath": "src/products/shared/form/generic-control/sizing.json",
           "isSource": true,
           "original": {
             "value": "1",
             "type": "size"
           },
-          "name": "token-form-toggle-border-width",
+          "name": "token-form-control-border-width",
           "attributes": {
             "category": "form",
-            "type": "toggle",
+            "type": "control",
             "item": "border",
             "subitem": "width"
           },
           "path": [
             "form",
-            "toggle",
+            "control",
             "border",
             "width"
           ]
         }
+      }
+    },
+    "radio": {
+      "size": {
+        "value": "16px",
+        "type": "size",
+        "filePath": "src/products/shared/form/radio.json",
+        "isSource": true,
+        "original": {
+          "value": "16",
+          "type": "size"
+        },
+        "name": "token-form-radio-size",
+        "attributes": {
+          "category": "form",
+          "type": "radio",
+          "item": "size"
+        },
+        "path": [
+          "form",
+          "radio",
+          "size"
+        ]
       },
-      "background-image": {
-        "size": {
-          "value": "12px",
+      "border": {
+        "width": {
+          "value": "1px",
           "type": "size",
-          "filePath": "src/products/shared/form/toggle.json",
+          "filePath": "src/products/shared/form/radio.json",
           "isSource": true,
           "original": {
-            "value": "12",
+            "value": "1",
             "type": "size"
           },
-          "name": "token-form-toggle-background-image-size",
+          "name": "token-form-radio-border-width",
           "attributes": {
             "category": "form",
-            "type": "toggle",
-            "item": "background-image",
-            "subitem": "size"
+            "type": "radio",
+            "item": "border",
+            "subitem": "width"
           },
           "path": [
             "form",
-            "toggle",
-            "background-image",
-            "size"
+            "radio",
+            "border",
+            "width"
           ]
-        },
-        "position-x": {
-          "value": "2px",
+        }
+      },
+      "background-image": {
+        "size": {
+          "value": "12px",
           "type": "size",
-          "filePath": "src/products/shared/form/toggle.json",
+          "filePath": "src/products/shared/form/radio.json",
           "isSource": true,
           "original": {
-            "value": "2",
+            "value": "12",
             "type": "size"
           },
-          "name": "token-form-toggle-background-image-position-x",
+          "name": "token-form-radio-background-image-size",
           "attributes": {
             "category": "form",
-            "type": "toggle",
+            "type": "radio",
             "item": "background-image",
-            "subitem": "position-x"
+            "subitem": "size"
           },
           "path": [
             "form",
-            "toggle",
+            "radio",
             "background-image",
-            "position-x"
+            "size"
           ]
         },
         "data-url": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'tick' color is hardcoded here!",
-          "filePath": "src/products/shared/form/toggle.json",
+          "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'dot' color is hardcoded here!",
+          "filePath": "src/products/shared/form/radio.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'tick' color is hardcoded here!"
+            "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'dot' color is hardcoded here!"
           },
-          "name": "token-form-toggle-background-image-data-url",
+          "name": "token-form-radio-background-image-data-url",
           "attributes": {
             "category": "form",
-            "type": "toggle",
+            "type": "radio",
             "item": "background-image",
             "subitem": "data-url"
           },
           "path": [
             "form",
-            "toggle",
+            "radio",
             "background-image",
             "data-url"
           ]
         },
         "data-url-disabled": {
-          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-          "comment": "notice: the 'tick' color is hardcoded here!",
-          "filePath": "src/products/shared/form/toggle.json",
+          "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'dot' color is hardcoded here!",
+          "filePath": "src/products/shared/form/radio.json",
           "isSource": true,
           "original": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
-            "comment": "notice: the 'tick' color is hardcoded here!"
+            "value": "url(\"data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'dot' color is hardcoded here!"
           },
-          "name": "token-form-toggle-background-image-data-url-disabled",
+          "name": "token-form-radio-background-image-data-url-disabled",
           "attributes": {
             "category": "form",
-            "type": "toggle",
+            "type": "radio",
             "item": "background-image",
             "subitem": "data-url-disabled"
           },
           "path": [
             "form",
-            "toggle",
+            "radio",
             "background-image",
             "data-url-disabled"
           ]
         }
-      },
-      "transition": {
-        "duration": {
-          "value": "0.2s",
-          "type": "time",
-          "unit": "s",
-          "filePath": "src/products/shared/form/toggle.json",
+      }
+    },
+    "radiocard-group": {
+      "gap": {
+        "value": "16px",
+        "type": "size",
+        "filePath": "src/products/shared/form/radiocard.json",
+        "isSource": true,
+        "original": {
+          "value": "16",
+          "type": "size"
+        },
+        "name": "token-form-radiocard-group-gap",
+        "attributes": {
+          "category": "form",
+          "type": "radiocard-group",
+          "item": "gap"
+        },
+        "path": [
+          "form",
+          "radiocard-group",
+          "gap"
+        ]
+      }
+    },
+    "radiocard": {
+      "border": {
+        "width": {
+          "value": "1px",
+          "type": "size",
+          "filePath": "src/products/shared/form/radiocard.json",
           "isSource": true,
           "original": {
-            "value": "0.2",
-            "type": "time",
-            "unit": "s"
+            "value": "1",
+            "type": "size"
           },
-          "name": "token-form-toggle-transition-duration",
+          "name": "token-form-radiocard-border-width",
           "attributes": {
             "category": "form",
-            "type": "toggle",
-            "item": "transition",
-            "subitem": "duration"
+            "type": "radiocard",
+            "item": "border",
+            "subitem": "width"
           },
           "path": [
             "form",
-            "toggle",
-            "transition",
-            "duration"
+            "radiocard",
+            "border",
+            "width"
           ]
         },
-        "timing-function": {
-          "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)",
-          "filePath": "src/products/shared/form/toggle.json",
+        "radius": {
+          "value": "6px",
+          "type": "size",
+          "filePath": "src/products/shared/form/radiocard.json",
           "isSource": true,
           "original": {
-            "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)"
+            "value": "6",
+            "type": "size"
           },
-          "name": "token-form-toggle-transition-timing-function",
+          "name": "token-form-radiocard-border-radius",
           "attributes": {
             "category": "form",
-            "type": "toggle",
-            "item": "transition",
-            "subitem": "timing-function"
+            "type": "radiocard",
+            "item": "border",
+            "subitem": "radius"
           },
           "path": [
             "form",
-            "toggle",
-            "transition",
-            "timing-function"
+            "radiocard",
+            "border",
+            "radius"
           ]
         }
       },
-      "thumb-size": {
-        "value": "16px",
+      "content-padding": {
+        "value": "24px",
         "type": "size",
-        "filePath": "src/products/shared/form/toggle.json",
+        "filePath": "src/products/shared/form/radiocard.json",
         "isSource": true,
         "original": {
-          "value": "{form.toggle.height.value}",
+          "value": "24",
           "type": "size"
         },
-        "name": "token-form-toggle-thumb-size",
+        "name": "token-form-radiocard-content-padding",
         "attributes": {
           "category": "form",
-          "type": "toggle",
-          "item": "thumb-size"
+          "type": "radiocard",
+          "item": "content-padding"
         },
         "path": [
           "form",
-          "toggle",
-          "thumb-size"
+          "radiocard",
+          "content-padding"
         ]
-      }
-    }
-  },
-  "app-header": {
-    "height": {
-      "value": "60px",
-      "type": "size",
-      "filePath": "src/products/shared/app-header.json",
-      "isSource": true,
-      "original": {
-        "value": "60",
-        "type": "size"
-      },
-      "name": "token-app-header-height",
-      "attributes": {
-        "category": "app-header",
-        "type": "height"
       },
-      "path": [
-        "app-header",
-        "height"
-      ]
-    },
-    "home-link": {
-      "size": {
-        "value": "36px",
-        "type": "size",
-        "filePath": "src/products/shared/app-header.json",
-        "isSource": true,
-        "original": {
-          "value": "36",
-          "type": "size"
-        },
-        "name": "token-app-header-home-link-size",
-        "attributes": {
-          "category": "app-header",
-          "type": "home-link",
-          "item": "size"
-        },
-        "path": [
-          "app-header",
-          "home-link",
-          "size"
-        ]
-      }
-    },
-    "logo": {
-      "size": {
-        "value": "28px",
+      "control-padding": {
+        "value": "8px",
         "type": "size",
-        "filePath": "src/products/shared/app-header.json",
+        "filePath": "src/products/shared/form/radiocard.json",
         "isSource": true,
         "original": {
-          "value": "28",
+          "value": "8",
           "type": "size"
         },
-        "name": "token-app-header-logo-size",
+        "name": "token-form-radiocard-control-padding",
         "attributes": {
-          "category": "app-header",
-          "type": "logo",
-          "item": "size"
+          "category": "form",
+          "type": "radiocard",
+          "item": "control-padding"
         },
         "path": [
-          "app-header",
-          "logo",
-          "size"
+          "form",
+          "radiocard",
+          "control-padding"
         ]
-      }
-    }
-  },
-  "app-side-nav": {
-    "wrapper": {
-      "border": {
-        "width": {
-          "value": "1px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+      },
+      "transition": {
+        "duration": {
+          "value": "0.2s",
+          "type": "time",
+          "unit": "s",
+          "filePath": "src/products/shared/form/radiocard.json",
           "isSource": true,
           "original": {
-            "value": "1",
-            "type": "size"
+            "value": "0.2",
+            "type": "time",
+            "unit": "s"
           },
-          "name": "token-app-side-nav-wrapper-border-width",
+          "name": "token-form-radiocard-transition-duration",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "wrapper",
-            "item": "border",
-            "subitem": "width"
+            "category": "form",
+            "type": "radiocard",
+            "item": "transition",
+            "subitem": "duration"
           },
           "path": [
-            "app-side-nav",
-            "wrapper",
-            "border",
-            "width"
+            "form",
+            "radiocard",
+            "transition",
+            "duration"
           ]
-        },
-        "color": {
-          "value": "var(--token-color-palette-neutral-200)",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/app-side-nav.json",
+        }
+      }
+    },
+    "select": {
+      "background-image": {
+        "size": {
+          "value": "16px",
+          "type": "size",
+          "filePath": "src/products/shared/form/select.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-palette-neutral-200)",
-            "type": "color",
-            "group": "components"
+            "value": "16",
+            "type": "size"
           },
-          "name": "token-app-side-nav-wrapper-border-color",
+          "name": "token-form-select-background-image-size",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "wrapper",
-            "item": "border",
-            "subitem": "color"
+            "category": "form",
+            "type": "select",
+            "item": "background-image",
+            "subitem": "size"
           },
           "path": [
-            "app-side-nav",
-            "wrapper",
-            "border",
-            "color"
+            "form",
+            "select",
+            "background-image",
+            "size"
           ]
-        }
-      },
-      "padding": {
-        "horizontal": {
-          "value": "16px",
+        },
+        "position-right-x": {
+          "value": "7px",
           "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+          "filePath": "src/products/shared/form/select.json",
           "isSource": true,
           "original": {
-            "value": "16",
+            "value": "{form.control.padding.value}",
             "type": "size"
           },
-          "name": "token-app-side-nav-wrapper-padding-horizontal",
+          "name": "token-form-select-background-image-position-right-x",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "wrapper",
-            "item": "padding",
-            "subitem": "horizontal"
+            "category": "form",
+            "type": "select",
+            "item": "background-image",
+            "subitem": "position-right-x"
           },
           "path": [
-            "app-side-nav",
-            "wrapper",
-            "padding",
-            "horizontal"
+            "form",
+            "select",
+            "background-image",
+            "position-right-x"
           ]
         },
-        "vertical": {
-          "value": "16px",
+        "position-top-y": {
+          "value": "9px",
           "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+          "filePath": "src/products/shared/form/select.json",
           "isSource": true,
           "original": {
-            "value": "16",
+            "value": "9",
             "type": "size"
           },
-          "name": "token-app-side-nav-wrapper-padding-vertical",
+          "name": "token-form-select-background-image-position-top-y",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "wrapper",
-            "item": "padding",
-            "subitem": "vertical"
+            "category": "form",
+            "type": "select",
+            "item": "background-image",
+            "subitem": "position-top-y"
           },
           "path": [
-            "app-side-nav",
-            "wrapper",
-            "padding",
-            "vertical"
+            "form",
+            "select",
+            "background-image",
+            "position-top-y"
           ]
         },
-        "horizontal-minimized": {
-          "value": "8px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "data-url": {
+          "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
+          "comment": "notice: the 'caret' color is hardcoded here!",
+          "filePath": "src/products/shared/form/select.json",
           "isSource": true,
           "original": {
-            "value": "8",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%23656A76'/%3E%3C/svg%3E\")",
+            "comment": "notice: the 'caret' color is hardcoded here!"
           },
-          "name": "token-app-side-nav-wrapper-padding-horizontal-minimized",
+          "name": "token-form-select-background-image-data-url",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "wrapper",
-            "item": "padding",
-            "subitem": "horizontal-minimized"
+            "category": "form",
+            "type": "select",
+            "item": "background-image",
+            "subitem": "data-url"
           },
           "path": [
-            "app-side-nav",
-            "wrapper",
-            "padding",
-            "horizontal-minimized"
+            "form",
+            "select",
+            "background-image",
+            "data-url"
           ]
         },
-        "vertical-minimized": {
-          "value": "22px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "data-url-disabled": {
+          "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
+          "comment": "notice: the 'caret' color is hardcoded here!",
+          "filePath": "src/products/shared/form/select.json",
           "isSource": true,
           "original": {
-            "value": "22",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' fill='%238C909C'/%3E%3C/svg%3E\")",
+            "comment": "notice: the 'caret' color is hardcoded here!"
           },
-          "name": "token-app-side-nav-wrapper-padding-vertical-minimized",
+          "name": "token-form-select-background-image-data-url-disabled",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "wrapper",
-            "item": "padding",
-            "subitem": "vertical-minimized"
+            "category": "form",
+            "type": "select",
+            "item": "background-image",
+            "subitem": "data-url-disabled"
           },
           "path": [
-            "app-side-nav",
-            "wrapper",
-            "padding",
-            "vertical-minimized"
+            "form",
+            "select",
+            "background-image",
+            "data-url-disabled"
           ]
         }
       }
     },
-    "toggle-button": {
-      "border": {
-        "radius": {
-          "value": "5px",
+    "text-input": {
+      "background-image": {
+        "size": {
+          "value": "16px",
           "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "5",
+            "value": "16",
             "type": "size"
           },
-          "name": "token-app-side-nav-toggle-button-border-radius",
+          "name": "token-form-text-input-background-image-size",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "toggle-button",
-            "item": "border",
-            "subitem": "radius"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "size"
           },
           "path": [
-            "app-side-nav",
-            "toggle-button",
-            "border",
-            "radius"
+            "form",
+            "text-input",
+            "background-image",
+            "size"
           ]
-        }
-      }
-    },
-    "header": {
-      "home-link": {
-        "padding": {
-          "value": "4px",
+        },
+        "position-x": {
+          "value": "7px",
           "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "4",
+            "value": "{form.control.padding.value}",
             "type": "size"
           },
-          "name": "token-app-side-nav-header-home-link-padding",
+          "name": "token-form-text-input-background-image-position-x",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "header",
-            "item": "home-link",
-            "subitem": "padding"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "position-x"
           },
           "path": [
-            "app-side-nav",
-            "header",
-            "home-link",
-            "padding"
+            "form",
+            "text-input",
+            "background-image",
+            "position-x"
           ]
         },
-        "logo-size": {
-          "value": "48px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "data-url-date": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
+          "comment": "notice: the icon color is hardcoded here!",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "48",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e\")",
+            "comment": "notice: the icon color is hardcoded here!"
           },
-          "name": "token-app-side-nav-header-home-link-logo-size",
+          "name": "token-form-text-input-background-image-data-url-date",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "header",
-            "item": "home-link",
-            "subitem": "logo-size"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "data-url-date"
           },
           "path": [
-            "app-side-nav",
-            "header",
-            "home-link",
-            "logo-size"
+            "form",
+            "text-input",
+            "background-image",
+            "data-url-date"
           ]
         },
-        "logo-size-minimized": {
-          "value": "32px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "data-url-time": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+          "comment": "notice: the icon color is hardcoded here!",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "32",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+            "comment": "notice: the icon color is hardcoded here!"
           },
-          "name": "token-app-side-nav-header-home-link-logo-size-minimized",
+          "name": "token-form-text-input-background-image-data-url-time",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "header",
-            "item": "home-link",
-            "subitem": "logo-size-minimized"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "data-url-time"
           },
           "path": [
-            "app-side-nav",
-            "header",
-            "home-link",
-            "logo-size-minimized"
+            "form",
+            "text-input",
+            "background-image",
+            "data-url-time"
           ]
-        }
-      },
-      "actions": {
-        "spacing": {
-          "value": "8px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        },
+        "data-url-search": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+          "comment": "notice: the icon color is hardcoded here!",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "8",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e\")",
+            "comment": "notice: the icon color is hardcoded here!"
           },
-          "name": "token-app-side-nav-header-actions-spacing",
+          "name": "token-form-text-input-background-image-data-url-search",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "header",
-            "item": "actions",
-            "subitem": "spacing"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "data-url-search"
           },
           "path": [
-            "app-side-nav",
-            "header",
-            "actions",
-            "spacing"
+            "form",
+            "text-input",
+            "background-image",
+            "data-url-search"
           ]
-        }
-      }
-    },
-    "body": {
-      "list": {
-        "margin-vertical": {
-          "value": "24px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        },
+        "data-url-search-cancel": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
+          "comment": "notice: the icon color is hardcoded here!",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "24",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e\")",
+            "comment": "notice: the icon color is hardcoded here!"
           },
-          "name": "token-app-side-nav-body-list-margin-vertical",
+          "name": "token-form-text-input-background-image-data-url-search-cancel",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "body",
-            "item": "list",
-            "subitem": "margin-vertical"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "data-url-search-cancel"
           },
           "path": [
-            "app-side-nav",
-            "body",
-            "list",
-            "margin-vertical"
+            "form",
+            "text-input",
+            "background-image",
+            "data-url-search-cancel"
           ]
-        }
-      },
-      "list-item": {
-        "height": {
-          "value": "36px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+        },
+        "data-url-search-loading": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+          "comment": "notice: the icon color and animation are hardcoded here!",
+          "filePath": "src/products/shared/form/text-input.json",
           "isSource": true,
           "original": {
-            "value": "36",
-            "type": "size"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+            "comment": "notice: the icon color and animation are hardcoded here!"
           },
-          "name": "token-app-side-nav-body-list-item-height",
+          "name": "token-form-text-input-background-image-data-url-search-loading",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "body",
-            "item": "list-item",
-            "subitem": "height"
+            "category": "form",
+            "type": "text-input",
+            "item": "background-image",
+            "subitem": "data-url-search-loading"
           },
           "path": [
-            "app-side-nav",
-            "body",
-            "list-item",
-            "height"
+            "form",
+            "text-input",
+            "background-image",
+            "data-url-search-loading"
           ]
+        }
+      }
+    },
+    "toggle": {
+      "width": {
+        "value": "32px",
+        "type": "size",
+        "filePath": "src/products/shared/form/toggle.json",
+        "isSource": true,
+        "original": {
+          "value": "32",
+          "type": "size"
         },
-        "padding": {
-          "horizontal": {
-            "value": "8px",
-            "type": "size",
-            "filePath": "src/products/shared/app-side-nav.json",
-            "isSource": true,
-            "original": {
-              "value": "8",
-              "type": "size"
-            },
-            "name": "token-app-side-nav-body-list-item-padding-horizontal",
-            "attributes": {
-              "category": "app-side-nav",
-              "type": "body",
-              "item": "list-item",
-              "subitem": "padding",
-              "state": "horizontal"
-            },
-            "path": [
-              "app-side-nav",
-              "body",
-              "list-item",
-              "padding",
-              "horizontal"
-            ]
-          },
-          "vertical": {
-            "value": "4px",
-            "type": "size",
-            "filePath": "src/products/shared/app-side-nav.json",
+        "name": "token-form-toggle-width",
+        "attributes": {
+          "category": "form",
+          "type": "toggle",
+          "item": "width"
+        },
+        "path": [
+          "form",
+          "toggle",
+          "width"
+        ]
+      },
+      "height": {
+        "value": "16px",
+        "type": "size",
+        "filePath": "src/products/shared/form/toggle.json",
+        "isSource": true,
+        "original": {
+          "value": "16",
+          "type": "size"
+        },
+        "name": "token-form-toggle-height",
+        "attributes": {
+          "category": "form",
+          "type": "toggle",
+          "item": "height"
+        },
+        "path": [
+          "form",
+          "toggle",
+          "height"
+        ]
+      },
+      "base": {
+        "surface-color": {
+          "default": {
+            "value": "#f1f2f3",
+            "type": "color",
+            "group": "components",
+            "comment": "the toggle has a different base surface color, compared to the other controls",
+            "filePath": "src/products/shared/form/toggle.json",
             "isSource": true,
             "original": {
-              "value": "4",
-              "type": "size"
+              "value": "{color.surface.strong.value}",
+              "type": "color",
+              "group": "components",
+              "comment": "the toggle has a different base surface color, compared to the other controls"
             },
-            "name": "token-app-side-nav-body-list-item-padding-vertical",
+            "name": "token-form-toggle-base-surface-color-default",
             "attributes": {
-              "category": "app-side-nav",
-              "type": "body",
-              "item": "list-item",
-              "subitem": "padding",
-              "state": "vertical"
+              "category": "form",
+              "type": "toggle",
+              "item": "base",
+              "subitem": "surface-color",
+              "state": "default"
             },
             "path": [
-              "app-side-nav",
-              "body",
-              "list-item",
-              "padding",
-              "vertical"
+              "form",
+              "toggle",
+              "base",
+              "surface-color",
+              "default"
             ]
           }
-        },
-        "spacing-vertical": {
-          "value": "2px",
-          "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
-          "isSource": true,
-          "original": {
-            "value": "2",
-            "type": "size"
-          },
-          "name": "token-app-side-nav-body-list-item-spacing-vertical",
-          "attributes": {
-            "category": "app-side-nav",
-            "type": "body",
-            "item": "list-item",
-            "subitem": "spacing-vertical"
-          },
-          "path": [
-            "app-side-nav",
-            "body",
-            "list-item",
-            "spacing-vertical"
-          ]
-        },
-        "content-spacing-horizontal": {
-          "value": "8px",
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "3px",
           "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "8",
+            "value": "3",
             "type": "size"
           },
-          "name": "token-app-side-nav-body-list-item-content-spacing-horizontal",
+          "name": "token-form-toggle-border-radius",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "body",
-            "item": "list-item",
-            "subitem": "content-spacing-horizontal"
+            "category": "form",
+            "type": "toggle",
+            "item": "border",
+            "subitem": "radius"
           },
           "path": [
-            "app-side-nav",
-            "body",
-            "list-item",
-            "content-spacing-horizontal"
+            "form",
+            "toggle",
+            "border",
+            "radius"
           ]
         },
-        "border-radius": {
-          "value": "5px",
+        "width": {
+          "value": "1px",
           "type": "size",
-          "filePath": "src/products/shared/app-side-nav.json",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "5",
+            "value": "1",
             "type": "size"
           },
-          "name": "token-app-side-nav-body-list-item-border-radius",
+          "name": "token-form-toggle-border-width",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "body",
-            "item": "list-item",
-            "subitem": "border-radius"
+            "category": "form",
+            "type": "toggle",
+            "item": "border",
+            "subitem": "width"
           },
           "path": [
-            "app-side-nav",
-            "body",
-            "list-item",
-            "border-radius"
+            "form",
+            "toggle",
+            "border",
+            "width"
           ]
         }
-      }
-    },
-    "color": {
-      "foreground": {
-        "primary": {
-          "value": "var(--token-color-foreground-primary)",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/app-side-nav.json",
+      },
+      "background-image": {
+        "size": {
+          "value": "12px",
+          "type": "size",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-foreground-primary)",
-            "type": "color",
-            "group": "components"
+            "value": "12",
+            "type": "size"
           },
-          "name": "token-app-side-nav-color-foreground-primary",
+          "name": "token-form-toggle-background-image-size",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "color",
-            "item": "foreground",
-            "subitem": "primary"
+            "category": "form",
+            "type": "toggle",
+            "item": "background-image",
+            "subitem": "size"
           },
           "path": [
-            "app-side-nav",
-            "color",
-            "foreground",
-            "primary"
+            "form",
+            "toggle",
+            "background-image",
+            "size"
           ]
         },
-        "strong": {
-          "value": "var(--token-color-foreground-primary)",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "position-x": {
+          "value": "2px",
+          "type": "size",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-foreground-primary)",
-            "type": "color",
-            "group": "components"
+            "value": "2",
+            "type": "size"
           },
-          "name": "token-app-side-nav-color-foreground-strong",
+          "name": "token-form-toggle-background-image-position-x",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "color",
-            "item": "foreground",
-            "subitem": "strong"
+            "category": "form",
+            "type": "toggle",
+            "item": "background-image",
+            "subitem": "position-x"
           },
           "path": [
-            "app-side-nav",
-            "color",
-            "foreground",
-            "strong"
+            "form",
+            "toggle",
+            "background-image",
+            "position-x"
           ]
         },
-        "faint": {
-          "value": "var(--token-color-foreground-faint)",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "data-url": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'tick' color is hardcoded here!",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-foreground-faint)",
-            "type": "color",
-            "group": "components"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'tick' color is hardcoded here!"
           },
-          "name": "token-app-side-nav-color-foreground-faint",
+          "name": "token-form-toggle-background-image-data-url",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "color",
-            "item": "foreground",
-            "subitem": "faint"
+            "category": "form",
+            "type": "toggle",
+            "item": "background-image",
+            "subitem": "data-url"
           },
           "path": [
-            "app-side-nav",
-            "color",
-            "foreground",
-            "faint"
+            "form",
+            "toggle",
+            "background-image",
+            "data-url"
           ]
-        }
-      },
-      "surface": {
-        "primary": {
-          "value": "var(--token-color-surface-faint)",
-          "type": "color",
-          "group": "components",
-          "filePath": "src/products/shared/app-side-nav.json",
+        },
+        "data-url-disabled": {
+          "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+          "comment": "notice: the 'tick' color is hardcoded here!",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-surface-faint)",
-            "type": "color",
-            "group": "components"
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
+            "comment": "notice: the 'tick' color is hardcoded here!"
           },
-          "name": "token-app-side-nav-color-surface-primary",
+          "name": "token-form-toggle-background-image-data-url-disabled",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "color",
-            "item": "surface",
-            "subitem": "primary"
+            "category": "form",
+            "type": "toggle",
+            "item": "background-image",
+            "subitem": "data-url-disabled"
           },
           "path": [
-            "app-side-nav",
-            "color",
-            "surface",
-            "primary"
+            "form",
+            "toggle",
+            "background-image",
+            "data-url-disabled"
           ]
-        },
-        "interactive-hover": {
-          "value": "var(--token-color-surface-interactive-hover)",
-          "type": "color",
-          "group": "semantic",
-          "filePath": "src/products/shared/app-side-nav.json",
+        }
+      },
+      "transition": {
+        "duration": {
+          "value": "0.2s",
+          "type": "time",
+          "unit": "s",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-surface-interactive-hover)",
-            "type": "color",
-            "group": "semantic"
+            "value": "0.2",
+            "type": "time",
+            "unit": "s"
           },
-          "name": "token-app-side-nav-color-surface-interactive-hover",
+          "name": "token-form-toggle-transition-duration",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "color",
-            "item": "surface",
-            "subitem": "interactive-hover"
+            "category": "form",
+            "type": "toggle",
+            "item": "transition",
+            "subitem": "duration"
           },
           "path": [
-            "app-side-nav",
-            "color",
-            "surface",
-            "interactive-hover"
+            "form",
+            "toggle",
+            "transition",
+            "duration"
           ]
         },
-        "interactive-active": {
-          "value": "var(--token-color-palette-neutral-300)",
-          "type": "color",
-          "group": "semantic",
-          "filePath": "src/products/shared/app-side-nav.json",
+        "timing-function": {
+          "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)",
+          "filePath": "src/products/shared/form/toggle.json",
           "isSource": true,
           "original": {
-            "value": "var(--token-color-palette-neutral-300)",
-            "type": "color",
-            "group": "semantic"
+            "value": "cubic-bezier(0.68, -0.2, 0.265, 1.15)"
           },
-          "name": "token-app-side-nav-color-surface-interactive-active",
+          "name": "token-form-toggle-transition-timing-function",
           "attributes": {
-            "category": "app-side-nav",
-            "type": "color",
-            "item": "surface",
-            "subitem": "interactive-active"
+            "category": "form",
+            "type": "toggle",
+            "item": "transition",
+            "subitem": "timing-function"
           },
           "path": [
-            "app-side-nav",
-            "color",
-            "surface",
-            "interactive-active"
+            "form",
+            "toggle",
+            "transition",
+            "timing-function"
           ]
         }
+      },
+      "thumb-size": {
+        "value": "16px",
+        "type": "size",
+        "filePath": "src/products/shared/form/toggle.json",
+        "isSource": true,
+        "original": {
+          "value": "{form.toggle.height.value}",
+          "type": "size"
+        },
+        "name": "token-form-toggle-thumb-size",
+        "attributes": {
+          "category": "form",
+          "type": "toggle",
+          "item": "thumb-size"
+        },
+        "path": [
+          "form",
+          "toggle",
+          "thumb-size"
+        ]
       }
     }
   },
@@ -7739,7 +7739,7 @@
           ]
         },
         "strong": {
-          "value": "#fff",
+          "value": "#ffffff",
           "type": "color",
           "group": "components",
           "filePath": "src/products/shared/side-nav.json",
diff --git a/packages/tokens/dist/products/css/helpers/color.css b/packages/tokens/dist/products/css/helpers/color.css
index 36bea37b6a..9dd87a49f3 100644
--- a/packages/tokens/dist/products/css/helpers/color.css
+++ b/packages/tokens/dist/products/css/helpers/color.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-border-primary { border: 1px solid var(--token-color-border-primary); }
diff --git a/packages/tokens/dist/products/css/helpers/elevation.css b/packages/tokens/dist/products/css/helpers/elevation.css
index c95f4ed054..c7a86b7cba 100644
--- a/packages/tokens/dist/products/css/helpers/elevation.css
+++ b/packages/tokens/dist/products/css/helpers/elevation.css
@@ -1,13 +1,12 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
-.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
-.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
 .hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
 .hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
+.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
+.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
 .hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
 .hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }
diff --git a/packages/tokens/dist/products/css/helpers/focus-ring.css b/packages/tokens/dist/products/css/helpers/focus-ring.css
index e9946a6735..57e7b9dee5 100644
--- a/packages/tokens/dist/products/css/helpers/focus-ring.css
+++ b/packages/tokens/dist/products/css/helpers/focus-ring.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }
diff --git a/packages/tokens/dist/products/css/helpers/typography.css b/packages/tokens/dist/products/css/helpers/typography.css
index 76a7605cc4..393b890090 100644
--- a/packages/tokens/dist/products/css/helpers/typography.css
+++ b/packages/tokens/dist/products/css/helpers/typography.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }
diff --git a/packages/tokens/dist/products/css/tokens.css b/packages/tokens/dist/products/css/tokens.css
index d4783b52a9..4b00c8a9d4 100644
--- a/packages/tokens/dist/products/css/tokens.css
+++ b/packages/tokens/dist/products/css/tokens.css
@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 20 Sep 2024 19:02:21 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
@@ -178,11 +177,11 @@
   --token-color-waypoint-gradient-primary-stop: #62d4dc;
   --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
   --token-color-waypoint-gradient-faint-stop: #e0fcff;
-  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
-  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
   --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
+  --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
+  --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
   --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
   --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
@@ -193,6 +192,47 @@
   --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
   --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
+  --token-app-header-height: 60px;
+  --token-app-header-home-link-size: 36px;
+  --token-app-header-logo-size: 28px;
+  --token-app-side-nav-wrapper-border-width: 1px;
+  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
+  --token-app-side-nav-wrapper-padding-horizontal: 16px;
+  --token-app-side-nav-wrapper-padding-vertical: 16px;
+  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
+  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
+  --token-app-side-nav-toggle-button-border-radius: 5px;
+  --token-app-side-nav-header-home-link-padding: 4px;
+  --token-app-side-nav-header-home-link-logo-size: 48px;
+  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
+  --token-app-side-nav-header-actions-spacing: 8px;
+  --token-app-side-nav-body-list-margin-vertical: 24px;
+  --token-app-side-nav-body-list-item-height: 36px;
+  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
+  --token-app-side-nav-body-list-item-padding-vertical: 4px;
+  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
+  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
+  --token-app-side-nav-body-list-item-border-radius: 5px;
+  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
+  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
+  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
+  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
+  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
+  --token-form-label-color: #0c0c0e;
+  --token-form-legend-color: #0c0c0e;
+  --token-form-helper-text-color: #656a76;
+  --token-form-indicator-optional-color: #656a76;
+  --token-form-error-color: #c00005;
+  --token-form-error-icon-size: 14px;
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+  --token-form-checkbox-border-width: 1px;
+  --token-form-checkbox-background-image-size: 12px;
+  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -215,20 +255,6 @@
   --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
   --token-form-control-border-radius: 5px;
   --token-form-control-border-width: 1px;
-  --token-form-label-color: #0c0c0e;
-  --token-form-legend-color: #0c0c0e;
-  --token-form-helper-text-color: #656a76;
-  --token-form-indicator-optional-color: #656a76;
-  --token-form-error-color: #c00005;
-  --token-form-error-icon-size: 14px;
-  --token-form-checkbox-size: 16px;
-  --token-form-checkbox-border-radius: 3px;
-  --token-form-checkbox-border-width: 1px;
-  --token-form-checkbox-background-image-size: 12px;
-  --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
-  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-radio-size: 16px;
   --token-form-radio-border-width: 1px;
   --token-form-radio-background-image-size: 12px;
@@ -264,33 +290,6 @@
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
-  --token-app-header-height: 60px;
-  --token-app-header-home-link-size: 36px;
-  --token-app-header-logo-size: 28px;
-  --token-app-side-nav-wrapper-border-width: 1px;
-  --token-app-side-nav-wrapper-border-color: var(--token-color-palette-neutral-200);
-  --token-app-side-nav-wrapper-padding-horizontal: 16px;
-  --token-app-side-nav-wrapper-padding-vertical: 16px;
-  --token-app-side-nav-wrapper-padding-horizontal-minimized: 8px;
-  --token-app-side-nav-wrapper-padding-vertical-minimized: 22px;
-  --token-app-side-nav-toggle-button-border-radius: 5px;
-  --token-app-side-nav-header-home-link-padding: 4px;
-  --token-app-side-nav-header-home-link-logo-size: 48px;
-  --token-app-side-nav-header-home-link-logo-size-minimized: 32px;
-  --token-app-side-nav-header-actions-spacing: 8px;
-  --token-app-side-nav-body-list-margin-vertical: 24px;
-  --token-app-side-nav-body-list-item-height: 36px;
-  --token-app-side-nav-body-list-item-padding-horizontal: 8px;
-  --token-app-side-nav-body-list-item-padding-vertical: 4px;
-  --token-app-side-nav-body-list-item-spacing-vertical: 2px;
-  --token-app-side-nav-body-list-item-content-spacing-horizontal: 8px;
-  --token-app-side-nav-body-list-item-border-radius: 5px;
-  --token-app-side-nav-color-foreground-primary: var(--token-color-foreground-primary);
-  --token-app-side-nav-color-foreground-strong: var(--token-color-foreground-primary);
-  --token-app-side-nav-color-foreground-faint: var(--token-color-foreground-faint);
-  --token-app-side-nav-color-surface-primary: var(--token-color-surface-faint);
-  --token-app-side-nav-color-surface-interactive-hover: var(--token-color-surface-interactive-hover);
-  --token-app-side-nav-color-surface-interactive-active: var(--token-color-palette-neutral-300);
   --token-pagination-nav-control-height: 36px;
   --token-pagination-nav-control-padding-horizontal: 12px;
   --token-pagination-nav-control-focus-inset: 4px;
@@ -318,7 +317,7 @@
   --token-side-nav-body-list-item-content-spacing-horizontal: 8px;
   --token-side-nav-body-list-item-border-radius: 5px;
   --token-side-nav-color-foreground-primary: #dedfe3;
-  --token-side-nav-color-foreground-strong: #fff;
+  --token-side-nav-color-foreground-strong: #ffffff;
   --token-side-nav-color-foreground-faint: #8c909c;
   --token-side-nav-color-surface-primary: #0c0c0e;
   --token-side-nav-color-surface-interactive-hover: #3b3d45;