diff --git a/package-lock.json b/package-lock.json
index 5b0907c..fc47657 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,25 +9,26 @@
       "version": "1.0.0",
       "license": "UNLICENSED",
       "devDependencies": {
-        "@openedx/paragon": "22.0.0-alpha.25"
+        "@openedx/paragon": "file:../paragon/openedx-paragon-20.18.1.tgz",
+        "nodemon": "^3.1.4"
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz",
+      "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==",
       "dev": true,
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/runtime-corejs3": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.24.5.tgz",
-      "integrity": "sha512-GWO0mgzNMLWaSYM4z4NVIuY0Cd1fl8cPnuetuddu5w/qGuvt5Y7oUi/kvvQGK9xgOkFJDQX2heIvTRn/OQ1XTg==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.25.6.tgz",
+      "integrity": "sha512-Gz0Nrobx8szge6kQQ5Z5MX9L3ObqNwCQY1PSwSNzreFL7aHGxv8Fp2j3ETV6/wWdbiV+mW6OSm8oQhg3Tcsniw==",
       "dev": true,
       "dependencies": {
         "core-js-pure": "^3.30.2",
@@ -37,33 +38,205 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/runtime-corejs3/node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+    "node_modules/@bundled-es-modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==",
+      "dev": true,
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "glob": "^10.4.2",
+        "patch-package": "^8.0.0",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "string_decoder": "^1.3.0",
+        "url": "^0.11.3"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz",
+      "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==",
+      "dev": true,
+      "dependencies": {
+        "assert": "^2.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "memfs": "^4.9.3",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "util": "^0.12.5"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/postcss-calc-ast-parser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz",
+      "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-calc-ast-parser": "^0.1.4"
+      }
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
+      "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
+      "dev": true,
+      "dependencies": {
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
+      "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
+      "dev": true,
+      "dependencies": {
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/regexp-to-ast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
+      "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
+      "dev": true
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
+      "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
+      "dev": true
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
+      "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
       "dev": true
     },
     "node_modules/@csstools/cascade-layer-name-parser": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.2.tgz",
-      "integrity": "sha512-xm7Mgwej/wBfLoK0K5LfntmPJzoULayl1XZY9JYgQgT29JiqNw++sLnx95u5y9zCihblzkyaRYJrsRMhIBzRdg==",
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.13.tgz",
+      "integrity": "sha512-MX0yLTwtZzr82sQ0zOjqimpZbzjMaK/h2pmlrLK7DCzlmiZLYFpoO94WmN1akRVo6ll/TdpHb53vihHLUMyvng==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
       "engines": {
         "node": "^14 || ^16 || >=18"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.1.1",
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.2.0.tgz",
-      "integrity": "sha512-9BoQ/jSrPq4vv3b9jjLW+PNNv56KlDH5JMx5yASSNrCtvq70FCNZUjXRvbCeR9hYj9ZyhURtqpU/RFIgg6kiOw==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz",
+      "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==",
       "dev": true,
       "funding": [
         {
@@ -79,26 +252,32 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
-      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz",
+      "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
       "engines": {
         "node": "^14 || ^16 || >=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.0.tgz",
-      "integrity": "sha512-MXkR+TeaS2q9IkpyO6jVCdtA/bfpABJxIrfkLswThFN8EZZgI2RfAHhm6sDNDuYV25d5+b8Lj1fpTccIcSLPsQ==",
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz",
+      "integrity": "sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==",
       "dev": true,
       "funding": [
         {
@@ -114,71 +293,71 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.1.1",
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
     "node_modules/@formatjs/ecma402-abstract": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
-      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
+      "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "version": "2.7.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
+      "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-skeleton-parser": "1.8.2",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
+      "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@formatjs/intl": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
-      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.10.4.tgz",
+      "integrity": "sha512-56483O+HVcL0c7VucAS2tyH020mt9XTozZO67cwtGg0a7KWDukS/FzW3OnvaHmTHDuYsoPIzO+ZHVfU6fT/bJw==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "@formatjs/intl-displaynames": "6.6.8",
+        "@formatjs/intl-listformat": "7.5.7",
+        "intl-messageformat": "10.5.14",
+        "tslib": "^2.4.0"
       },
       "peerDependencies": {
-        "typescript": "^4.5"
+        "typescript": "^4.7 || 5"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -187,46 +366,204 @@
       }
     },
     "node_modules/@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.6.8",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.6.8.tgz",
+      "integrity": "sha512-Lgx6n5KxN16B3Pb05z3NLEBQkGoXnGjkTBNCZI+Cn17YjHJ3fhCeEJJUqRlIZmJdmaXQhjcQVDp6WIiNeRYT5g==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.5.7.tgz",
+      "integrity": "sha512-MG2TSChQJQT9f7Rlv+eXwUFiG24mKSzmF144PLb8m8OixyXqn4+YWU+5wZracZGCgVTVmx8viCf7IH3QXoiB2g==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.2.25",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
-      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
+      "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@openedx/paragon": {
-      "version": "22.0.0-alpha.25",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.0.0-alpha.25.tgz",
-      "integrity": "sha512-Eml6g8u3+HHnji7MWaeqD1OjoedKTFb/xpNjz3HI+MZohfVHwUTs6hUSim41WWlclYk72XGZ5BRDNm+kK2p3xA==",
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@jsonjoy.com/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pack": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz",
+      "integrity": "sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==",
       "dev": true,
+      "dependencies": {
+        "@jsonjoy.com/base64": "^1.1.1",
+        "@jsonjoy.com/util": "^1.1.2",
+        "hyperdyperid": "^1.2.0",
+        "thingies": "^1.20.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/util": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.3.0.tgz",
+      "integrity": "sha512-Cebt4Vk7k1xHy87kHY7KSPLT77A7Ev7IfOblyLZhtYEhrdQ6fX4EoLq3xOQ3O/DRMEh2ok5nyC180E+ABS8Wmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@openedx/paragon": {
+      "version": "20.18.1",
+      "resolved": "file:../paragon/openedx-paragon-20.18.1.tgz",
+      "integrity": "sha512-Uw88lDyMcexdjSviGhvf3EJ1QomrqLFlbaLD+4Mn6V9E1zofZyL0IBmUfymJqzqMhi9VrunNGQo91WyGudvSPQ==",
+      "dev": true,
+      "workspaces": [
+        "example",
+        "component-generator",
+        "www",
+        "icons",
+        "dependent-usage-analyzer"
+      ],
       "dependencies": {
         "@popperjs/core": "^2.11.4",
+        "@tokens-studio/sd-transforms": "^1.2.4",
         "axios": "^0.27.2",
         "bootstrap": "^4.6.2",
         "chalk": "^4.1.2",
@@ -239,6 +576,7 @@
         "file-selector": "^0.6.0",
         "glob": "^8.0.3",
         "inquirer": "^8.2.5",
+        "js-toml": "^1.0.0",
         "lodash.uniqby": "^4.7.0",
         "log-update": "^4.0.0",
         "mailto-link": "^2.0.0",
@@ -263,7 +601,7 @@
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
         "sass": "^1.58.3",
-        "style-dictionary": "^3.7.1",
+        "style-dictionary": "^4.0.1",
         "tabbable": "^5.3.3",
         "uncontrollable": "^7.2.1",
         "uuid": "^9.0.0"
@@ -277,10 +615,20 @@
         "react-intl": "^5.25.1 || ^6.4.0"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -297,21 +645,47 @@
       }
     },
     "node_modules/@restart/hooks": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
-      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
       "dev": true,
       "dependencies": {
-        "dequal": "^2.0.2"
+        "dequal": "^2.0.3"
       },
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@tokens-studio/sd-transforms": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.2.4.tgz",
+      "integrity": "sha512-Blf7Y5D7uieRBTcmyrFxZ/oEB7OYAa/Ns7DJU4/fyV69pvm7DC3K3zHxrFwHSRcoa7C/dFoF3p3AgohkdXzjfA==",
+      "dev": true,
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
+        "@tokens-studio/types": "^0.5.1",
+        "colorjs.io": "^0.4.3",
+        "expr-eval-fork": "^2.0.2",
+        "is-mergeable-object": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "style-dictionary": "^4.0.1"
+      }
+    },
+    "node_modules/@tokens-studio/types": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.1.tgz",
+      "integrity": "sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA==",
+      "dev": true
+    },
     "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
-      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -320,49 +694,59 @@
       }
     },
     "node_modules/@types/invariant": {
-      "version": "2.2.35",
-      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
-      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==",
+      "version": "2.2.37",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.37.tgz",
+      "integrity": "sha512-IwpIMieE55oGWiXkQPSBY1nw1nFs6bsKXTFskNY8sdS17K24vyEBRQZEwlRS7ZmXCWnJcQtbxWzly+cODWGs2A==",
       "dev": true
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.0.34",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.34.tgz",
-      "integrity": "sha512-NO1UO8941541CJl1BeOXi8a9dNKFK09Gnru5ZJqkm4Q3/WoQJtHvmwt0VX0SB9YCEwe7TfSSxDuaNmx6H2BAIQ==",
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
+      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
       "dev": true
     },
-    "node_modules/@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==",
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
       "dev": true
     },
+    "node_modules/@zip.js/zip.js": {
+      "version": "2.7.52",
+      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.52.tgz",
+      "integrity": "sha512-+5g7FQswvrCHwYKNMd/KFxZSObctLSsQOgqBSi0LzwHo3li9Eh1w5cF5ndjQw9Zbr3ajVnd2+XyiX85gAetx1Q==",
+      "dev": true,
+      "engines": {
+        "bun": ">=0.7.0",
+        "deno": ">=1.0.0",
+        "node": ">=16.5.0"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -425,9 +809,9 @@
       }
     },
     "node_modules/aria-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
-      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.0.0"
@@ -436,6 +820,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/assert": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
+      }
+    },
     "node_modules/assert-ok": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-ok/-/assert-ok-1.0.0.tgz",
@@ -457,6 +854,15 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/attr-accept": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
@@ -466,6 +872,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -503,12 +924,15 @@
       ]
     },
     "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "dev": true,
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/bl": {
@@ -552,12 +976,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -587,25 +1011,23 @@
         "ieee754": "^1.1.13"
       }
     },
-    "node_modules/camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dev": true,
-      "dependencies": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/capital-case": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
-      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3",
-        "upper-case-first": "^2.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/cast-array": {
@@ -634,24 +1056,10 @@
       }
     },
     "node_modules/change-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
-      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
-      "dev": true,
-      "dependencies": {
-        "camel-case": "^4.1.2",
-        "capital-case": "^1.0.4",
-        "constant-case": "^3.0.4",
-        "dot-case": "^3.0.4",
-        "header-case": "^2.0.4",
-        "no-case": "^3.0.4",
-        "param-case": "^3.0.4",
-        "pascal-case": "^3.1.2",
-        "path-case": "^3.0.4",
-        "sentence-case": "^3.0.4",
-        "snake-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
+      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
+      "dev": true
     },
     "node_modules/chardet": {
       "version": "0.7.0",
@@ -659,6 +1067,20 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chevrotain": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
+      "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
+      "dev": true,
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "11.0.3",
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/regexp-to-ast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "@chevrotain/utils": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
     "node_modules/child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -666,16 +1088,10 @@
       "dev": true
     },
     "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -688,20 +1104,38 @@
       "engines": {
         "node": ">= 8.10.0"
       },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       }
     },
     "node_modules/chroma-js": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
-      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz",
+      "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==",
       "dev": true
     },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
       "dev": true
     },
     "node_modules/cli-cursor": {
@@ -776,6 +1210,12 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/colorjs.io": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz",
+      "integrity": "sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==",
+      "dev": true
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -797,27 +1237,28 @@
         "node": "^12.20.0 || >=14"
       }
     },
+    "node_modules/component-emitter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
+      "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
-    "node_modules/constant-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
-      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
-      "dev": true,
-      "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3",
-        "upper-case": "^2.0.2"
-      }
-    },
     "node_modules/core-js-pure": {
-      "version": "3.37.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.37.0.tgz",
-      "integrity": "sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.38.1.tgz",
+      "integrity": "sha512-BY8Etc1FZqdw1glX0XNOq2FDwfrg/VGqoZOZCdaL+UmdaqDwQwYXkMJT4t6In+zfEfOJDcM9T0KdbBeJg8KKCQ==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -825,6 +1266,20 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/css-mediaquery": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
@@ -844,11 +1299,28 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "dev": true
     },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/decode-uri-component": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -858,6 +1330,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -870,6 +1351,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -904,15 +1419,11 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
-      "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
     },
     "node_modules/email-prop-type": {
       "version": "3.0.1",
@@ -938,6 +1449,27 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -960,6 +1492,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/expr-eval-fork": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz",
+      "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ==",
+      "dev": true
+    },
     "node_modules/external-editor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -1002,9 +1549,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -1022,10 +1569,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dev": true,
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/focus-lock": {
-      "version": "0.11.6",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.11.6.tgz",
-      "integrity": "sha512-KSuV3ur4gf2KqMNoZx3nXNVhqCkn42GuTYCX4tXPEwf0MjpFQmNMiN6m7dXaUXgIoivL6/65agoUMg4RLS0Vbg==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.5.tgz",
+      "integrity": "sha512-QFaHbhv9WPUeLYBDe/PAuLKJ4Dd9OPvKs9xZBr3yLXnUrDNaVXKu2baDBXe3naPY30hgHYSsf2JW4jzas2mDEQ==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.0.3"
@@ -1035,9 +1591,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
       "dev": true,
       "funding": [
         {
@@ -1054,6 +1610,43 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -1069,17 +1662,18 @@
       }
     },
     "node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "dev": true,
       "dependencies": {
+        "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
         "universalify": "^2.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
       }
     },
     "node_modules/fs.realpath": {
@@ -1089,9 +1683,9 @@
       "dev": true
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
       "optional": true,
@@ -1103,10 +1697,32 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/get-nonce": {
       "version": "1.0.1",
@@ -1121,6 +1737,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
       "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -1148,41 +1765,94 @@
         "node": ">= 6"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1"
+        "es-define-property": "^1.0.0"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
       "engines": {
-        "node": ">= 0.4.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
       "dev": true,
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/header-case": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
-      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
       "dependencies": {
-        "capital-case": "^1.0.4",
-        "tslib": "^2.0.3"
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/hoist-non-react-statics": {
@@ -1195,10 +1865,19 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.18"
+      }
+    },
     "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
       "dev": true
     },
     "node_modules/iconv-lite": {
@@ -1233,10 +1912,16 @@
         }
       ]
     },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true
+    },
     "node_modules/imask": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/imask/-/imask-7.6.0.tgz",
-      "integrity": "sha512-6EHsq1q7v5+M4Vas2MGrs2oRpxPRWPwPDiL0HmG1ikBI/0hOwvkxRhVRFQnWIlZcTG7R8iw0az5V+z868qnQ9A==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/imask/-/imask-7.6.1.tgz",
+      "integrity": "sha512-sJlIFM7eathUEMChTh9Mrfw/IgiWgJqBKq2VNbyXvBZ7ev/IlO6/KQTKlV/Fm+viQMLrFLG/zCuudrLIwgK2dg==",
       "dev": true,
       "dependencies": {
         "@babel/runtime-corejs3": "^7.24.4"
@@ -1246,15 +1931,16 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
       "dev": true
     },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
       "dev": true,
       "dependencies": {
         "once": "^1.3.0",
@@ -1294,16 +1980,16 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
-      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "version": "10.5.14",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
+      "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/invariant": {
@@ -1315,6 +2001,22 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1327,18 +2029,48 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-core-module": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
-      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
       "dev": true,
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1357,6 +2089,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -1378,6 +2125,28 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-mergeable-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz",
+      "integrity": "sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==",
+      "dev": true
+    },
+    "node_modules/is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -1387,6 +2156,33 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "dev": true,
+      "dependencies": {
+        "which-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -1399,16 +2195,49 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
       "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
       "dev": true
     },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jquery": {
-      "version": "3.6.4",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz",
-      "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
       "dev": true,
       "peer": true
     },
@@ -1418,6 +2247,16 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "node_modules/js-toml": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/js-toml/-/js-toml-1.0.0.tgz",
+      "integrity": "sha512-G757004huuG5Cjg8KUoVTS4zNRR4449KG8kjtFQS0yyQnceq3KfxcArThcqUV2cwdpd0C9I+e1WciK3Xm4cWJw==",
+      "dev": true,
+      "dependencies": {
+        "chevrotain": "^11.0.3",
+        "xregexp": "^5.1.1"
+      }
+    },
     "node_modules/js-yaml": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
@@ -1431,6 +2270,30 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz",
+      "integrity": "sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/json-stable-stringify/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -1443,22 +2306,34 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
-      "dev": true
-    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dev": true,
       "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
       }
     },
     "node_modules/lodash": {
@@ -1467,6 +2342,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "node_modules/lodash.uniqby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
@@ -1519,14 +2400,11 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lower-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.3"
-      }
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
     },
     "node_modules/mailto-link": {
       "version": "2.0.0",
@@ -1552,6 +2430,38 @@
         "css-mediaquery": "^0.1.2"
       }
     },
+    "node_modules/memfs": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.11.1.tgz",
+      "integrity": "sha512-LZcMTBAgqUUKNXZagcZxvXXfgF1bHX7Y7nQ0QyEiNbRJgE29GhgPd8Yna1VQcLlPiHt/5RFJMWYN9Uv/VPNvjQ==",
+      "dev": true,
+      "dependencies": {
+        "@jsonjoy.com/json-pack": "^1.0.3",
+        "@jsonjoy.com/util": "^1.3.0",
+        "tree-dump": "^1.0.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1603,6 +2513,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -1610,9 +2535,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "dev": true,
       "funding": [
         {
@@ -1627,14 +2552,75 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/no-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+    "node_modules/nodemon": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.4.tgz",
+      "integrity": "sha512-wjPBbFhtpJwmIeY2yP7QF+UKzPfltVGtfce1g/bB15/8vCGZj8uxD62b/b9M9/WVgme0NZudpownKN+c0plXlQ==",
       "dev": true,
       "dependencies": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
       }
     },
     "node_modules/normalize-path": {
@@ -1661,6 +2647,61 @@
       "integrity": "sha512-NahvP2vZcy1ZiiYah30CEPw0FpDcSkSePJBMpzl5EQgCmISijiGuJm3SPYp7U+Lf2TljyaIw3E5EgkEx/TNEVA==",
       "dev": true
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1685,6 +2726,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -1717,34 +2774,50 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/param-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "dev": true,
-      "dependencies": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+      "dev": true
     },
-    "node_modules/pascal-case": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+    "node_modules/patch-package": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
+      "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
       "dev": true,
       "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
       }
     },
-    "node_modules/path-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
-      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
       "dev": true,
       "dependencies": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
+        "process": "^0.11.1",
+        "util": "^0.10.3"
       }
     },
     "node_modules/path-is-absolute": {
@@ -1756,16 +2829,62 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-unified": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.1.0.tgz",
+      "integrity": "sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg==",
+      "dev": true
+    },
+    "node_modules/path/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+      "dev": true
+    },
+    "node_modules/path/node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "dev": true
     },
     "node_modules/picomatch": {
@@ -1801,10 +2920,19 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "dev": true,
       "funding": [
         {
@@ -1821,14 +2949,26 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-calc-ast-parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz",
+      "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^3.3.1"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/postcss-combine-duplicated-selectors": {
       "version": "10.0.3",
       "resolved": "https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz",
@@ -1845,9 +2985,9 @@
       }
     },
     "node_modules/postcss-custom-media": {
-      "version": "9.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.4.tgz",
-      "integrity": "sha512-4A7WEG3iIyKwfpxL5bkuSlHoHHGRTHl0212Z3uvpwJPyVfZJlkZAQNNgVC+oogrJgksDnfKyuuMbG6HafZPW8Q==",
+      "version": "9.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz",
+      "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==",
       "dev": true,
       "funding": [
         {
@@ -1861,9 +3001,9 @@
       ],
       "dependencies": {
         "@csstools/cascade-layer-name-parser": "^1.0.2",
-        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-parser-algorithms": "^2.2.0",
         "@csstools/css-tokenizer": "^2.1.1",
-        "@csstools/media-query-list-parser": "^2.1.0"
+        "@csstools/media-query-list-parser": "^2.1.1"
       },
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -1889,6 +3029,12 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-import/node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/postcss-map": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/postcss-map/-/postcss-map-0.11.0.tgz",
@@ -1939,10 +3085,16 @@
         "postcss": "^8.0"
       }
     },
+    "node_modules/postcss-minify/node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -1953,11 +3105,20 @@
       }
     },
     "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -1982,6 +3143,33 @@
         "react": ">=0.14.0"
       }
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true
+    },
+    "node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+      "dev": true
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/query-string": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
@@ -2015,9 +3203,9 @@
       }
     },
     "node_modules/react-bootstrap": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.6.tgz",
-      "integrity": "sha512-pSzYyJT5u4rc8+5myM8Vid2JG52L8AmYSkpznReH/GM4+FhLqEnxUa0+6HRTaGwjdEixQNGchwY+b3xCdYWrDA==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.8.tgz",
+      "integrity": "sha512-yD6uN78XlFOkETQp6GRuVe0s5509x3XYx8PfPbirwFTYCj5/RfmSs9YZGCwkUrhZNFzj7tZPdpb+3k50mK1E4g==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.14.0",
@@ -2098,22 +3286,22 @@
       }
     },
     "node_modules/react-fast-compare": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
-      "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
       "dev": true
     },
     "node_modules/react-focus-lock": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.9.4.tgz",
-      "integrity": "sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==",
+      "version": "2.13.2",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.13.2.tgz",
+      "integrity": "sha512-T/7bsofxYqnod2xadvuwjGKHOoL5GH7/EIPI5UyEvaU/c2CcphvGI371opFtuY/SYdbMsNiuF4HsHQ50nA/TKQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.11.6",
+        "focus-lock": "^1.3.5",
         "prop-types": "^15.6.2",
         "react-clientside-effect": "^1.2.6",
-        "use-callback-ref": "^1.3.0",
+        "use-callback-ref": "^1.3.2",
         "use-sidecar": "^1.1.2"
       },
       "peerDependencies": {
@@ -2127,17 +3315,16 @@
       }
     },
     "node_modules/react-focus-on": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.8.0.tgz",
-      "integrity": "sha512-xuH4jUPeRZ4oE0a85d7pA8pPhotb4U2iWK1CBATP/Xao/WEFHUZxxi5+ffWovjjUT7k53mXDm53TE2pvjLccsw==",
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.9.3.tgz",
+      "integrity": "sha512-GSLz54TvP6OUlsvnlgHJu80nHOAO2ikRTtDt/aP8GZu3DPPAbwHFdliveBwUfPnyKLUKutFMCJUkH55vuo4uKQ==",
       "dev": true,
       "dependencies": {
         "aria-hidden": "^1.2.2",
-        "react-focus-lock": "^2.9.2",
-        "react-remove-scroll": "^2.5.5",
-        "react-style-singleton": "^2.2.0",
+        "react-focus-lock": "^2.11.3",
+        "react-remove-scroll": "^2.5.7",
+        "react-style-singleton": "^2.2.1",
         "tslib": "^2.3.1",
-        "use-callback-ref": "^1.3.0",
         "use-sidecar": "^1.1.2"
       },
       "engines": {
@@ -2154,12 +3341,12 @@
       }
     },
     "node_modules/react-imask": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-7.6.0.tgz",
-      "integrity": "sha512-SilPct67Xw4TN+dqn3SM4BVpy+FwNSeT0wblA/DXQ3El2KPBEWwrn4x3gQ39ZohFAphp7yG7w6gSKq5SeR/6Kg==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-imask/-/react-imask-7.6.1.tgz",
+      "integrity": "sha512-vLNfzcCz62Yzx/GRGh5tiCph9Gbh2cZu+Tz8OiO5it2eNuuhpA0DWhhSlOtVtSJ80+Bx+vFK5De8eQ9AmbkXzA==",
       "dev": true,
       "dependencies": {
-        "imask": "^7.6.0",
+        "imask": "^7.6.1",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2170,26 +3357,26 @@
       }
     },
     "node_modules/react-intl": {
-      "version": "5.25.1",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
-      "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
+      "version": "6.6.8",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.8.tgz",
+      "integrity": "sha512-M0pkhzcgV31h++2901BiRXWl69hp2zPyLxRrSwRjd1ErXbNoubz/f4M6DrRTd4OiSUrT4ajRQzrmtS5plG4FtA==",
       "dev": true,
       "peer": true,
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl": "2.2.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "@formatjs/intl": "2.10.4",
+        "@formatjs/intl-displaynames": "6.6.8",
+        "@formatjs/intl-listformat": "7.5.7",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/react": "16 || 17 || 18",
         "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.5.14",
+        "tslib": "^2.4.0"
       },
       "peerDependencies": {
-        "react": "^16.3.0 || 17 || 18",
-        "typescript": "^4.5"
+        "react": "^16.6.0 || 17 || 18",
+        "typescript": "^4.7 || 5"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -2210,9 +3397,9 @@
       "dev": true
     },
     "node_modules/react-loading-skeleton": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.2.0.tgz",
-      "integrity": "sha512-kN12x4Ud69jbksr2EdhYywAFeW4bPdvFQ9p3ID1OM/QeFjgwFSmSUY2a6P6uOb5ACzWp3ozY8C+7+04KR6+PHA==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz",
+      "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==",
       "dev": true,
       "peerDependencies": {
         "react": ">=16.8.0"
@@ -2260,12 +3447,12 @@
       "dev": true
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
-      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
       "dev": true,
       "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
+        "react-remove-scroll-bar": "^2.3.6",
         "react-style-singleton": "^2.2.1",
         "tslib": "^2.1.0",
         "use-callback-ref": "^1.3.0",
@@ -2285,9 +3472,9 @@
       }
     },
     "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
-      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
       "dev": true,
       "dependencies": {
         "react-style-singleton": "^2.2.1",
@@ -2417,43 +3604,99 @@
       "integrity": "sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==",
       "dev": true,
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
-    },
-    "node_modules/resolve": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.11.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
-      "bin": {
-        "resolve": "bin/resolve"
+      "engines": {
+        "node": "*"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/restore-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "dependencies": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=8"
+        "node": "*"
       }
     },
     "node_modules/run-async": {
@@ -2501,9 +3744,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.62.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
-      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz",
+      "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -2528,15 +3771,33 @@
         "object-assign": "^4.1.1"
       }
     },
-    "node_modules/sentence-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
-      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+    "node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3",
-        "upper-case-first": "^2.0.2"
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/shallow-equal": {
@@ -2545,12 +3806,72 @@
       "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==",
       "dev": true
     },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
@@ -2568,16 +3889,6 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/snake-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
-      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
-      "dev": true,
-      "dependencies": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2588,9 +3899,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -2611,6 +3922,15 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
+    "node_modules/stream": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz",
+      "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==",
+      "dev": true,
+      "dependencies": {
+        "component-emitter": "^2.0.0"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -2643,6 +3963,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -2655,37 +3990,56 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/style-dictionary": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.2.tgz",
-      "integrity": "sha512-Nd/qrPj1ikYX+sL/8PofMgfaJLRvGgT96Ty3dJLGNqtZmecVr3Xs+OZivMQEYmSCTiap/UyeV5SqwmAgn3/KKA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.1.0.tgz",
+      "integrity": "sha512-DfY64t/XsL0bycnabIcIna/H1GyjK4sKLui2t0q6flr2uM+VpRNoSNCPOpi5YSouhKEFjoiC6ediyrMzraTz8A==",
       "dev": true,
+      "hasInstallScript": true,
       "dependencies": {
-        "chalk": "^4.0.0",
-        "change-case": "^4.1.2",
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/glob": "^10.4.2",
+        "@bundled-es-modules/memfs": "^4.9.4",
+        "@zip.js/zip.js": "^2.7.44",
+        "chalk": "^5.3.0",
+        "change-case": "^5.3.0",
         "commander": "^8.3.0",
-        "fs-extra": "^10.0.0",
-        "glob": "^7.2.0",
-        "json5": "^2.2.0",
-        "jsonc-parser": "^3.0.0",
-        "lodash": "^4.17.15",
-        "tinycolor2": "^1.4.1"
+        "is-plain-obj": "^4.1.0",
+        "json5": "^2.2.2",
+        "patch-package": "^8.0.0",
+        "path-unified": "^0.1.0",
+        "tinycolor2": "^1.6.0"
       },
       "bin": {
-        "style-dictionary": "bin/style-dictionary"
+        "style-dictionary": "bin/style-dictionary.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/style-dictionary/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/style-dictionary/node_modules/commander": {
@@ -2697,38 +4051,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/style-dictionary/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/style-dictionary/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2759,6 +4081,18 @@
       "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
       "dev": true
     },
+    "node_modules/thingies": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
+      "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -2795,10 +4129,35 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tree-dump": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
+      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/tslib": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
       "dev": true
     },
     "node_modules/type-fest": {
@@ -2828,37 +4187,38 @@
         "react": ">=15.0.0"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true
+    },
     "node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "dev": true,
       "engines": {
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/upper-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
-      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/upper-case-first": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
-      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+    "node_modules/url": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
+      "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
       "dev": true,
       "dependencies": {
-        "tslib": "^2.0.3"
+        "punycode": "^1.4.1",
+        "qs": "^6.12.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/use-callback-ref": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
-      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.0.0"
@@ -2898,6 +4258,19 @@
         }
       }
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2905,10 +4278,14 @@
       "dev": true
     },
     "node_modules/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
       "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -2931,6 +4308,40 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -2945,11 +4356,50 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
+    },
+    "node_modules/xregexp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-5.1.1.tgz",
+      "integrity": "sha512-fKXeVorD+CzWvFs7VBuKTYIW63YD1e1osxwQ8caZ6o1jg6pDAbABDG54LCIq0j5cy7PjRvGIq6sef9DYPXpncg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.16.5"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
+      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index f304049..8a9e7bd 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,11 @@
     "build-tokens": "paragon build-tokens --source ./tokens/src --build-dir ./paragon/css --source-tokens-only",
     "build-scss": "paragon build-scss --corePath ./paragon/core.scss --themesPath ./paragon/css/themes --defaultThemeVariants light",
     "build": "make build",
+    "build:watch": "nodemon --ignore dist -x \"make build\"",
     "paragon:help": "paragon help"
   },
   "devDependencies": {
-    "@openedx/paragon": "22.0.0-alpha.25"
+    "@openedx/paragon": "file:../paragon/openedx-paragon-20.18.1.tgz",
+    "nodemon": "^3.1.4"
   }
 }
diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css
index 2bf3700..6e5037d 100644
--- a/paragon/css/core/custom-media-breakpoints.css
+++ b/paragon/css/core/custom-media-breakpoints.css
@@ -1,6 +1,5 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 24 May 2024 22:53:44 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css
index 381716e..d23c85d 100644
--- a/paragon/css/core/variables.css
+++ b/paragon/css/core/variables.css
@@ -1,114 +1,80 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 24 May 2024 22:53:44 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
 :root {
-  --pgn-typography-font-line-height-base: 1rem;
-  --pgn-typography-font-line-height-14: 6.75rem;
-  --pgn-typography-font-line-height-13: 5.625rem;
-  --pgn-typography-font-line-height-12: 5.25rem;
-  --pgn-typography-font-line-height-11: 4.875rem;
-  --pgn-typography-font-line-height-10: 4.25rem;
-  --pgn-typography-font-line-height-9: 3.75rem;
-  --pgn-typography-font-line-height-8: 3.375rem;
-  --pgn-typography-font-line-height-7: 3rem;
-  --pgn-typography-font-line-height-6: 2.625rem;
-  --pgn-typography-font-line-height-5: 2.25rem;
-  --pgn-typography-font-line-height-4: 1.75rem;
-  --pgn-typography-font-line-height-3: 1.5rem;
-  --pgn-typography-font-line-height-2: 1.25rem;
-  --pgn-typography-font-weight-almost-bold: 600;
-  --pgn-typography-font-weight-lead: 400;
-  --pgn-typography-font-weight-bolder: bolder;
-  --pgn-typography-font-weight-bold: 700;
-  --pgn-typography-font-weight-semi-bold: 500;
-  --pgn-typography-font-weight-normal: 400;
-  --pgn-typography-font-weight-light: 300;
-  --pgn-typography-font-weight-lighter: lighter;
-  --pgn-typography-font-size-heading-extra-small: 0.75rem;
-  --pgn-typography-font-size-heading-small: 0.875rem;
-  --pgn-typography-font-size-heading-default: 1.125rem;
-  --pgn-typography-font-size-heading-large: 1.375rem;
-  --pgn-typography-font-size-body-micro: 0.6875rem;
-  --pgn-typography-font-size-body-extra-small: 0.75rem;
-  --pgn-typography-font-size-body-small: 0.875rem;
-  --pgn-typography-font-size-body-default: 1.125rem;
-  --pgn-typography-font-size-body-large: 1.375rem;
-  --pgn-typography-font-size-display-subhead: 3.125rem;
-  --pgn-typography-font-size-display1: 3.75rem;
-  --pgn-typography-font-size-display2: 4.875rem;
-  --pgn-typography-font-size-display3: 5.625rem;
-  --pgn-typography-font-size-display4: 6.75rem;
-  --pgn-typography-font-size-lead: 1.375rem;
-  --pgn-typography-font-size-mobile-display1: 3rem;
-  --pgn-typography-font-size-mobile-display2: 3.625rem;
-  --pgn-typography-font-size-mobile-display3: 4.375rem;
-  --pgn-typography-font-size-mobile-display4: 5.25rem;
-  --pgn-typography-font-size-mobile-h4: 1.375rem;
-  --pgn-typography-font-size-mobile-h3: 1.5rem;
-  --pgn-typography-font-size-mobile-h2: 1.75rem;
-  --pgn-typography-font-size-mobile-h1: 1.875rem;
-  --pgn-typography-font-size-h6: 1.125rem;
-  --pgn-typography-font-size-h5: 1.25rem;
-  --pgn-typography-font-size-h4: 1.5rem;
-  --pgn-typography-font-size-h3: 1.75rem;
-  --pgn-typography-font-size-h2: 2.25rem;
-  --pgn-typography-font-size-h1: 3rem;
-  --pgn-typography-font-size-small-x: 0.75rem;
-  --pgn-typography-font-size-small-base: 0.875rem;
-  --pgn-typography-font-size-base: 1.125rem;
-  --pgn-typography-font-family-monospace: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --pgn-typography-font-family-sans-serif: "Inter", "Helvetica Neue", Arial, sans-serif;
-  --pgn-typography-display-weight-4: 700;
-  --pgn-typography-display-weight-3: 700;
-  --pgn-typography-display-weight-2: 700;
-  --pgn-typography-display-weight-1: 700;
+  --pgn-typography-line-height-display-mobile: 1; /* Mobile line height of display level. */
+  --pgn-typography-font-weight-display-4: 900; /* Font weight of display level 4. */
+  --pgn-typography-font-weight-display-3: 900; /* Font weight of display level 3. */
+  --pgn-typography-font-weight-display-2: 900; /* Font weight of display level 2. */
+  --pgn-typography-font-weight-display-1: 900; /* Font weight of display level 1. */
+  --pgn-typography-font-size-display-mobile-4: 5.25rem; /* Mobile font size of display level 4. */
+  --pgn-typography-font-size-display-mobile-3: 4.375rem; /* Mobile font size of display level 3. */
+  --pgn-typography-font-size-display-mobile-2: 3.625rem; /* Mobile font size of display level 2. */
+  --pgn-typography-font-size-display-mobile-1: 3rem; /* Mobile font size of display level 1. */
+  --pgn-typography-font-size-display-4: 6.125rem; /* Font size of display level 4. */
+  --pgn-typography-font-size-display-3: 5.625rem; /* Font size of display level 3. */
+  --pgn-typography-font-size-display-2: 4.875rem; /* Font size of display level 2. */
+  --pgn-typography-font-size-display-1: 3.75rem; /* Font size of display level 1. */
+  --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */
+  --pgn-typography-font-size-h6-base: 1.125rem; /* Font size of heading level 6. */
+  --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */
+  --pgn-typography-font-size-h5-base: 1.25rem; /* Font size of heading level 5. */
+  --pgn-typography-font-size-h4-mobile: 1.375rem; /* Mobile font size of heading level 4. */
+  --pgn-typography-font-size-h4-base: 1.5rem; /* Font size of heading level 4. */
+  --pgn-typography-font-size-h3-mobile: 1.5rem; /* Mobile font size of heading level 3. */
+  --pgn-typography-font-size-h3-base: 1.75rem; /* Font size of heading level 3. */
+  --pgn-typography-font-size-h2-mobile: 1.75rem; /* Mobile font size of heading level 2. */
+  --pgn-typography-font-size-h2-base: 2.25rem; /* Font size of heading level 2. */
+  --pgn-typography-font-size-h1-mobile: 1.875rem; /* Mobile font size of heading level 1. */
+  --pgn-typography-font-size-h1-base: 3rem; /* Font size of heading level 1. */
+  --pgn-typography-font-family-monospace: '"Roboto Mono"', SFMono-Regular, Menlo, Monaco, Consolas, '"Liberation Mono"', '"Courier New"', monospace; /* Monospace font family. */
+  --pgn-typography-font-family-serif: var(--pgn-typography-font-family-sans-serif); /* Serif font family. */
+  --pgn-typography-font-family-sans-serif: "Inter", '"Helvetica Neue"', Arial, sans-serif; /* Sans-serif font family. */
   --pgn-typography-headings-font-weight: 700;
   --pgn-typography-btn-font-weight: 500;
   --pgn-typography-badge-font-weight: 400;
   --pgn-typography-badge-font-size: 0.75rem;
-  --pgn-spacing-spacer-base: 1rem;
-  --pgn-spacing-spacer-0: 0;
+  --pgn-spacing-grid-gutter-width: var(--pgn-spacing-spacer-4); /* Grid gutter width value. */
+  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */
+  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */
+  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */
+  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */
+  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */
+  --pgn-spacing-spacer-base: 1rem; /* Basic space value */
+  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */
+  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */
+  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */
+  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */
+  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */
+  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */
+  --pgn-spacing-spacer-0: 0; /* Space value of level 0 */
+  --pgn-spacing-caret-vertical-align: calc(var(--pgn-size-caret-width) * .67);
+  --pgn-spacing-caret-base: calc(var(--pgn-size-caret-width) * 1);
+  --pgn-spacing-dropdown-padding-y-item: var(--pgn-spacing-spacer-2-5);
+  --pgn-spacing-dropdown-padding-y-base: var(--pgn-spacing-spacer-2);
+  --pgn-spacing-card-spacer-y: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-spacer-x: var(--pgn-spacing-spacer-4);
+  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
   --pgn-spacing-btn-focus-gap: 2px;
+  --pgn-size-input-btn-border-width: 1px;
+  --pgn-size-caret-width: 0.3em;
   --pgn-size-popover-border-width: 0px;
   --pgn-size-nav-pills-border-radius: 0;
   --pgn-size-image-thumbnail-border-radius: 0;
-  --pgn-size-input-btn-border-width: 1px;
   --pgn-size-form-input-radius-border-sm: 0;
   --pgn-size-form-input-radius-border-lg: 0;
   --pgn-size-form-input-radius-border-base: 0;
   --pgn-size-dropdown-border-width: 0;
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
+  --pgn-size-btn-focus-width: 2px;
   --pgn-size-btn-border-radius-sm: 100px;
   --pgn-size-btn-border-radius-lg: 100px;
   --pgn-size-btn-border-radius-base: 100px;
-  --pgn-size-border-radius-sm: .375rem;
-  --pgn-size-border-radius-lg: .375rem;
-  --pgn-size-border-radius-base: .375rem;
-  --pgn-typography-font-line-height-1: 1rem;
-  --pgn-typography-font-weight-base: 400;
-  --pgn-typography-font-size-lg: calc(1.125rem * 1.25);
-  --pgn-typography-font-family-serif: "Inter", "Helvetica Neue", Arial, sans-serif;
-  --pgn-spacing-spacer-5-5: calc(1rem * 4);
-  --pgn-spacing-spacer-4-5: calc(1rem * 2);
-  --pgn-spacing-spacer-3-5: calc(1rem * 1.25);
-  --pgn-spacing-spacer-2-5: calc(1rem * .75);
-  --pgn-spacing-spacer-1-5: calc(1rem * .375);
-  --pgn-spacing-spacer-6: calc(1rem * 5);
-  --pgn-spacing-spacer-5: calc(1rem * 3);
-  --pgn-spacing-spacer-4: calc(1rem * 1.5);
-  --pgn-spacing-spacer-3: 1rem;
-  --pgn-spacing-spacer-2: calc(1rem * .5);
-  --pgn-spacing-spacer-1: calc(1rem * .25);
-  --pgn-spacing-caret-vertical-align: calc(.3em * .67);
-  --pgn-spacing-caret-base: calc(.3em * 1);
-  --pgn-size-btn-focus-border-radius-sm: 100px;
-  --pgn-size-btn-focus-border-radius-base: calc(100px + calc(2px + 2px));
-  --pgn-spacing-grid-gutter-width: calc(1rem * 4);
-  --pgn-spacing-dropdown-padding-y-item: calc(1rem * .75);
-  --pgn-spacing-dropdown-padding-y-base: calc(1rem * .5);
-  --pgn-spacing-card-spacer-y: 1rem;
-  --pgn-spacing-card-spacer-x: calc(1rem * 1.5);
-  --pgn-size-btn-focus-border-radius-lg: calc(100px + calc(2px + 2px));
+  --pgn-size-border-radius-sm: 0.375rem; /* Small border radius. */
+  --pgn-size-border-radius-lg: 0.375rem; /* Large border radius. */
+  --pgn-size-border-radius-base: 0.375rem; /* Default border radius. */
 }
diff --git a/paragon/css/themes/light/index.css b/paragon/css/themes/light/index.css
index 0b94ebd..2c8a9d3 100644
--- a/paragon/css/themes/light/index.css
+++ b/paragon/css/themes/light/index.css
@@ -1,2 +1 @@
 @import "variables.css";
-@import "utility-classes.css";
diff --git a/paragon/css/themes/light/utility-classes.css b/paragon/css/themes/light/utility-classes.css
deleted file mode 100644
index e69de29..0000000
diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css
index 6abbac5..d976ee2 100644
--- a/paragon/css/themes/light/variables.css
+++ b/paragon/css/themes/light/variables.css
@@ -1,475 +1,403 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 24 May 2024 22:53:45 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
 :root {
-  --pgn-color-dark-base: #D2DAD8FF;
-  --pgn-color-dark-900: #060E0CFF;
-  --pgn-color-dark-800: #0C1C18FF;
-  --pgn-color-dark-700: #132925FF;
-  --pgn-color-dark-600: #193731FF;
-  --pgn-color-dark-500: #1F453DFF;
-  --pgn-color-dark-400: #4C6A64FF;
-  --pgn-color-dark-300: #798F8BFF;
-  --pgn-color-dark-200: #BFC9CAFF;
-  --pgn-color-light-base: #F9F8F6FF;
-  --pgn-color-light-900: #2D2C2AFF;
-  --pgn-color-light-800: #5A5854FF;
-  --pgn-color-light-700: #87857EFF;
-  --pgn-color-light-600: #B4B1A8FF;
-  --pgn-color-light-500: #E1DDD2FF;
-  --pgn-color-light-400: #E7E4DBFF;
-  --pgn-color-light-300: #EDEBE4FF;
-  --pgn-color-light-200: #F3F1EDFF;
-  --pgn-color-danger-base: #FCF1F4FF;
-  --pgn-color-danger-900: #690E07FF;
-  --pgn-color-danger-800: #800A02FF;
-  --pgn-color-danger-700: #951C13FF;
-  --pgn-color-danger-600: #9A0C02FF;
-  --pgn-color-danger-500: #AB0D02FF;
-  --pgn-color-danger-400: #C04A41FF;
-  --pgn-color-danger-300: #CA3A2FFF;
-  --pgn-color-danger-200: #F3AEA9FF;
-  --pgn-color-warning-base: #FFFADBFF;
-  --pgn-color-warning-900: #7A6800FF;
-  --pgn-color-warning-800: #A18900FF;
-  --pgn-color-warning-700: #998200FF;
-  --pgn-color-warning-600: #C1A400FF;
-  --pgn-color-warning-500: #D6B600FF;
-  --pgn-color-warning-400: #E0C840FF;
-  --pgn-color-warning-300: #F0CC00FF;
-  --pgn-color-warning-200: #FFEA75FF;
-  --pgn-color-info-base: #EFF8FAFF;
-  --pgn-color-info-900: #002F4AFF;
-  --pgn-color-info-800: #004E6AFF;
-  --pgn-color-info-700: #004972FF;
-  --pgn-color-info-600: #005E7FFF;
-  --pgn-color-info-500: #00688DFF;
-  --pgn-color-info-400: #408EAAFF;
-  --pgn-color-info-300: #1C8DBEFF;
-  --pgn-color-info-200: #9CD2E6FF;
-  --pgn-color-success-base: #F2FAF7FF;
-  --pgn-color-success-900: #0F4D0FFF;
-  --pgn-color-success-800: #0A5E3AFF;
-  --pgn-color-success-700: #175B3CFF;
-  --pgn-color-success-600: #0C7145FF;
-  --pgn-color-success-500: #0D7D4DFF;
-  --pgn-color-success-400: #4A9E7AFF;
-  --pgn-color-success-300: #30A171FF;
-  --pgn-color-success-200: #BBE6D7FF;
-  --pgn-color-brand-base: #F49974FF;
-  --pgn-color-brand-900: #73290CFF;
-  --pgn-color-brand-800: #8B2F0BFF;
-  --pgn-color-brand-700: #A33508FF;
-  --pgn-color-brand-600: #BC3A05FF;
-  --pgn-color-brand-500: #D74000FF;
-  --pgn-color-brand-400: #DF5924FF;
-  --pgn-color-brand-300: #E76F3FFF;
-  --pgn-color-brand-200: #EE855AFF;
-  --pgn-color-primary-base: #F0F2F2FF;
-  --pgn-color-primary-900: #001B1EFF;
-  --pgn-color-primary-800: #001D20FF;
-  --pgn-color-primary-700: #002121FF;
-  --pgn-color-primary-600: #002326FF;
-  --pgn-color-primary-500: #00262BFF;
-  --pgn-color-primary-400: #0E3639FF;
-  --pgn-color-primary-300: #2D494EFF;
-  --pgn-color-primary-200: #BFC9CAFF;
-  --pgn-color-gray-base: #EBEBEBFF;
-  --pgn-color-gray-900: #212529FF;
-  --pgn-color-gray-800: #333333FF;
-  --pgn-color-gray-700: #454545FF;
-  --pgn-color-gray-600: #5C5C5CFF;
-  --pgn-color-gray-500: #707070FF;
-  --pgn-color-gray-400: #8F8F8FFF;
-  --pgn-color-gray-300: #ADADADFF;
-  --pgn-color-gray-200: #CCCCCCFF;
-  --pgn-color-yellow: #D6B600FF;
-  --pgn-color-green: #0D7D4DFF;
-  --pgn-color-red: #AB0D02FF;
-  --pgn-color-blue: #00688DFF;
-  --pgn-color-black: #000000FF;
-  --pgn-color-white: #FFFFFFFF;
+  --pgn-color-action-default-accent-b: #E27D9CFF;
+  --pgn-color-action-default-accent-a: #32DBAEFF;
+  --pgn-color-action-default-dark-base: #0F221EFF;
+  --pgn-color-action-default-dark-900: #000000FF;
+  --pgn-color-action-default-dark-800: #000000FF;
+  --pgn-color-action-default-dark-700: #030606FF;
+  --pgn-color-action-default-dark-600: #091412FF;
+  --pgn-color-action-default-dark-500: #0F221EFF;
+  --pgn-color-action-default-dark-400: #374C48FF;
+  --pgn-color-action-default-dark-300: #617471FF;
+  --pgn-color-action-default-dark-200: #A3B1B3FF;
+  --pgn-color-action-default-dark-100: #B6C3C0FF;
+  --pgn-color-action-default-light-base: #CDC6B3FF;
+  --pgn-color-action-default-light-900: #131211FF;
+  --pgn-color-action-default-light-800: #403E3BFF;
+  --pgn-color-action-default-light-700: #6D6B65FF;
+  --pgn-color-action-default-light-600: #9C988DFF;
+  --pgn-color-action-default-light-500: #CDC6B3FF;
+  --pgn-color-action-default-light-400: #D3CDBCFF;
+  --pgn-color-action-default-light-300: #D9D4C5FF;
+  --pgn-color-action-default-light-200: #DFD9CEFF;
+  --pgn-color-action-default-light-100: #E5E0D7FF;
+  --pgn-color-action-default-danger-base: #790901FF;
+  --pgn-color-action-default-danger-900: #390804FF;
+  --pgn-color-action-default-danger-800: #4E0601FF;
+  --pgn-color-action-default-danger-700: #68130DFF;
+  --pgn-color-action-default-danger-600: #680801FF;
+  --pgn-color-action-default-danger-500: #790901FF;
+  --pgn-color-action-default-danger-400: #9B3B33FF;
+  --pgn-color-action-default-danger-300: #A12E25FF;
+  --pgn-color-action-default-danger-200: #ED847CFF;
+  --pgn-color-action-default-danger-100: #F3C7D3FF;
+  --pgn-color-action-default-warning-base: #A38B00FF;
+  --pgn-color-action-default-warning-900: #473D00FF;
+  --pgn-color-action-default-warning-800: #6E5E00FF;
+  --pgn-color-action-default-warning-700: #665700FF;
+  --pgn-color-action-default-warning-600: #8E7900FF;
+  --pgn-color-action-default-warning-500: #A38B00FF;
+  --pgn-color-action-default-warning-400: #CCB221FF;
+  --pgn-color-action-default-warning-300: #BDA100FF;
+  --pgn-color-action-default-warning-200: #FFE242FF;
+  --pgn-color-action-default-warning-100: #FFF3A8FF;
+  --pgn-color-action-default-info-base: #00425AFF;
+  --pgn-color-action-default-info-900: #000F17FF;
+  --pgn-color-action-default-info-800: #002837FF;
+  --pgn-color-action-default-info-700: #00283FFF;
+  --pgn-color-action-default-info-600: #00384CFF;
+  --pgn-color-action-default-info-500: #00425AFF;
+  --pgn-color-action-default-info-400: #326F85FF;
+  --pgn-color-action-default-info-300: #156C92FF;
+  --pgn-color-action-default-info-200: #73BFDCFF;
+  --pgn-color-action-default-info-100: #C8E7EEFF;
+  --pgn-color-action-default-success-base: #084F31FF;
+  --pgn-color-action-default-success-900: #072207FF;
+  --pgn-color-action-default-success-800: #05301EFF;
+  --pgn-color-action-default-success-700: #0D3221FF;
+  --pgn-color-action-default-success-600: #074329FF;
+  --pgn-color-action-default-success-500: #084F31FF;
+  --pgn-color-action-default-success-400: #3A7B5FFF;
+  --pgn-color-action-default-success-300: #247A55FF;
+  --pgn-color-action-default-success-200: #96D8C1FF;
+  --pgn-color-action-default-success-100: #CDECE0FF;
+  --pgn-color-action-default-brand-base: #A43100FF;
+  --pgn-color-action-default-brand-900: #451907FF;
+  --pgn-color-action-default-brand-800: #5C1F07FF;
+  --pgn-color-action-default-brand-700: #722506FF;
+  --pgn-color-action-default-brand-600: #8A2B04FF;
+  --pgn-color-action-default-brand-500: #A43100FF;
+  --pgn-color-action-default-brand-400: #B5461BFF;
+  --pgn-color-action-default-brand-300: #D8511BFF;
+  --pgn-color-action-default-brand-200: #E9632CFF;
+  --pgn-color-action-default-brand-100: #F07645FF;
+  --pgn-color-action-default-secondary-base: #2B2B2BFF;
+  --pgn-color-action-default-secondary-900: #161616FF;
+  --pgn-color-action-default-secondary-600: #252525FF;
+  --pgn-color-action-default-secondary-400: #5A5A5AFF;
+  --pgn-color-action-default-primary-base: #000000FF;
+  --pgn-color-action-default-primary-900: #000000FF;
+  --pgn-color-action-default-primary-800: #000000FF;
+  --pgn-color-action-default-primary-700: #000000FF;
+  --pgn-color-action-default-primary-600: #000000FF;
+  --pgn-color-action-default-primary-500: #000000FF;
+  --pgn-color-action-default-primary-400: #040F10FF;
+  --pgn-color-action-default-primary-300: #1A2B2EFF;
+  --pgn-color-action-default-primary-200: #A3B1B3FF;
+  --pgn-color-action-default-primary-100: #D5DADAFF;
+  --pgn-color-action-default-gray-base: #575757FF;
+  --pgn-color-action-default-gray-900: #0A0C0DFF;
+  --pgn-color-action-default-gray-800: #1A1A1AFF;
+  --pgn-color-action-default-gray-700: #2B2B2BFF;
+  --pgn-color-action-default-gray-600: #424242FF;
+  --pgn-color-action-default-gray-500: #575757FF;
+  --pgn-color-action-default-gray-400: #767676FF;
+  --pgn-color-action-default-gray-300: #949494FF;
+  --pgn-color-action-default-gray-200: #B3B3B3FF;
+  --pgn-color-action-default-gray-100: #D2D2D2FF;
+  --pgn-color-dark-base: #1F453DFF; /* Basic dark color. */
+  --pgn-color-dark-900: #060E0CFF; /* Dark color of level 900. */
+  --pgn-color-dark-800: #0C1C18FF; /* Dark color of level 800. */
+  --pgn-color-dark-700: #132925FF; /* Info color of level 700. */
+  --pgn-color-dark-600: #193731FF; /* Dark color of level 600. */
+  --pgn-color-dark-500: var(--pgn-color-dark-base); /* Dark color of level 500. */
+  --pgn-color-dark-400: #4C6A64FF; /* Dark color of level 400. */
+  --pgn-color-dark-300: #798F8BFF; /* Dark color of level 300. */
+  --pgn-color-dark-200: #BFC9CAFF; /* Dark color of level 200. */
+  --pgn-color-dark-100: #D2DAD8FF; /* Dark color of level 100. */
+  --pgn-color-light-base: #E1DDD2FF; /* Basic light color. */
+  --pgn-color-light-900: #2D2C2AFF; /* Light color of level 900. */
+  --pgn-color-light-800: #5A5854FF; /* Light color of level 800. */
+  --pgn-color-light-700: #87857EFF; /* Light color of level 700. */
+  --pgn-color-light-600: #B4B1A8FF; /* Light color of level 600. */
+  --pgn-color-light-500: var(--pgn-color-light-base); /* Light color of level 500. */
+  --pgn-color-light-400: #E7E4DBFF; /* Light color of level 400. */
+  --pgn-color-light-300: #EDEBE4FF; /* Light color of level 300. */
+  --pgn-color-light-200: #F3F1EDFF; /* Light color of level 200. */
+  --pgn-color-light-100: #F9F8F6FF; /* Light color of level 100. */
+  --pgn-color-danger-base: #AB0D02FF; /* Basic danger color. */
+  --pgn-color-danger-900: #690E07FF; /* Danger color of level 900. */
+  --pgn-color-danger-800: #800A02FF; /* Danger color of level 800. */
+  --pgn-color-danger-700: #951C13FF; /* Danger color of level 700. */
+  --pgn-color-danger-600: #9A0C02FF; /* Danger color of level 600. */
+  --pgn-color-danger-500: var(--pgn-color-danger-base); /* Danger color of level 500. */
+  --pgn-color-danger-400: #C04A41FF; /* Danger color of level 400. */
+  --pgn-color-danger-300: #CA3A2FFF; /* Danger color of level 300. */
+  --pgn-color-danger-200: #F3AEA9FF; /* Danger color of level 200. */
+  --pgn-color-danger-100: #FCF1F4FF; /* Danger color of level 100. */
+  --pgn-color-warning-base: #D6B600FF; /* Basic warning color. */
+  --pgn-color-warning-900: #7A6800FF; /* Warning color of level 900. */
+  --pgn-color-warning-800: #A18900FF; /* Warning color of level 800. */
+  --pgn-color-warning-700: #998200FF; /* Warning color of level 700. */
+  --pgn-color-warning-600: #C1A400FF; /* Warning color of level 600. */
+  --pgn-color-warning-500: var(--pgn-color-warning-base); /* Warning color of level 500. */
+  --pgn-color-warning-400: #E0C840FF; /* Warning color of level 400. */
+  --pgn-color-warning-300: #F0CC00FF; /* Warning color of level 300. */
+  --pgn-color-warning-200: #FFEA75FF; /* Warning color of level 200. */
+  --pgn-color-warning-100: #FFFADBFF; /* Warning color of level 100. */
+  --pgn-color-info-base: #00688DFF; /* Basic info color. */
+  --pgn-color-info-900: #002F4AFF; /* Info color of level 900. */
+  --pgn-color-info-800: #004E6AFF; /* Info color of level 800. */
+  --pgn-color-info-700: #004972FF; /* Info color of level 700. */
+  --pgn-color-info-600: #005E7FFF; /* Info color of level 600. */
+  --pgn-color-info-500: var(--pgn-color-info-base); /* Info color of level 500. */
+  --pgn-color-info-400: #408EAAFF; /* Info color of level 400. */
+  --pgn-color-info-300: #1C8DBEFF; /* Info color of level 300. */
+  --pgn-color-info-200: #9CD2E6FF; /* Info color of level 200. */
+  --pgn-color-info-100: #EFF8FAFF; /* Info color of level 100. */
+  --pgn-color-success-base: #0D7D4DFF; /* Basic success color. */
+  --pgn-color-success-900: #0F4D0FFF; /* Success color of level 900. */
+  --pgn-color-success-800: #0A5E3AFF; /* Success color of level 800. */
+  --pgn-color-success-700: #175B3CFF; /* Success color of level 700. */
+  --pgn-color-success-600: #0C7145FF; /* Success color of level 600. */
+  --pgn-color-success-500: var(--pgn-color-success-base); /* Success color of level 500. */
+  --pgn-color-success-400: #4A9E7AFF; /* Success color of level 400. */
+  --pgn-color-success-300: #30A171FF; /* Success color of level 300. */
+  --pgn-color-success-200: #BBE6D7FF; /* Success color of level 200. */
+  --pgn-color-success-100: #F2FAF7FF; /* Success color of level 100. */
+  --pgn-color-brand-base: #D74000FF; /* Basic brand color. */
+  --pgn-color-brand-900: #73290CFF; /* Brand color of level 900. */
+  --pgn-color-brand-800: #8B2F0BFF; /* Brand color of level 800. */
+  --pgn-color-brand-700: #A33508FF; /* Brand color of level 700. */
+  --pgn-color-brand-600: #BC3A05FF; /* Brand color of level 600. */
+  --pgn-color-brand-500: var(--pgn-color-brand-base); /* Brand color of level 500. */
+  --pgn-color-brand-400: #DF5924FF; /* Brand color of level 400. */
+  --pgn-color-brand-300: #E76F3FFF; /* Brand color of level 300. */
+  --pgn-color-brand-200: #EE855AFF; /* Brand color of level 200. */
+  --pgn-color-brand-100: #F49974FF; /* Brand color of level 100. */
+  --pgn-color-secondary-base: var(--pgn-color-gray-700); /* Basic secondary color. */
+  --pgn-color-secondary-900: #303030FF; /* Secondary color of level 900. */
+  --pgn-color-secondary-600: #3E3E3EFF; /* Secondary color of level 600. */
+  --pgn-color-secondary-400: #747474FF; /* Secondary color of level 400. */
+  --pgn-color-primary-base: #00262BFF; /* Basic primary color. */
+  --pgn-color-primary-900: #001B1EFF; /* Primary color of level 900. */
+  --pgn-color-primary-800: #001D20FF; /* Primary color of level 800. */
+  --pgn-color-primary-700: #002121FF; /* Primary color of level 700. */
+  --pgn-color-primary-600: #002326FF; /* Primary color of level 600. */
+  --pgn-color-primary-500: var(--pgn-color-primary-base); /* Primary color of level 500. */
+  --pgn-color-primary-400: #0E3639FF; /* Primary color of level 400. */
+  --pgn-color-primary-300: #2D494EFF; /* Primary color of level 300. */
+  --pgn-color-primary-200: #BFC9CAFF; /* Primary color of level 200. */
+  --pgn-color-primary-100: #F0F2F2FF; /* Primary color of level 100. */
+  --pgn-color-gray-base: #707070FF; /* Basic gray color. */
+  --pgn-color-gray-900: #212529FF; /* Gray color of level 900. */
+  --pgn-color-gray-800: #333333FF; /* Gray color of level 800. */
+  --pgn-color-gray-700: #454545FF; /* Gray color of level 700. */
+  --pgn-color-gray-600: #5C5C5CFF; /* Gray color of level 600. */
+  --pgn-color-gray-500: var(--pgn-color-gray-base); /* Gray color of level 500. */
+  --pgn-color-gray-400: #8F8F8FFF; /* Gray color of level 400. */
+  --pgn-color-gray-300: #ADADADFF; /* Gray color of level 300. */
+  --pgn-color-gray-200: #CCCCCCFF; /* Gray color of level 200. */
+  --pgn-color-gray-100: #EBEBEBFF; /* Gray color of level 100. */
+  --pgn-color-accent-b: #EBA7BCFF; /* Accent-b color. */
+  --pgn-color-accent-a: #5DE3BFFF; /* Accent-a color. */
+  --pgn-color-yellow: #D6B600FF; /* Yellow color. */
+  --pgn-color-green: #0D7D4DFF; /* Green color. */
+  --pgn-color-red: #AB0D02FF; /* Red color. */
+  --pgn-color-blue: #00688DFF; /* Blue color. */
+  --pgn-color-black: #000000FF; /* Black color. */
+  --pgn-color-white: #FFFFFFFF; /* White color. */
+  --pgn-color-link-hover: var(--pgn-color-info-700);
+  --pgn-color-link-base: var(--pgn-color-info-500);
+  --pgn-color-headings-base: var(--pgn-color-dark-500);
+  --pgn-color-body-bg: var(--pgn-color-white);
+  --pgn-color-body-base: var(--pgn-color-gray-700);
+  --pgn-color-tooltip-bg-base: var(--pgn-color-primary-base);
+  --pgn-color-tooltip-light: var(--pgn-color-primary-base);
   --pgn-color-popover-header-bg: #00000000;
-  --pgn-color-btn-disabled-bg-outline-warning: #000000FF;
-  --pgn-color-btn-disabled-bg-outline-success: #000000FF;
-  --pgn-color-btn-disabled-bg-outline-secondary: #000000FF;
-  --pgn-color-btn-disabled-bg-outline-light: #000000FF;
-  --pgn-color-btn-disabled-bg-outline-info: #000000FF;
-  --pgn-color-btn-disabled-bg-outline-dark: #000000FF;
-  --pgn-color-btn-disabled-bg-outline-danger: #000000FF;
+  --pgn-color-pagination-text-base: var(--pgn-color-primary-base);
+  --pgn-color-form-feedback-icon-invalid: var(--pgn-color-form-feedback-invalid);
+  --pgn-color-form-feedback-icon-valid: var(--pgn-color-form-feedback-valid);
+  --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base);
+  --pgn-color-form-feedback-valid: var(--pgn-color-success-base);
+  --pgn-color-form-input-focus-bg: var(--pgn-color-white);
+  --pgn-color-form-input-focus-border: var(--pgn-color-body-base);
+  --pgn-color-form-input-bg-base: var(--pgn-color-white);
+  --pgn-color-form-input-base: var(--pgn-color-body-base);
+  --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary);
+  --pgn-color-btn-disabled-border-secondary: var(--pgn-color-btn-border-secondary);
+  --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-border-outline-primary);
+  --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-border-outline-light);
+  --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-border-info);
+  --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-border-outline-dark);
+  --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark);
+  --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger);
+  --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-disabled-bg-outline-warning: var(--pgn-color-btn-bg-outline-warning);
+  --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-disabled-bg-outline-success: var(--pgn-color-btn-bg-outline-success);
+  --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-disabled-bg-outline-secondary: var(--pgn-color-btn-bg-outline-secondary);
+  --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-disabled-bg-outline-primary: var(--pgn-color-btn-bg-outline-primary);
+  --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-disabled-bg-outline-light: var(--pgn-color-btn-bg-outline-light);
+  --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-disabled-bg-outline-info: var(--pgn-color-btn-bg-outline-info);
+  --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-bg-outline-dark: var(--pgn-color-btn-bg-outline-dark);
+  --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-disabled-bg-outline-danger: var(--pgn-color-btn-bg-outline-danger);
+  --pgn-color-btn-disabled-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-disabled-bg-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-disabled-bg-brand: var(--pgn-color-brand-100);
+  --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-hover-text-outline-warning);
+  --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-hover-text-outline-success);
+  --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-disabled-text-outline-secondary: var(--pgn-color-btn-hover-text-outline-secondary);
+  --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light);
+  --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-hover-text-outline-info);
+  --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-disabled-text-outline-dark: var(--pgn-color-btn-hover-text-outline-dark);
+  --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
+  --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-text-outline-brand);
+  --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand);
+  --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-focus-outline-warning: var(--pgn-color-btn-border-warning);
   --pgn-color-btn-focus-outline-tertiary: #00000000;
-  --pgn-other-btn-disabled-opacity: .3;
-  --pgn-elevation-box-shadow-level-4: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-image-thumbnail-box-shadow: none;
-  --pgn-elevation-form-input-base: none;
-  --pgn-transition-btn: none;
-  --pgn-typography-input-btn-line-height-sm: 1.4286;
-  --pgn-typography-input-btn-line-height-base: 1.3333;
-  --pgn-typography-input-btn-font-size-lg: 1.325rem;
-  --pgn-typography-input-btn-font-size-sm: .875rem;
-  --pgn-typography-input-btn-font-size-base: 1.125rem;
-  --pgn-typography-input-btn-font-family: inherit;
-  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
-  --pgn-spacing-input-btn-padding-lg-y: .6875rem;
-  --pgn-spacing-input-btn-padding-sm-x: .75rem;
-  --pgn-spacing-input-btn-padding-sm-y: .4375rem;
-  --pgn-spacing-input-btn-padding-x: 1rem;
-  --pgn-spacing-input-btn-padding-y: .5625rem;
-  --pgn-spacing-btn-block-spacing-y: .5rem;
-  --pgn-size-input-btn-focus-width: 1px;
-  --pgn-size-btn-focus-width: 2px;
-  --pgn-color-dark-100: #D2DAD8FF;
-  --pgn-color-light-100: #F9F8F6FF;
-  --pgn-color-danger-100: #FCF1F4FF;
-  --pgn-color-warning-100: #FFFADBFF;
-  --pgn-color-info-100: #EFF8FAFF;
-  --pgn-color-success-100: #F2FAF7FF;
-  --pgn-color-brand-100: #F49974FF;
-  --pgn-color-primary-100: #FEFEFEFF;
-  --pgn-color-gray-100: #EBEBEBFF;
-  --pgn-color-tooltip-bg-base: #F0F2F2FF;
-  --pgn-color-tooltip-light: #F0F2F2FF;
-  --pgn-color-pagination-text-base: #F0F2F2FF;
-  --pgn-color-link-hover: #004972FF;
-  --pgn-color-link-base: #00688DFF;
-  --pgn-color-headings-base: #1F453DFF;
-  --pgn-color-body-bg: #FFFFFFFF;
-  --pgn-color-form-input-focus-bg: #FFFFFFFF;
-  --pgn-color-form-input-bg-base: #FFFFFFFF;
-  --pgn-color-btn-disabled-bg-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-bg-tertiary: #FFFFFFFF;
-  --pgn-color-btn-focus-border-tertiary: #00262BFF;
-  --pgn-color-btn-focus-text-tertiary: #00262BFF;
-  --pgn-color-btn-focus-text-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-text-primary: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-brand: #D74000FF;
-  --pgn-color-btn-focus-text-brand: #FFFFFFFF;
-  --pgn-color-btn-active-border-tertiary: #00262BFF;
-  --pgn-color-btn-active-border-outline-primary: #00262BFF;
-  --pgn-color-btn-active-border-primary: #00262BFF;
-  --pgn-color-btn-active-border-outline-brand: #D74000FF;
-  --pgn-color-btn-active-border-brand: #D74000FF;
-  --pgn-color-btn-active-bg-tertiary: #FFFFFFFF;
-  --pgn-color-btn-active-bg-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-active-bg-primary: #00262BFF;
-  --pgn-color-btn-active-bg-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-active-bg-brand: #D74000FF;
-  --pgn-color-btn-active-text-tertiary: #00262BFF;
-  --pgn-color-btn-active-text-outline-primary: #00262BFF;
-  --pgn-color-btn-active-text-primary: #FFFFFFFF;
-  --pgn-color-btn-active-text-outline-brand: #D74000FF;
-  --pgn-color-btn-active-text-brand: #FFFFFFFF;
-  --pgn-color-btn-hover-border-primary: #00262BFF;
-  --pgn-color-btn-hover-border-brand: #D74000FF;
-  --pgn-color-btn-hover-bg-outline-warning: #C1A400FF;
-  --pgn-color-btn-hover-bg-tertiary: #00262BFF;
-  --pgn-color-btn-hover-bg-outline-success: #0C7145FF;
-  --pgn-color-btn-hover-bg-outline-primary: #00262BFF;
-  --pgn-color-btn-hover-bg-primary: #2D494EFF;
-  --pgn-color-btn-hover-bg-outline-light: #B4B1A8FF;
-  --pgn-color-btn-hover-bg-outline-info: #005E7FFF;
-  --pgn-color-btn-hover-bg-outline-dark: #193731FF;
-  --pgn-color-btn-hover-bg-outline-danger: #9A0C02FF;
-  --pgn-color-btn-hover-bg-outline-brand: #D74000FF;
-  --pgn-color-btn-hover-text-outline-warning: #393939FF;
-  --pgn-color-btn-hover-text-tertiary: #FFFFFFFF;
-  --pgn-color-btn-hover-text-outline-success: #FFFFFFFF;
-  --pgn-color-btn-hover-text-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-hover-text-primary: #FFFFFFFF;
-  --pgn-color-btn-hover-text-outline-light: #414141FF;
-  --pgn-color-btn-hover-text-outline-info: #FFFFFFFF;
-  --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF;
-  --pgn-color-btn-hover-text-outline-danger: #FFFFFFFF;
-  --pgn-color-btn-hover-text-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-hover-text-brand: #000000FF;
-  --pgn-color-btn-bg-outline-warning: #FFFFFFFF;
-  --pgn-color-btn-bg-warning: #C1A400FF;
-  --pgn-color-btn-bg-outline-success: #FFFFFFFF;
-  --pgn-color-btn-bg-success: #0C7145FF;
-  --pgn-color-btn-bg-outline-secondary: #FFFFFFFF;
-  --pgn-color-btn-bg-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-bg-primary: #00262BFF;
-  --pgn-color-btn-bg-outline-light: #FFFFFFFF;
-  --pgn-color-btn-bg-light: #B4B1A8FF;
-  --pgn-color-btn-bg-outline-info: #FFFFFFFF;
-  --pgn-color-btn-bg-info: #005E7FFF;
-  --pgn-color-btn-bg-outline-dark: #FFFFFFFF;
-  --pgn-color-btn-bg-dark: #193731FF;
-  --pgn-color-btn-bg-outline-danger: #FFFFFFFF;
-  --pgn-color-btn-bg-danger: #9A0C02FF;
-  --pgn-color-btn-bg-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-bg-brand: #D74000FF;
-  --pgn-color-btn-text-outline-primary: #00262BFF;
-  --pgn-color-btn-text-primary: #FFFFFFFF;
-  --pgn-color-badge-bg-info: #00BBF9FF;
-  --pgn-color-theme-active-gray: #212529FF;
-  --pgn-color-theme-active-dark: #060E0CFF;
-  --pgn-color-theme-active-light: #2D2C2AFF;
-  --pgn-color-theme-active-danger: #690E07FF;
-  --pgn-color-theme-active-warning: #7A6800FF;
-  --pgn-color-theme-active-info: #002F4AFF;
-  --pgn-color-theme-active-success: #0F4D0FFF;
-  --pgn-color-theme-active-brand: #73290CFF;
-  --pgn-color-theme-active-primary: #001B1EFF;
-  --pgn-color-theme-hover-gray: #454545FF;
-  --pgn-color-theme-hover-dark: #132925FF;
-  --pgn-color-theme-hover-light: #87857EFF;
-  --pgn-color-theme-hover-danger: #951C13FF;
-  --pgn-color-theme-hover-warning: #998200FF;
-  --pgn-color-theme-hover-info: #004972FF;
-  --pgn-color-theme-hover-success: #175B3CFF;
-  --pgn-color-theme-hover-brand: #A33508FF;
-  --pgn-color-theme-hover-primary: #002121FF;
-  --pgn-color-theme-default-gray: #707070FF;
-  --pgn-color-theme-default-dark: #1F453DFF;
-  --pgn-color-theme-default-light: #E1DDD2FF;
-  --pgn-color-theme-default-danger: #AB0D02FF;
-  --pgn-color-theme-default-warning: #D6B600FF;
-  --pgn-color-theme-default-info: #00688DFF;
-  --pgn-color-theme-default-success: #0D7D4DFF;
-  --pgn-color-theme-default-brand: #D74000FF;
-  --pgn-color-theme-default-primary: #00262BFF;
-  --pgn-color-theme-focus-gray: #707070FF;
-  --pgn-color-theme-focus-dark: #1F453DFF;
-  --pgn-color-theme-focus-light: #E1DDD2FF;
-  --pgn-color-theme-focus-danger: #AB0D02FF;
-  --pgn-color-theme-focus-warning: #D6B600FF;
-  --pgn-color-theme-focus-info: #00688DFF;
-  --pgn-color-theme-focus-success: #0D7D4DFF;
-  --pgn-color-theme-focus-brand: #D74000FF;
-  --pgn-color-theme-focus-primary: #00262BFF;
-  --pgn-color-theme-border-gray: #CCCCCCFF;
-  --pgn-color-theme-border-dark: #BFC9CAFF;
-  --pgn-color-theme-border-light: #F3F1EDFF;
-  --pgn-color-theme-border-danger: #F3AEA9FF;
-  --pgn-color-theme-border-warning: #FFEA75FF;
-  --pgn-color-theme-border-info: #9CD2E6FF;
-  --pgn-color-theme-border-success: #BBE6D7FF;
-  --pgn-color-theme-border-brand: #EE855AFF;
-  --pgn-color-theme-border-primary: #BFC9CAFF;
-  --pgn-color-bg-active: #F0F2F2FF;
-  --pgn-elevation-box-shadow-lg: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-box-shadow-sm: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-box-shadow-base: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-toast-box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-popover-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-modal-content-box-shadow-sm-up: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15);
-  --pgn-elevation-dropdown-box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
-  --pgn-typography-input-btn-line-height-lg: 1.5;
-  --pgn-typography-btn-line-height-sm: 1.4286;
-  --pgn-typography-btn-line-height-base: 1.3333;
-  --pgn-typography-btn-font-weight: 400;
-  --pgn-typography-btn-font-size-lg: 1.325rem;
-  --pgn-typography-btn-font-size-sm: .875rem;
-  --pgn-typography-btn-font-size-base: 1.125rem;
-  --pgn-typography-btn-font-family: inherit;
-  --pgn-spacing-btn-focus-border-gap: calc(2px + 2px);
-  --pgn-spacing-btn-focus-gap: 2px;
-  --pgn-spacing-btn-padding-x-sm: .75rem;
-  --pgn-spacing-btn-padding-x-lg: 1.25rem;
-  --pgn-spacing-btn-padding-x-base: 1rem;
-  --pgn-spacing-btn-padding-y-sm: .4375rem;
-  --pgn-spacing-btn-padding-y-lg: .6875rem;
-  --pgn-spacing-btn-padding-y-base: .5625rem;
-  --pgn-size-input-btn-border-width: 1px;
-  --pgn-color-form-input-focus-border: #454545FF;
-  --pgn-color-form-input-base: #454545FF;
-  --pgn-color-btn-disabled-bg-warning: #C1A400FF;
-  --pgn-color-btn-disabled-bg-success: #0C7145FF;
-  --pgn-color-btn-disabled-bg-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-disabled-bg-primary: #00262BFF;
-  --pgn-color-btn-disabled-bg-light: #B4B1A8FF;
-  --pgn-color-btn-disabled-bg-info: #005E7FFF;
-  --pgn-color-btn-disabled-bg-dark: #193731FF;
-  --pgn-color-btn-disabled-bg-danger: #9A0C02FF;
-  --pgn-color-btn-disabled-bg-brand: #F49974FF;
-  --pgn-color-btn-disabled-text-outline-warning: #393939FF;
-  --pgn-color-btn-disabled-text-outline-success: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-primary: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-outline-light: #414141FF;
-  --pgn-color-btn-disabled-text-outline-info: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-outline-dark: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-outline-danger: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-outline-warning: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-warning: #C1A400FF;
-  --pgn-color-btn-focus-bg-outline-success: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-success: #0C7145FF;
-  --pgn-color-btn-focus-bg-outline-secondary: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-primary: #00262BFF;
-  --pgn-color-btn-focus-bg-outline-light: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-light: #B4B1A8FF;
-  --pgn-color-btn-focus-bg-outline-info: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-info: #005E7FFF;
-  --pgn-color-btn-focus-bg-outline-dark: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-dark: #193731FF;
-  --pgn-color-btn-focus-bg-outline-danger: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-danger: #9A0C02FF;
-  --pgn-color-btn-focus-bg-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-brand: #D74000FF;
-  --pgn-color-btn-active-border-outline-warning: #C1A400FF;
-  --pgn-color-btn-active-border-warning: #7A6800FF;
-  --pgn-color-btn-active-border-outline-success: #0C7145FF;
-  --pgn-color-btn-active-border-success: #0F4D0FFF;
-  --pgn-color-btn-active-border-outline-light: #B4B1A8FF;
-  --pgn-color-btn-active-border-light: #2D2C2AFF;
-  --pgn-color-btn-active-border-outline-info: #005E7FFF;
-  --pgn-color-btn-active-border-info: #002F4AFF;
-  --pgn-color-btn-active-border-outline-dark: #193731FF;
-  --pgn-color-btn-active-border-dark: #060E0CFF;
-  --pgn-color-btn-active-border-outline-danger: #9A0C02FF;
-  --pgn-color-btn-active-border-danger: #690E07FF;
-  --pgn-color-btn-active-bg-outline-warning: #C1A400FF;
-  --pgn-color-btn-active-bg-warning: #7A6800FF;
-  --pgn-color-btn-active-bg-outline-success: #0C7145FF;
-  --pgn-color-btn-active-bg-success: #0F4D0FFF;
-  --pgn-color-btn-active-bg-outline-light: #B4B1A8FF;
-  --pgn-color-btn-active-bg-light: #2D2C2AFF;
-  --pgn-color-btn-active-bg-outline-info: #005E7FFF;
-  --pgn-color-btn-active-bg-info: #002F4AFF;
-  --pgn-color-btn-active-bg-outline-dark: #193731FF;
-  --pgn-color-btn-active-bg-dark: #060E0CFF;
-  --pgn-color-btn-active-bg-outline-danger: #9A0C02FF;
-  --pgn-color-btn-active-bg-danger: #690E07FF;
-  --pgn-color-btn-hover-border-outline-warning: #C1A400FF;
-  --pgn-color-btn-hover-border-outline-success: #0C7145FF;
-  --pgn-color-btn-hover-border-outline-primary: #00262BFF;
-  --pgn-color-btn-hover-border-outline-light: #B4B1A8FF;
-  --pgn-color-btn-hover-border-outline-info: #005E7FFF;
-  --pgn-color-btn-hover-border-outline-dark: #193731FF;
-  --pgn-color-btn-hover-border-outline-danger: #9A0C02FF;
-  --pgn-color-btn-hover-border-outline-brand: #D74000FF;
-  --pgn-color-btn-hover-bg-warning: #998200FF;
-  --pgn-color-btn-hover-bg-success: #175B3CFF;
-  --pgn-color-btn-hover-bg-light: #87857EFF;
-  --pgn-color-btn-hover-bg-info: #004972FF;
-  --pgn-color-btn-hover-bg-dark: #132925FF;
-  --pgn-color-btn-hover-bg-danger: #951C13FF;
-  --pgn-color-btn-hover-bg-brand: #F49974FF;
-  --pgn-color-btn-border-outline-warning: #C1A400FF;
-  --pgn-color-btn-border-warning: #C1A400FF;
-  --pgn-color-btn-border-outline-success: #0C7145FF;
-  --pgn-color-btn-border-success: #0C7145FF;
-  --pgn-color-btn-border-outline-primary: #00262BFF;
-  --pgn-color-btn-border-primary: #00262BFF;
-  --pgn-color-btn-border-outline-light: #B4B1A8FF;
-  --pgn-color-btn-border-light: #B4B1A8FF;
-  --pgn-color-btn-border-outline-info: #005E7FFF;
-  --pgn-color-btn-border-info: #005E7FFF;
-  --pgn-color-btn-border-outline-dark: #193731FF;
-  --pgn-color-btn-border-dark: #193731FF;
-  --pgn-color-btn-border-outline-danger: #9A0C02FF;
-  --pgn-color-btn-border-danger: #9A0C02FF;
-  --pgn-color-btn-border-outline-brand: #D74000FF;
-  --pgn-color-btn-border-brand: #D74000FF;
-  --pgn-color-btn-text-outline-warning: #C1A400FF;
-  --pgn-color-btn-text-warning: #393939FF;
-  --pgn-color-btn-text-outline-success: #0C7145FF;
-  --pgn-color-btn-text-success: #FFFFFFFF;
-  --pgn-color-btn-text-outline-light: #B4B1A8FF;
-  --pgn-color-btn-text-light: #414141FF;
-  --pgn-color-btn-text-outline-info: #005E7FFF;
-  --pgn-color-btn-text-info: #FFFFFFFF;
-  --pgn-color-btn-text-outline-dark: #193731FF;
-  --pgn-color-btn-text-dark: #FFFFFFFF;
-  --pgn-color-btn-text-outline-danger: #9A0C02FF;
-  --pgn-color-btn-text-danger: #FFFFFFFF;
-  --pgn-color-btn-text-outline-brand: #D74000FF;
-  --pgn-color-btn-text-brand: #FFFFFFFF;
-  --pgn-color-theme-bg-gray: #EBEBEBFF;
-  --pgn-color-theme-bg-dark: #D2DAD8FF;
-  --pgn-color-theme-bg-light: #F9F8F6FF;
-  --pgn-color-theme-bg-danger: #FCF1F4FF;
-  --pgn-color-theme-bg-warning: #FFFADBFF;
-  --pgn-color-theme-bg-info: #EFF8FAFF;
-  --pgn-color-theme-bg-success: #F2FAF7FF;
-  --pgn-color-theme-bg-brand: #F49974FF;
-  --pgn-color-theme-bg-primary: #FEFEFEFF;
-  --pgn-color-input-btn-focus: #F0F2F2FF;
-  --pgn-typography-btn-line-height-lg: 1.5;
-  --pgn-spacing-btn-focus-distance-to-border: calc(calc(2px + 2px) + 1px);
-  --pgn-size-btn-border-width: 1px;
-  --pgn-color-btn-disabled-border-outline-warning: #C1A400FF;
-  --pgn-color-btn-disabled-border-warning: #C1A400FF;
-  --pgn-color-btn-disabled-border-outline-success: #0C7145FF;
-  --pgn-color-btn-disabled-border-success: #0C7145FF;
-  --pgn-color-btn-disabled-border-outline-primary: #00262BFF;
-  --pgn-color-btn-disabled-border-primary: #00262BFF;
-  --pgn-color-btn-disabled-border-outline-light: #B4B1A8FF;
-  --pgn-color-btn-disabled-border-light: #B4B1A8FF;
-  --pgn-color-btn-disabled-border-outline-info: #005E7FFF;
-  --pgn-color-btn-disabled-border-info: #005E7FFF;
-  --pgn-color-btn-disabled-border-outline-dark: #193731FF;
-  --pgn-color-btn-disabled-border-dark: #193731FF;
-  --pgn-color-btn-disabled-border-outline-danger: #9A0C02FF;
-  --pgn-color-btn-disabled-border-danger: #9A0C02FF;
-  --pgn-color-btn-disabled-border-outline-brand: #D74000FF;
-  --pgn-color-btn-disabled-border-brand: #D74000FF;
-  --pgn-color-btn-disabled-text-warning: #393939FF;
-  --pgn-color-btn-disabled-text-success: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-light: #414141FF;
-  --pgn-color-btn-disabled-text-info: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-dark: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-danger: #FFFFFFFF;
-  --pgn-color-btn-disabled-text-outline-brand: #D74000FF;
-  --pgn-color-btn-disabled-text-brand: #FFFFFFFF;
-  --pgn-color-btn-focus-outline-outline-warning: #C1A400FF;
-  --pgn-color-btn-focus-outline-warning: #C1A400FF;
-  --pgn-color-btn-focus-outline-outline-success: #0C7145FF;
-  --pgn-color-btn-focus-outline-success: #0C7145FF;
-  --pgn-color-btn-focus-outline-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-outline-outline-light: #B4B1A8FF;
-  --pgn-color-btn-focus-outline-light: #B4B1A8FF;
-  --pgn-color-btn-focus-outline-outline-info: #005E7FFF;
-  --pgn-color-btn-focus-outline-info: #005E7FFF;
-  --pgn-color-btn-focus-outline-outline-dark: #193731FF;
-  --pgn-color-btn-focus-outline-dark: #193731FF;
-  --pgn-color-btn-focus-outline-outline-danger: #9A0C02FF;
-  --pgn-color-btn-focus-outline-danger: #9A0C02FF;
-  --pgn-color-btn-focus-outline-outline-brand: #D74000FF;
-  --pgn-color-btn-focus-outline-brand: #D74000FF;
-  --pgn-color-btn-focus-border-outline-warning: #C1A400FF;
-  --pgn-color-btn-focus-border-warning: #C1A400FF;
-  --pgn-color-btn-focus-border-outline-success: #0C7145FF;
-  --pgn-color-btn-focus-border-success: #0C7145FF;
-  --pgn-color-btn-focus-border-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-border-primary: #00262BFF;
-  --pgn-color-btn-focus-border-outline-light: #B4B1A8FF;
-  --pgn-color-btn-focus-border-light: #B4B1A8FF;
-  --pgn-color-btn-focus-border-outline-info: #005E7FFF;
-  --pgn-color-btn-focus-border-info: #005E7FFF;
-  --pgn-color-btn-focus-border-outline-dark: #193731FF;
-  --pgn-color-btn-focus-border-dark: #193731FF;
-  --pgn-color-btn-focus-border-outline-danger: #9A0C02FF;
-  --pgn-color-btn-focus-border-danger: #9A0C02FF;
-  --pgn-color-btn-focus-border-outline-brand: #D74000FF;
-  --pgn-color-btn-focus-border-brand: #D74000FF;
-  --pgn-color-btn-focus-text-outline-warning: #C1A400FF;
-  --pgn-color-btn-focus-text-warning: #393939FF;
-  --pgn-color-btn-focus-text-outline-success: #0C7145FF;
-  --pgn-color-btn-focus-text-success: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-light: #B4B1A8FF;
-  --pgn-color-btn-focus-text-light: #414141FF;
-  --pgn-color-btn-focus-text-outline-info: #005E7FFF;
-  --pgn-color-btn-focus-text-info: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-dark: #193731FF;
-  --pgn-color-btn-focus-text-dark: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-danger: #9A0C02FF;
-  --pgn-color-btn-focus-text-danger: #FFFFFFFF;
-  --pgn-color-btn-active-outline-outline-primary: #00262BFF;
-  --pgn-color-btn-active-outline-primary: #00262BFF;
+  --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-focus-outline-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-btn-border-outline-secondary);
+  --pgn-color-btn-focus-outline-secondary: var(--pgn-color-btn-border-secondary);
+  --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-btn-border-outline-primary);
+  --pgn-color-btn-focus-outline-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-btn-border-outline-light);
+  --pgn-color-btn-focus-outline-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-focus-outline-info: var(--pgn-color-btn-border-info);
+  --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-btn-border-outline-dark);
+  --pgn-color-btn-focus-outline-dark: var(--pgn-color-btn-border-dark);
+  --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-focus-outline-danger: var(--pgn-color-btn-border-danger);
+  --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-focus-outline-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-focus-bg-outline-warning: var(--pgn-color-btn-bg-outline-warning);
+  --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-focus-bg-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-focus-bg-outline-success: var(--pgn-color-btn-bg-outline-success);
+  --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-focus-bg-outline-secondary: var(--pgn-color-btn-bg-outline-secondary);
+  --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-bg-outline-primary: var(--pgn-color-btn-bg-outline-primary);
+  --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-focus-bg-outline-light: var(--pgn-color-btn-bg-outline-light);
+  --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-focus-bg-outline-info: var(--pgn-color-btn-bg-outline-info);
+  --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-focus-bg-outline-dark: var(--pgn-color-btn-bg-outline-dark);
+  --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-focus-bg-outline-danger: var(--pgn-color-btn-bg-outline-danger);
+  --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-focus-bg-outline-brand: var(--pgn-color-btn-bg-outline-brand);
+  --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-btn-focus-border-tertiary: var(--pgn-color-primary-500);
+  --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary);
+  --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-border-secondary);
+  --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary);
+  --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light);
+  --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info);
+  --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark);
+  --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-border-dark);
+  --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-border-danger);
+  --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-focus-text-tertiary: var(--pgn-color-primary-500);
+  --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary);
+  --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-focus-text-primary: var(--pgn-color-white);
+  --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light);
+  --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-focus-text-outline-dark: var(--pgn-color-btn-text-outline-dark);
+  --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger);
+  --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-focus-text-brand: var(--pgn-color-white);
+  --pgn-color-btn-active-outline-outline-primary: var(--pgn-color-btn-border-outline-primary);
+  --pgn-color-btn-active-outline-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-active-border-outline-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-border-tertiary: var(--pgn-color-primary-500);
+  --pgn-color-btn-active-border-outline-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-border-outline-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-active-border-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-active-border-outline-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-active-border-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-border-outline-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-border-outline-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-border-outline-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-border-outline-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-active-border-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-bg-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-active-bg-outline-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-active-bg-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-active-bg-outline-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-active-bg-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-bg-outline-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-active-bg-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-active-bg-brand: var(--pgn-color-brand-500);
   --pgn-color-btn-active-text-outline-warning: #393939FF;
   --pgn-color-btn-active-text-warning: #FFFFFFFF;
+  --pgn-color-btn-active-text-tertiary: var(--pgn-color-primary-500);
   --pgn-color-btn-active-text-outline-success: #FFFFFFFF;
   --pgn-color-btn-active-text-success: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-secondary: #FFFFFFFF;
+  --pgn-color-btn-active-text-secondary: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-active-text-primary: var(--pgn-color-white);
   --pgn-color-btn-active-text-outline-light: #414141FF;
   --pgn-color-btn-active-text-light: #FFFFFFFF;
   --pgn-color-btn-active-text-outline-info: #FFFFFFFF;
@@ -478,47 +406,231 @@
   --pgn-color-btn-active-text-dark: #FFFFFFFF;
   --pgn-color-btn-active-text-outline-danger: #FFFFFFFF;
   --pgn-color-btn-active-text-danger: #FFFFFFFF;
-  --pgn-color-btn-hover-border-warning: #998200FF;
-  --pgn-color-btn-hover-border-success: #175B3CFF;
-  --pgn-color-btn-hover-border-light: #87857EFF;
-  --pgn-color-btn-hover-border-info: #004972FF;
-  --pgn-color-btn-hover-border-dark: #132925FF;
-  --pgn-color-btn-hover-border-danger: #951C13FF;
-  --pgn-color-btn-hover-bg-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-hover-bg-secondary: #747474FF;
+  --pgn-color-btn-active-text-outline-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-active-text-brand: var(--pgn-color-white);
+  --pgn-color-btn-hover-border-outline-warning: var(--pgn-color-btn-hover-bg-outline-warning);
+  --pgn-color-btn-hover-border-warning: var(--pgn-color-btn-hover-bg-warning);
+  --pgn-color-btn-hover-border-outline-success: var(--pgn-color-btn-hover-bg-outline-success);
+  --pgn-color-btn-hover-border-success: var(--pgn-color-btn-hover-bg-success);
+  --pgn-color-btn-hover-border-outline-secondary: var(--pgn-color-btn-hover-bg-outline-secondary);
+  --pgn-color-btn-hover-border-secondary: var(--pgn-color-btn-hover-bg-secondary);
+  --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-btn-hover-bg-outline-primary);
+  --pgn-color-btn-hover-border-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-hover-border-outline-light: var(--pgn-color-btn-hover-bg-outline-light);
+  --pgn-color-btn-hover-border-light: var(--pgn-color-btn-hover-bg-light);
+  --pgn-color-btn-hover-border-outline-info: var(--pgn-color-btn-hover-bg-outline-info);
+  --pgn-color-btn-hover-border-info: var(--pgn-color-btn-hover-bg-info);
+  --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-btn-hover-bg-outline-dark);
+  --pgn-color-btn-hover-border-dark: var(--pgn-color-btn-hover-bg-dark);
+  --pgn-color-btn-hover-border-outline-danger: var(--pgn-color-btn-hover-bg-outline-danger);
+  --pgn-color-btn-hover-border-danger: var(--pgn-color-btn-hover-bg-danger);
+  --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-btn-hover-bg-outline-brand);
+  --pgn-color-btn-hover-border-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-hover-bg-outline-warning: var(--pgn-color-warning-600);
+  --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-primary-500);
+  --pgn-color-btn-hover-bg-outline-success: var(--pgn-color-success-600);
+  --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-bg-outline-secondary: var(--pgn-color-secondary-600);
+  --pgn-color-btn-hover-bg-secondary: var(--pgn-color-secondary-400);
+  --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-hover-bg-primary: var(--pgn-color-primary-300);
+  --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-600);
+  --pgn-color-btn-hover-bg-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-bg-outline-info: var(--pgn-color-info-600);
+  --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-600);
+  --pgn-color-btn-hover-bg-dark: var(--pgn-color-theme-hover-dark);
+  --pgn-color-btn-hover-bg-outline-danger: var(--pgn-color-danger-600);
+  --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-hover-bg-brand: var(--pgn-color-brand-100);
+  --pgn-color-btn-hover-text-outline-warning: #393939FF;
   --pgn-color-btn-hover-text-warning: #FFFFFFFF;
+  --pgn-color-btn-hover-text-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-hover-text-outline-success: #FFFFFFFF;
   --pgn-color-btn-hover-text-success: #FFFFFFFF;
   --pgn-color-btn-hover-text-outline-secondary: #FFFFFFFF;
+  --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
+  --pgn-color-btn-hover-text-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-hover-text-primary: var(--pgn-color-white);
+  --pgn-color-btn-hover-text-outline-light: #414141FF;
   --pgn-color-btn-hover-text-light: #1E1E1EFF;
+  --pgn-color-btn-hover-text-outline-info: #FFFFFFFF;
   --pgn-color-btn-hover-text-info: #FFFFFFFF;
+  --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF;
   --pgn-color-btn-hover-text-dark: #FFFFFFFF;
+  --pgn-color-btn-hover-text-outline-danger: #FFFFFFFF;
   --pgn-color-btn-hover-text-danger: #FFFFFFFF;
-  --pgn-color-btn-bg-secondary: #3E3E3EFF;
-  --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FCF1F4FF' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E");
-  --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='%23F2FAF7FF' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e");
-  --pgn-color-btn-disabled-bg-secondary: #3E3E3EFF;
-  --pgn-color-btn-disabled-text-outline-secondary: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-secondary: #3E3E3EFF;
-  --pgn-color-btn-active-border-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-active-border-secondary: #303030FF;
-  --pgn-color-btn-active-bg-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-active-bg-secondary: #303030FF;
-  --pgn-color-btn-hover-border-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-hover-border-secondary: #747474FF;
-  --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-border-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-border-secondary: #3E3E3EFF;
-  --pgn-color-btn-text-outline-secondary: #3E3E3EFF;
+  --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-hover-text-brand: var(--pgn-color-black);
+  --pgn-color-btn-border-outline-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-border-outline-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-border-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-border-outline-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-border-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-border-outline-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-border-outline-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-border-outline-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-border-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-border-outline-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-border-outline-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-border-outline-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-bg-outline-warning: var(--pgn-color-white);
+  --pgn-color-btn-bg-warning: var(--pgn-color-warning-600);
+  --pgn-color-btn-bg-outline-success: var(--pgn-color-white);
+  --pgn-color-btn-bg-success: var(--pgn-color-success-600);
+  --pgn-color-btn-bg-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-600);
+  --pgn-color-btn-bg-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-bg-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-bg-outline-light: var(--pgn-color-white);
+  --pgn-color-btn-bg-light: var(--pgn-color-light-600);
+  --pgn-color-btn-bg-outline-info: var(--pgn-color-white);
+  --pgn-color-btn-bg-info: var(--pgn-color-info-600);
+  --pgn-color-btn-bg-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-bg-dark: var(--pgn-color-dark-600);
+  --pgn-color-btn-bg-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-bg-danger: var(--pgn-color-danger-600);
+  --pgn-color-btn-bg-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-bg-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-text-outline-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-text-warning: #393939FF;
+  --pgn-color-btn-text-outline-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-text-success: #FFFFFFFF;
+  --pgn-color-btn-text-outline-secondary: var(--pgn-color-btn-bg-secondary);
   --pgn-color-btn-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-disabled-border-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-disabled-border-secondary: #3E3E3EFF;
-  --pgn-color-btn-disabled-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-focus-outline-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-focus-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-focus-border-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-focus-border-secondary: #3E3E3EFF;
-  --pgn-color-btn-focus-text-outline-secondary: #3E3E3EFF;
-  --pgn-color-btn-focus-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-active-text-outline-secondary: #FFFFFFFF;
-  --pgn-color-btn-active-text-secondary: #FFFFFFFF;
+  --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-text-primary: var(--pgn-color-white);
+  --pgn-color-btn-text-outline-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-text-light: #414141FF;
+  --pgn-color-btn-text-outline-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-text-info: #FFFFFFFF;
+  --pgn-color-btn-text-outline-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-text-dark: #FFFFFFFF;
+  --pgn-color-btn-text-outline-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-text-danger: #FFFFFFFF;
+  --pgn-color-btn-text-outline-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-text-brand: #FFFFFFFF;
+  --pgn-color-badge-bg-info: var(--pgn-color-accent-a);
+  --pgn-color-theme-active-gray: var(--pgn-color-gray-900); /* Theme-specific gray active color. */
+  --pgn-color-theme-active-dark: var(--pgn-color-dark-900); /* Theme-specific dark active color. */
+  --pgn-color-theme-active-light: var(--pgn-color-light-900); /* Theme-specific light active color. */
+  --pgn-color-theme-active-danger: var(--pgn-color-danger-900); /* Theme-specific danger active color. */
+  --pgn-color-theme-active-warning: var(--pgn-color-warning-900); /* Theme-specific warning active color. */
+  --pgn-color-theme-active-info: var(--pgn-color-info-900); /* Theme-specific info active color. */
+  --pgn-color-theme-active-success: var(--pgn-color-success-900); /* Theme-specific success active color. */
+  --pgn-color-theme-active-brand: var(--pgn-color-brand-900); /* Theme-specific brand active color. */
+  --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); /* Theme-specific secondary active color. */
+  --pgn-color-theme-active-primary: var(--pgn-color-primary-900); /* Theme-specific primary active color. */
+  --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); /* Theme-specific gray hover color. */
+  --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); /* Theme-specific dark hover color. */
+  --pgn-color-theme-hover-light: var(--pgn-color-light-700); /* Theme-specific light hover color. */
+  --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); /* Theme-specific danger hover color. */
+  --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); /* Theme-specific warning hover color. */
+  --pgn-color-theme-hover-info: var(--pgn-color-info-700); /* Theme-specific info hover color. */
+  --pgn-color-theme-hover-success: var(--pgn-color-success-700); /* Theme-specific success hover color. */
+  --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); /* Theme-specific brand hover color. */
+  --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); /* Theme-specific primary hover color. */
+  --pgn-color-theme-default-gray: var(--pgn-color-gray-500); /* Theme-specific gray default color. */
+  --pgn-color-theme-default-dark: var(--pgn-color-dark-500); /* Theme-specific dark default color. */
+  --pgn-color-theme-default-light: var(--pgn-color-light-500); /* Theme-specific light default color. */
+  --pgn-color-theme-default-danger: var(--pgn-color-danger-500); /* Theme-specific danger default color. */
+  --pgn-color-theme-default-warning: var(--pgn-color-warning-500); /* Theme-specific warning default color. */
+  --pgn-color-theme-default-info: var(--pgn-color-info-500); /* Theme-specific info default color. */
+  --pgn-color-theme-default-success: var(--pgn-color-success-500); /* Theme-specific success default color. */
+  --pgn-color-theme-default-brand: var(--pgn-color-brand-500); /* Theme-specific brand default color. */
+  --pgn-color-theme-default-primary: var(--pgn-color-primary-500); /* Theme-specific primary default color. */
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); /* Theme-specific gray focus color. */
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); /* Theme-specific dark focus color. */
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500); /* Theme-specific light focus color. */
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); /* Theme-specific danger focus color. */
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); /* Theme-specific warning focus color. */
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500); /* Theme-specific info focus color. */
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500); /* Theme-specific success focus color. */
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); /* Theme-specific brand focus color. */
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); /* Theme-specific primary focus color. */
+  --pgn-color-theme-border-gray: var(--pgn-color-gray-200); /* Theme-specific gray border color. */
+  --pgn-color-theme-border-dark: var(--pgn-color-dark-200); /* Theme-specific dark border color. */
+  --pgn-color-theme-border-light: var(--pgn-color-light-200); /* Theme-specific light border color. */
+  --pgn-color-theme-border-danger: var(--pgn-color-danger-200); /* Theme-specific danger border color. */
+  --pgn-color-theme-border-warning: var(--pgn-color-warning-200); /* Theme-specific warning border color. */
+  --pgn-color-theme-border-info: var(--pgn-color-info-200); /* Theme-specific info border color. */
+  --pgn-color-theme-border-success: var(--pgn-color-success-200); /* Theme-specific success border color. */
+  --pgn-color-theme-border-brand: var(--pgn-color-brand-200); /* Theme-specific brand border color. */
+  --pgn-color-theme-border-primary: var(--pgn-color-primary-200); /* Theme-specific primary border color. */
+  --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); /* Theme-specific gray background color. */
+  --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); /* Theme-specific dark background color. */
+  --pgn-color-theme-bg-light: var(--pgn-color-light-100); /* Theme-specific light background color. */
+  --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); /* Theme-specific danger background color. */
+  --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); /* Theme-specific warning background color. */
+  --pgn-color-theme-bg-info: var(--pgn-color-info-100); /* Theme-specific info background color. */
+  --pgn-color-theme-bg-success: var(--pgn-color-success-100); /* Theme-specific success background color. */
+  --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); /* Theme-specific brand background color. */
+  --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); /* Theme-specific primary background color. */
+  --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
+  --pgn-color-bg-active: var(--pgn-color-primary-base); /* Active background color. */
+  --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23AB0D02FF' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E");
+  --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='%230D7D4DFF' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e");
+  --pgn-other-btn-disabled-opacity: .3;
+  --pgn-elevation-box-shadow-lg: var(--pgn-elevation-box-shadow-level-3); /* Large box shadow. */
+  --pgn-elevation-box-shadow-sm: var(--pgn-elevation-box-shadow-level-1); /* Small box shadow. */
+  --pgn-elevation-box-shadow-base: var(--pgn-elevation-box-shadow-level-2); /* Default box shadow. */
+  --pgn-elevation-box-shadow-level-4: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-toast-box-shadow: var(--pgn-elevation-box-shadow-level-4);
+  --pgn-elevation-image-thumbnail-box-shadow: none;
+  --pgn-elevation-form-input-base: none;
+  --pgn-elevation-popover-box-shadow: var(--pgn-elevation-box-shadow-level-2);
+  --pgn-elevation-modal-content-box-shadow-sm-up: var(--pgn-elevation-box-shadow-level-3);
+  --pgn-elevation-dropdown-box-shadow: var(--pgn-elevation-box-shadow-level-2);
+  --pgn-transition-btn: none;
+  --pgn-typography-line-height-lg: 1.5; /* Large line height. */
+  --pgn-typography-font-weight-normal: 400; /* Normal font weight. */
+  --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
+  --pgn-typography-input-btn-line-height-sm: 1.4286;
+  --pgn-typography-input-btn-line-height-base: 1.3333;
+  --pgn-typography-input-btn-font-size-lg: 1.325rem;
+  --pgn-typography-input-btn-font-size-sm: 0.875rem;
+  --pgn-typography-input-btn-font-size-base: 1.125rem;
+  --pgn-typography-input-btn-font-family: inherit;
+  --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+  --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+  --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+  --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
+  --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+  --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+  --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+  --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
+  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
+  --pgn-spacing-input-btn-padding-lg-y: 0.6875rem;
+  --pgn-spacing-input-btn-padding-sm-x: 0.75rem;
+  --pgn-spacing-input-btn-padding-sm-y: 0.4375rem;
+  --pgn-spacing-input-btn-padding-x: 1rem;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
+  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
+  --pgn-spacing-btn-block-spacing-y: 0.5rem;
+  --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
+  --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
+  --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
+  --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+  --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+  --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-size-input-btn-focus-width: 1px;
+  --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
+  --pgn-size-form-input-width-focus: 0.063rem;
+  --pgn-size-btn-focus-width: 2px;
+  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
+  --pgn-size-border-width: 1px; /* Default border width. */
 }
diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
index 4606f29..74b7c96 100644
--- a/tokens/src/core/alias/size.json
+++ b/tokens/src/core/alias/size.json
@@ -2,9 +2,9 @@
   "size": {
     "border": {
       "radius": {
-        "base": { "value": ".375rem" },
-        "lg": { "value": ".375rem" },
-        "sm": { "value": ".375rem" }
+        "base": { "$value": ".375rem" },
+        "lg": { "$value": ".375rem" },
+        "sm": { "$value": ".375rem" }
       }
     }
   }
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
index f1fe100..4b79eb7 100644
--- a/tokens/src/core/components/Badge.json
+++ b/tokens/src/core/components/Badge.json
@@ -2,8 +2,8 @@
   "typography": {
     "badge": {
       "font": {
-        "size": { "value": "0.75rem" },
-        "weight": { "value": "400" }
+        "size": { "$value": "0.75rem" },
+        "weight": { "$value": "400" }
       }
     }
   }
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index 40b73af..3c21a34 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -2,14 +2,14 @@
   "spacing": {
     "btn": {
       "focus": {
-        "gap": { "value": "2px" }
+        "gap": { "$value": "2px" }
       }
     }
   },
   "typography": {
     "btn": {
       "font": {
-        "weight": { "value": "500" }
+        "weight": { "$value": "500" }
       }
     }
   },
@@ -17,20 +17,20 @@
     "btn": {
       "border": {
         "radius": {
-          "base": { "value": "100px", "type": "dimension", "source": "$btn-border-radius" },
-          "lg": { "value": "100px", "type": "dimension", "source": "$btn-border-radius-lg" },
-          "sm": { "value": "100px", "type": "dimension", "source": "$btn-border-radius-sm" }
+          "base": { "$value": "100px", "$type": "dimension", "source": "$btn-border-radius" },
+          "lg": { "$value": "100px", "$type": "dimension", "source": "$btn-border-radius-lg" },
+          "sm": { "$value": "100px", "$type": "dimension", "source": "$btn-border-radius-sm" }
         }
       },
       "focus": {
         "border-radius": {
           "base": {
-            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-            "type": "dimension",
+            "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "$type": "dimension",
             "source": "$btn-focus-border-radius"
           },
-          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
-          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
+          "lg": { "$value": "{size.btn.focus.border-radius.base}", "$type": "dimension", "source": "$btn-focus-border-radius-lg" },
+          "sm": { "$value": "{size.btn.border.radius.base}", "$type": "dimension", "source": "$btn-focus-border-radius-sm" }
         }
       }
     }
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index bd5cfab..b53efd3 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -2,8 +2,8 @@
   "spacing": {
     "card": {
       "spacer": {
-        "x": { "value": "{spacing.spacer.4}" },
-        "y": { "value": "{spacing.spacer.3}" }
+        "x": { "$value": "{spacing.spacer.4}" },
+        "y": { "$value": "{spacing.spacer.3}" }
       }
     }
   }
diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
index 90d1304..abebd14 100644
--- a/tokens/src/core/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -2,7 +2,7 @@
   "size": {
     "dropdown": {
       "border": {
-        "width": { "value": "0" }
+        "width": { "$value": "0" }
       }
     }
   },
@@ -10,8 +10,8 @@
     "dropdown": {
       "padding": {
         "y": {
-          "base": { "value": "{spacing.spacer.2}" },
-          "item": { "value": "{spacing.spacer.2,5}" }
+          "base": { "$value": "{spacing.spacer.2}" },
+          "item": { "$value": "{spacing.spacer.2,5}" }
         }
       }
     }
diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
index c004602..4c1dba5 100644
--- a/tokens/src/core/components/Form/size.json
+++ b/tokens/src/core/components/Form/size.json
@@ -4,9 +4,9 @@
       "input": {
         "radius": {
           "border": {
-            "base": { "value": "0" },
-            "lg": { "value": "0" },
-            "sm": { "value": "0" }
+            "base": { "$value": "0" },
+            "lg": { "$value": "0" },
+            "sm": { "$value": "0" }
           }
         }
       }
diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json
index 3c2966c..59f65b7 100644
--- a/tokens/src/core/components/Image.json
+++ b/tokens/src/core/components/Image.json
@@ -3,7 +3,7 @@
     "image": {
       "thumbnail": {
         "border": {
-          "radius": { "value": "0" }
+          "radius": { "$value": "0" }
         }
       }
     }
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index 1477412..5cd48df 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -2,7 +2,7 @@
   "size": {
     "nav": {
       "pills": {
-        "border-radius": { "value": "0" }
+        "border-radius": { "$value": "0" }
       }
     }
   }
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
index ded3824..9abda30 100644
--- a/tokens/src/core/components/Popover.json
+++ b/tokens/src/core/components/Popover.json
@@ -2,7 +2,7 @@
   "size": {
     "popover": {
       "border": {
-        "width": { "value": "0px", "_comment": "A pixel next to zero is necessary for correct display Popover arrow." }
+        "width": { "$value": "0px", "_comment": "A pixel next to zero is necessary for correct display Popover arrow." }
       }
     }
   }
diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json
index ec43a91..c8d3021 100644
--- a/tokens/src/core/components/general/caret.json
+++ b/tokens/src/core/components/general/caret.json
@@ -1,8 +1,8 @@
 {
   "spacing": {
     "caret": {
-      "base": { "value": "calc({size.caret.width} * 1)" },
-      "vertical-align": { "value": "calc({size.caret.width} * .67)" }
+      "base": { "$value": "calc({size.caret.width} * 1)" },
+      "vertical-align": { "$value": "calc({size.caret.width} * .67)" }
     }
   }
 }
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
index 5146228..eb01525 100644
--- a/tokens/src/core/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -2,7 +2,7 @@
   "typography": {
     "headings": {
       "font": {
-        "weight": { "value": "700" }
+        "weight": { "$value": "700" }
       }
     }
   }
diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
index eeab8b2..9d04b31 100644
--- a/tokens/src/core/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -2,7 +2,7 @@
   "size": {
     "input": {
       "btn": {
-        "border-width": { "value": "1px" }
+        "border-width": { "$value": "1px" }
       }
     }
   }
diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json
deleted file mode 100644
index f55b511..0000000
--- a/tokens/src/core/global/display.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "typography": {
-    "display": {
-      "weight": {
-        "1": { "value": "700" },
-        "2": { "value": "700" },
-        "3": { "value": "700" },
-        "4": { "value": "700" }
-      }
-    }
-  }
-}
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index f0f19e7..24b5cc0 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -1,75 +1,63 @@
 {
   "spacing": {
+    "$type": "dimension",
     "spacer": {
       "base": {
-        "value": "1rem",
-        "type": "dimension",
+        "$value": "1rem",
         "source": "$spacer",
-        "description": "Basic space value"
+        "$description": "Basic space value"
       },
       "0": {
-        "value": "0",
-        "type": "dimension",
-        "description": "Space value of level 0"
+        "$value": "0",
+        "$description": "Space value of level 0"
       },
       "1": {
-        "value": "calc({spacing.spacer.base} * .25)",
-        "type": "dimension",
-        "description": "Space value of level 1"
+        "$value": "calc({spacing.spacer.base} * .25)",
+        "$description": "Space value of level 1"
       },
-      "1,5": {
-        "value": "calc({spacing.spacer.base} * .375)",
-        "type": "dimension",
-        "description": "Space value of level 1.5"
+      "1.5": {
+        "$value": "calc({spacing.spacer.base} * .375)",
+        "$description": "Space value of level 1.5"
       },
       "2": {
-        "value": "calc({spacing.spacer.base} * .5)",
-        "type": "dimension",
-        "description": "Space value of level 2"
+        "$value": "calc({spacing.spacer.base} * .5)",
+        "$description": "Space value of level 2"
       },
       "2,5": {
-        "value": "calc({spacing.spacer.base} * .75)",
-        "type": "dimension",
-        "description": "Space value of level 2.5"
+        "$value": "calc({spacing.spacer.base} * .75)",
+        "$description": "Space value of level 2.5"
       },
       "3": {
-        "value": "{spacing.spacer.base}",
-        "type": "dimension",
-        "description": "Space value of level 3"
+        "$value": "{spacing.spacer.base}",
+        "$description": "Space value of level 3"
       },
       "3,5": {
-        "value": "calc({spacing.spacer.base} * 1.25)",
-        "type": "dimension",
-        "description": "Space value of level 3.5"
+        "$value": "calc({spacing.spacer.base} * 1.25)",
+        "$description": "Space value of level 3.5"
       },
       "4": {
-        "value": "calc({spacing.spacer.base} * 1.5)",
-        "type": "dimension",
-        "description": "Space value of level 4"
+        "$value": "calc({spacing.spacer.base} * 1.5)",
+        "$description": "Space value of level 4"
       },
       "4,5": {
-        "value": "calc({spacing.spacer.base} * 2)",
-        "type": "dimension",
-        "description": "Space value of level 4.5"
+        "$value": "calc({spacing.spacer.base} * 2)",
+        "$description": "Space value of level 4.5"
       },
       "5": {
-        "value": "calc({spacing.spacer.base} * 3)",
-        "type": "dimension",
-        "description": "Space value of level 5"
+        "$value": "calc({spacing.spacer.base} * 3)",
+        "$description": "Space value of level 5"
       },
       "5,5": {
-        "value": "calc({spacing.spacer.base} * 4)",
-        "type": "dimension",
-        "description": "Space value of level 5.5"
+        "$value": "calc({spacing.spacer.base} * 4)",
+        "$description": "Space value of level 5.5"
       },
       "6": {
-        "value": "calc({spacing.spacer.base} * 5)",
-        "type": "dimension",
-        "description": "Space value of level 6"
+        "$value": "calc({spacing.spacer.base} * 5)",
+        "$description": "Space value of level 6"
       }
     },
     "grid": {
-      "gutter-width": { "value": "{spacing.spacer.5,5}" }
+      "gutter-width": { "$value": "{spacing.spacer.4}" }
     }
   }
 }
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index 148cfe1..b452475 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -4,359 +4,167 @@
       "family": {
         "sans": {
           "serif": {
-            "value": "\"Inter\", \"Helvetica Neue\", Arial, sans-serif"
+            "$value": "\"Inter\", \"Helvetica Neue\", Arial, sans-serif"
           }
         },
         "serif": {
-          "value": "{typography.font.family.sans.serif}"
+          "$value": "{typography.font.family.sans.serif}"
         },
         "monospace": {
-          "value": "\"Roboto Mono\", SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
+          "$value": "\"Roboto Mono\", SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
         }
       },
       "size": {
-        "lg": {
-          "value": "calc({typography.font.size.base} * 1.25)"
-        },
-        "small": {
+        "$type": "dimension",
+        "h1": {
           "base": {
-            "value": "0.875rem"
+            "$value": "3rem",
+            "$type": "dimension",
+            "source": "$h1-font-size",
+            "$description": "Font size of heading level 1."
           },
-          "x": {
-            "value": "0.75rem"
+          "mobile": {
+            "$value": "1.875rem",
+            "source": "$h1-mobile-font-size",
+            "$description": "Mobile font size of heading level 1."
           }
         },
-        "lead": {
-          "value": "1.375rem"
-        },
-        "base": {
-          "value": "1.125rem",
-          "type": "dimension",
-          "source": "$font-size-base",
-          "description": "Base font size."
-        },
-        "h1": {
-          "value": "3rem",
-          "type": "dimension",
-          "source": "$h1-font-size",
-          "description": "Font size of heading level 1."
-        },
         "h2": {
-          "value": "2.25rem",
-          "type": "dimension",
-          "source": "$h2-font-size",
-          "description": "Font size of heading level 2."
-        },
-        "h3": {
-          "value": "1.75rem",
-          "type": "dimension",
-          "source": "$h3-font-size",
-          "description": "Font size of heading level 3."
-        },
-        "h4": {
-          "value": "1.5rem",
-          "type": "dimension",
-          "source": "$h4-font-size",
-          "description": "Font size of heading level 4."
-        },
-        "h5": {
-          "value": "1.25rem",
-          "type": "dimension",
-          "source": "$h5-font-size",
-          "description": "Font size of heading level 5."
-        },
-        "h6": {
-          "value": "1.125rem",
-          "type": "dimension",
-          "source": "$h6-font-size",
-          "description": "Font size of heading level 6."
-        },
-        "display4": {
-          "value": "6.75rem",
-          "type": "dimension",
-          "source": "$display4-font-size",
-          "description": "Font size of display level 4."
-        },
-        "display3": {
-          "value": "5.625rem",
-          "type": "dimension",
-          "source": "$display3-font-size",
-          "description": "Font size of display level 3."
-        },
-        "display2": {
-          "value": "4.875rem",
-          "type": "dimension",
-          "source": "$display2-font-size",
-          "description": "Font size of display level 2."
-        },
-        "display1": {
-          "value": "3.75rem",
-          "type": "dimension",
-          "source": "$display1-font-size",
-          "description": "Font size of display level 1."
-        },
-        "display-subhead": {
-          "value": "3.125rem",
-          "type": "dimension",
-          "source": "$display-subhead-font-size",
-          "description": "Font size of display subhead."
-        },
-        "mobile": {
-          "h1": {
-            "value": "1.875rem",
-            "type": "dimension",
-            "source": "$h1-mobile-font-size",
-            "description": "Mobile font size of heading level 1."
+          "base": {
+            "$value": "2.25rem",
+            "source": "$h2-font-size",
+            "$description": "Font size of heading level 2."
           },
-          "h2": {
-            "value": "1.75rem",
-            "type": "dimension",
+          "mobile": {
+            "$value": "1.75rem",
             "source": "$h2-mobile-font-size",
-            "description": "Mobile font size of heading level 2."
+            "$description": "Mobile font size of heading level 2."
+          }
+        },
+        "h3": {
+          "base": {
+            "$value": "1.75rem",
+            "source": "$h3-font-size",
+            "$description": "Font size of heading level 3."
           },
-          "h3": {
-            "value": "1.5rem",
-            "type": "dimension",
+          "mobile": {
+            "$value": "1.5rem",
             "source": "$h3-mobile-font-size",
-            "description": "Mobile font size of heading level 3."
+            "$description": "Mobile font size of heading level 3."
+          }
+        },
+        "h4": {
+          "base": {
+            "$value": "1.5rem",
+            "source": "$h4-font-size",
+            "$description": "Font size of heading level 4."
           },
-          "h4": {
-            "value": "1.375rem",
-            "type": "dimension",
+          "mobile": {
+            "$value": "1.375rem",
             "source": "$h4-mobile-font-size",
-            "description": "Mobile font size of heading level 4."
-          },
-          "display4": {
-            "value": "5.25rem",
-            "type": "dimension",
-            "source": "$display4-mobile-font-size",
-            "description": "Mobile font size of display level 4."
-          },
-          "display3": {
-            "value": "4.375rem",
-            "type": "dimension",
-            "source": "$display3-mobile-font-size",
-            "description": "Mobile font size of display level 3."
-          },
-          "display2": {
-            "value": "3.625rem",
-            "type": "dimension",
-            "source": "$display2-mobile-font-size",
-            "description": "Mobile font size of display level 2."
-          },
-          "display1": {
-            "value": "3rem",
-            "type": "dimension",
-            "source": "$display1-mobile-font-size",
-            "description": "Mobile font size of display level 1."
+            "$description": "Mobile font size of heading level 4."
           }
         },
-        "body": {
-          "large": {
-            "value": "1.375rem",
-            "type": "dimension",
-            "source": "$body-large-font-size",
-            "description": "Font size of body large."
-          },
-          "default": {
-            "value": "1.125rem",
-            "type": "dimension",
-            "source": "$body-default-font-size",
-            "description": "Font size of body default."
-          },
-          "small": {
-            "value": "0.875rem",
-            "type": "dimension",
-            "source": "$body-small-font-size",
-            "description": "Font size of body small."
+        "h5": {
+          "base": {
+            "$value": "1.25rem",
+            "source": "$h5-font-size",
+            "$description": "Font size of heading level 5."
           },
-          "extra-small": {
-            "value": "0.75rem",
-            "type": "dimension",
-            "source": "$body-extra-small-font-size",
-            "description": "Font size of body extra small."
+          "mobile": {
+            "$value": "{typography.font.size.h5.base}",
+            "$description": "Mobile font size of heading level 5."
+          }
+        },
+        "h6": {
+          "base":  {
+            "$value": "1.125rem",
+            "source": "$h6-font-size",
+            "$description": "Font size of heading level 6."
           },
-          "micro": {
-            "value": "0.6875rem",
-            "type": "dimension",
-            "source": "$body-micro-font-size",
-            "description": "Font size of body micro."
+          "mobile": {
+            "$value": "{typography.font.size.h6.base}",
+            "$description": "Mobile font size of heading level 6."
           }
         },
-        "heading": {
-          "large": {
-            "value": "1.375rem",
-            "type": "dimension",
-            "source": "$heading-large-font-size",
-            "description": "Font size of heading large."
+        "display": {
+          "1": {
+            "$value": "3.75rem",
+            "source": "$display1-font-size",
+            "$description": "Font size of display level 1."
+          },
+          "2": {
+            "$value": "4.875rem",
+            "source": "$display2-font-size",
+            "$description": "Font size of display level 2."
           },
-          "default": {
-            "value": "1.125rem",
-            "type": "dimension",
-            "source": "$heading-default-font-size",
-            "description": "Font size of heading default."
+          "3": {
+            "$value": "5.625rem",
+            "source": "$display3-font-size",
+            "$description": "Font size of display level 3."
           },
-          "small": {
-            "value": "0.875rem",
-            "type": "dimension",
-            "source": "$heading-small-font-size",
-            "description": "Font size of heading small."
+          "4": {
+            "$value": "6.125rem",
+            "source": "$display4-font-size",
+            "$description": "Font size of display level 4."
           },
-          "extra-small": {
-            "value": "0.75rem",
-            "type": "dimension",
-            "source": "$heading-extra-small-font-size",
-            "description": "Font size of heading extra small."
+          "mobile": {
+            "1": {
+              "$value": "3rem",
+              "source": "$display1-mobile-size",
+              "$description": "Mobile font size of display level 1."
+            },
+            "2": {
+              "$value": "3.625rem",
+              "source": "$display2-mobile-size",
+              "$description": "Mobile font size of display level 2."
+            },
+            "3": {
+              "$value": "4.375rem",
+              "source": "$display3-mobile-size",
+              "$description": "Mobile font size of display level 3."
+            },
+            "4": {
+              "$value": "5.25rem",
+              "source": "$display4-mobile-size",
+              "$description": "Mobile font size of display level 4."
+            }
           }
         }
       },
       "weight": {
-        "lead": {
-          "value": "400"
-        },
-        "lighter": {
-          "value": "lighter",
-          "type": "fontWeight",
-          "source": "$font-weight-lighter",
-          "description": "Lighter font weight."
-        },
-        "light": {
-          "value": "300",
-          "type": "fontWeight",
-          "source": "$font-weight-light",
-          "description": "Light font weight."
-        },
-        "normal": {
-          "value": "400",
-          "type": "fontWeight",
-          "source": "$font-weight-normal",
-          "description": "Normal font weight."
-        },
-        "semi": {
-          "bold": {
-            "value": "500",
-            "type": "fontWeight",
-            "source": "$font-weight-semi-bold",
-            "description": "Semi-bold font weight."
-          }
-        },
-        "almost": {
-          "bold": {
-            "value": "600",
-            "type": "fontWeight",
-            "source": "$font-weight-almost-bold",
-            "description": "Almost bold font weight."
+        "$type": "fontWeight",
+        "display": {
+          "1": {
+            "$value": "900",
+            "source": "$display1-weight",
+            "$description": "Font weight of display level 1."
+          },
+          "2": {
+            "$value": "900",
+            "source": "$display2-weight",
+            "$description": "Font weight of display level 2."
+          },
+          "3": {
+            "$value": "900",
+            "source": "$display2-weight",
+            "$description": "Font weight of display level 3."
+          },
+          "4": {
+            "$value": "900",
+            "source": "$display2-weight",
+            "$description": "Font weight of display level 4."
           }
-        },
-        "bold": {
-          "value": "700",
-          "type": "fontWeight",
-          "source": "$font-weight-bold",
-          "description": "Bold font weight."
-        },
-        "bolder": {
-          "value": "bolder",
-          "type": "fontWeight",
-          "source": "$font-weight-bolder",
-          "description": "Bolder font weight."
-        },
-        "base": {
-          "value": "{typography.font.weight.normal}",
-          "type": "fontWeight",
-          "source": "$font-weight-base",
-          "description": "Basic font weight."
         }
-      },
-      "line-height": {
-        "base": {
-          "value": "1rem",
-          "type": "dimension",
-          "source": "$font-line-height-base",
-          "description": "Basic line height."
-        },
-        "1": {
-          "value": "{typography.font.line-height.base}",
-          "type": "dimension",
-          "source": "$font-line-height-1",
-          "description": "Line height for 16px font size."
-        },
-        "2": {
-          "value": "1.25rem",
-          "type": "dimension",
-          "source": "$font-line-height-2",
-          "description": "Line height for 20px font size."
-        },
-        "3": {
-          "value": "1.5rem",
-          "type": "dimension",
-          "source": "$font-line-height-3",
-          "description": "Line height for 24px font size."
-        },
-        "4": {
-          "value": "1.75rem",
-          "type": "dimension",
-          "source": "$font-line-height-4",
-          "description": "Line height for 28px font size."
-        },
-        "5": {
-          "value": "2.25rem",
-          "type": "dimension",
-          "source": "$font-line-height-5",
-          "description": "Line height for 36px font size."
-        },
-        "6": {
-          "value": "2.625rem",
-          "type": "dimension",
-          "source": "$font-line-height-6",
-          "description": "Line height for 42px font size."
-        },
-        "7": {
-          "value": "3rem",
-          "type": "dimension",
-          "source": "$font-line-height-7",
-          "description": "Line height for 48px font size."
-        },
-        "8": {
-          "value": "3.375rem",
-          "type": "dimension",
-          "source": "$font-line-height-8",
-          "description": "Line height for 54px font size."
-        },
-        "9": {
-          "value": "3.75rem",
-          "type": "dimension",
-          "source": "$font-line-height-9",
-          "description": "Line height for 60px font size."
-        },
-        "10": {
-          "value": "4.25rem",
-          "type": "dimension",
-          "source": "$font-line-height-10",
-          "description": "Line height for 68px font size."
-        },
-        "11": {
-          "value": "4.875rem",
-          "type": "dimension",
-          "source": "$font-line-height-11",
-          "description": "Line height for 78px font size."
-        },
-        "12": {
-          "value": "5.25rem",
-          "type": "dimension",
-          "source": "$font-line-height-12",
-          "description": "Line height for 84px font size."
-        },
-        "13": {
-          "value": "5.625rem",
-          "type": "dimension",
-          "source": "$font-line-height-13",
-          "description": "Line height for 90px font size."
-        },
-        "14": {
-          "value": "6.75rem",
-          "type": "dimension",
-          "source": "$font-line-height-14",
-          "description": "Line height for 108px font size."
+      }
+    },
+    "line-height": {
+      "$type": "number",
+      "display": {
+        "mobile": {
+          "$value": "1",
+          "source": "$display-mobile-line-height",
+          "$description": "Mobile line height of display level."
         }
       }
     }
diff --git a/tokens/src/core/utilities/color.json b/tokens/src/core/utilities/color.json
index 4b735c9..9d6c65b 100644
--- a/tokens/src/core/utilities/color.json
+++ b/tokens/src/core/utilities/color.json
@@ -3,7 +3,7 @@
     {
       "filters": {
         "category": ["color"],
-        "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"],
+        "$type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"],
         "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"]
       },
       "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"]
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index 979d84e..07f0bae 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -1,289 +1,289 @@
 {
   "color": {
     "bg": {
-      "active": { "value": "{color.primary.base}" }
+      "active": { "$value": "{color.primary.base}" }
     },
     "theme": {
       "bg": {
         "primary": {
-          "value": "{color.primary.100}",
-          "type": "color",
-          "description": "Theme-specific primary background color."
+          "$value": "{color.primary.100}",
+          "$type": "color",
+          "$description": "Theme-specific primary background color."
         },
         "brand": {
-          "value": "{color.brand.100}",
-          "type": "color",
-          "description": "Theme-specific brand background color."
+          "$value": "{color.brand.100}",
+          "$type": "color",
+          "$description": "Theme-specific brand background color."
         },
         "success": {
-          "value": "{color.success.100}",
-          "type": "color",
-          "description": "Theme-specific success background color."
+          "$value": "{color.success.100}",
+          "$type": "color",
+          "$description": "Theme-specific success background color."
         },
         "info": {
-          "value": "{color.info.100}",
-          "type": "color",
-          "description": "Theme-specific info background color."
+          "$value": "{color.info.100}",
+          "$type": "color",
+          "$description": "Theme-specific info background color."
         },
         "warning": {
-          "value": "{color.warning.100}",
-          "type": "color",
-          "description": "Theme-specific warning background color."
+          "$value": "{color.warning.100}",
+          "$type": "color",
+          "$description": "Theme-specific warning background color."
         },
         "danger": {
-          "value": "{color.danger.100}",
-          "type": "color",
-          "description": "Theme-specific danger background color."
+          "$value": "{color.danger.100}",
+          "$type": "color",
+          "$description": "Theme-specific danger background color."
         },
         "light": {
-          "value": "{color.light.100}",
-          "type": "color",
-          "description": "Theme-specific light background color."
+          "$value": "{color.light.100}",
+          "$type": "color",
+          "$description": "Theme-specific light background color."
         },
         "dark": {
-          "value": "{color.dark.100}",
-          "type": "color",
-          "description": "Theme-specific dark background color."
+          "$value": "{color.dark.100}",
+          "$type": "color",
+          "$description": "Theme-specific dark background color."
         },
         "gray": {
-          "value": "{color.gray.100}",
-          "type": "color",
-          "description": "Theme-specific gray background color."
+          "$value": "{color.gray.100}",
+          "$type": "color",
+          "$description": "Theme-specific gray background color."
         }
       },
       "border": {
         "primary": {
-          "value": "{color.primary.200}",
-          "type": "color",
-          "description": "Theme-specific primary border color."
+          "$value": "{color.primary.200}",
+          "$type": "color",
+          "$description": "Theme-specific primary border color."
         },
         "brand": {
-          "value": "{color.brand.200}",
-          "type": "color",
-          "description": "Theme-specific brand border color."
+          "$value": "{color.brand.200}",
+          "$type": "color",
+          "$description": "Theme-specific brand border color."
         },
         "success": {
-          "value": "{color.success.200}",
-          "type": "color",
-          "description": "Theme-specific success border color."
+          "$value": "{color.success.200}",
+          "$type": "color",
+          "$description": "Theme-specific success border color."
         },
         "info": {
-          "value": "{color.info.200}",
-          "type": "color",
-          "description": "Theme-specific info border color."
+          "$value": "{color.info.200}",
+          "$type": "color",
+          "$description": "Theme-specific info border color."
         },
         "warning": {
-          "value": "{color.warning.200}",
-          "type": "color",
-          "description": "Theme-specific warning border color."
+          "$value": "{color.warning.200}",
+          "$type": "color",
+          "$description": "Theme-specific warning border color."
         },
         "danger": {
-          "value": "{color.danger.200}",
-          "type": "color",
-          "description": "Theme-specific danger border color."
+          "$value": "{color.danger.200}",
+          "$type": "color",
+          "$description": "Theme-specific danger border color."
         },
         "light": {
-          "value": "{color.light.200}",
-          "type": "color",
-          "description": "Theme-specific light border color."
+          "$value": "{color.light.200}",
+          "$type": "color",
+          "$description": "Theme-specific light border color."
         },
         "dark": {
-          "value": "{color.dark.200}",
-          "type": "color",
-          "description": "Theme-specific dark border color."
+          "$value": "{color.dark.200}",
+          "$type": "color",
+          "$description": "Theme-specific dark border color."
         },
         "gray": {
-          "value": "{color.gray.200}",
-          "type": "color",
-          "description": "Theme-specific gray border color."
+          "$value": "{color.gray.200}",
+          "$type": "color",
+          "$description": "Theme-specific gray border color."
         }
       },
       "focus": {
         "primary": {
-          "value": "{color.primary.500}",
-          "type": "color",
-          "description": "Theme-specific primary focus color."
+          "$value": "{color.primary.500}",
+          "$type": "color",
+          "$description": "Theme-specific primary focus color."
         },
         "brand": {
-          "value": "{color.brand.500}",
-          "type": "color",
-          "description": "Theme-specific brand focus color."
+          "$value": "{color.brand.500}",
+          "$type": "color",
+          "$description": "Theme-specific brand focus color."
         },
         "success": {
-          "value": "{color.success.500}",
-          "type": "color",
-          "description": "Theme-specific success focus color."
+          "$value": "{color.success.500}",
+          "$type": "color",
+          "$description": "Theme-specific success focus color."
         },
         "info": {
-          "value": "{color.info.500}",
-          "type": "color",
-          "description": "Theme-specific info focus color."
+          "$value": "{color.info.500}",
+          "$type": "color",
+          "$description": "Theme-specific info focus color."
         },
         "warning": {
-          "value": "{color.warning.500}",
-          "type": "color",
-          "description": "Theme-specific warning focus color."
+          "$value": "{color.warning.500}",
+          "$type": "color",
+          "$description": "Theme-specific warning focus color."
         },
         "danger": {
-          "value": "{color.danger.500}",
-          "type": "color",
-          "description": "Theme-specific danger focus color."
+          "$value": "{color.danger.500}",
+          "$type": "color",
+          "$description": "Theme-specific danger focus color."
         },
         "light": {
-          "value": "{color.light.500}",
-          "type": "color",
-          "description": "Theme-specific light focus color."
+          "$value": "{color.light.500}",
+          "$type": "color",
+          "$description": "Theme-specific light focus color."
         },
         "dark": {
-          "value": "{color.dark.500}",
-          "type": "color",
-          "description": "Theme-specific dark focus color."
+          "$value": "{color.dark.500}",
+          "$type": "color",
+          "$description": "Theme-specific dark focus color."
         },
         "gray": {
-          "value": "{color.gray.500}",
-          "type": "color",
-          "description": "Theme-specific gray focus color."
+          "$value": "{color.gray.500}",
+          "$type": "color",
+          "$description": "Theme-specific gray focus color."
         }
       },
       "default": {
         "primary": {
-          "value": "{color.primary.500}",
-          "type": "color",
-          "description": "Theme-specific primary default color."
+          "$value": "{color.primary.500}",
+          "$type": "color",
+          "$description": "Theme-specific primary default color."
         },
         "brand": {
-          "value": "{color.brand.500}",
-          "type": "color",
-          "description": "Theme-specific brand default color."
+          "$value": "{color.brand.500}",
+          "$type": "color",
+          "$description": "Theme-specific brand default color."
         },
         "success": {
-          "value": "{color.success.500}",
-          "type": "color",
-          "description": "Theme-specific success default color."
+          "$value": "{color.success.500}",
+          "$type": "color",
+          "$description": "Theme-specific success default color."
         },
         "info": {
-          "value": "{color.info.500}",
-          "type": "color",
-          "description": "Theme-specific info default color."
+          "$value": "{color.info.500}",
+          "$type": "color",
+          "$description": "Theme-specific info default color."
         },
         "warning": {
-          "value": "{color.warning.500}",
-          "type": "color",
-          "description": "Theme-specific warning default color."
+          "$value": "{color.warning.500}",
+          "$type": "color",
+          "$description": "Theme-specific warning default color."
         },
         "danger": {
-          "value": "{color.danger.500}",
-          "type": "color",
-          "description": "Theme-specific danger default color."
+          "$value": "{color.danger.500}",
+          "$type": "color",
+          "$description": "Theme-specific danger default color."
         },
         "light": {
-          "value": "{color.light.500}",
-          "type": "color",
-          "description": "Theme-specific light default color."
+          "$value": "{color.light.500}",
+          "$type": "color",
+          "$description": "Theme-specific light default color."
         },
         "dark": {
-          "value": "{color.dark.500}",
-          "type": "color",
-          "description": "Theme-specific dark default color."
+          "$value": "{color.dark.500}",
+          "$type": "color",
+          "$description": "Theme-specific dark default color."
         },
         "gray": {
-          "value": "{color.gray.500}",
-          "type": "color",
-          "description": "Theme-specific gray default color."
+          "$value": "{color.gray.500}",
+          "$type": "color",
+          "$description": "Theme-specific gray default color."
         }
       },
       "hover": {
         "primary": {
-          "value": "{color.primary.700}",
-          "type": "color",
-          "description": "Theme-specific primary hover color."
+          "$value": "{color.primary.700}",
+          "$type": "color",
+          "$description": "Theme-specific primary hover color."
         },
         "brand": {
-          "value": "{color.brand.700}",
-          "type": "color",
-          "description": "Theme-specific brand hover color."
+          "$value": "{color.brand.700}",
+          "$type": "color",
+          "$description": "Theme-specific brand hover color."
         },
         "success": {
-          "value": "{color.success.700}",
-          "type": "color",
-          "description": "Theme-specific success hover color."
+          "$value": "{color.success.700}",
+          "$type": "color",
+          "$description": "Theme-specific success hover color."
         },
         "info": {
-          "value": "{color.info.700}",
-          "type": "color",
-          "description": "Theme-specific info hover color."
+          "$value": "{color.info.700}",
+          "$type": "color",
+          "$description": "Theme-specific info hover color."
         },
         "warning": {
-          "value": "{color.warning.700}",
-          "type": "color",
-          "description": "Theme-specific warning hover color."
+          "$value": "{color.warning.700}",
+          "$type": "color",
+          "$description": "Theme-specific warning hover color."
         },
         "danger": {
-          "value": "{color.danger.700}",
-          "type": "color",
-          "description": "Theme-specific danger hover color."
+          "$value": "{color.danger.700}",
+          "$type": "color",
+          "$description": "Theme-specific danger hover color."
         },
         "light": {
-          "value": "{color.light.700}",
-          "type": "color",
-          "description": "Theme-specific light hover color."
+          "$value": "{color.light.700}",
+          "$type": "color",
+          "$description": "Theme-specific light hover color."
         },
         "dark": {
-          "value": "{color.dark.700}",
-          "type": "color",
-          "description": "Theme-specific dark hover color."
+          "$value": "{color.dark.700}",
+          "$type": "color",
+          "$description": "Theme-specific dark hover color."
         },
         "gray": {
-          "value": "{color.gray.700}",
-          "type": "color",
-          "description": "Theme-specific gray hover color."
+          "$value": "{color.gray.700}",
+          "$type": "color",
+          "$description": "Theme-specific gray hover color."
         }
       },
       "active": {
         "primary": {
-          "value": "{color.primary.900}",
-          "type": "color",
-          "description": "Theme-specific primary active color."
+          "$value": "{color.primary.900}",
+          "$type": "color",
+          "$description": "Theme-specific primary active color."
         },
         "brand": {
-          "value": "{color.brand.900}",
-          "type": "color",
-          "description": "Theme-specific brand active color."
+          "$value": "{color.brand.900}",
+          "$type": "color",
+          "$description": "Theme-specific brand active color."
         },
         "success": {
-          "value": "{color.success.900}",
-          "type": "color",
-          "description": "Theme-specific success active color."
+          "$value": "{color.success.900}",
+          "$type": "color",
+          "$description": "Theme-specific success active color."
         },
         "info": {
-          "value": "{color.info.900}",
-          "type": "color",
-          "description": "Theme-specific info active color."
+          "$value": "{color.info.900}",
+          "$type": "color",
+          "$description": "Theme-specific info active color."
         },
         "warning": {
-          "value": "{color.warning.900}",
-          "type": "color",
-          "description": "Theme-specific warning active color."
+          "$value": "{color.warning.900}",
+          "$type": "color",
+          "$description": "Theme-specific warning active color."
         },
         "danger": {
-          "value": "{color.danger.900}",
-          "type": "color",
-          "description": "Theme-specific danger active color."
+          "$value": "{color.danger.900}",
+          "$type": "color",
+          "$description": "Theme-specific danger active color."
         },
         "light": {
-          "value": "{color.light.900}",
-          "type": "color",
-          "description": "Theme-specific light active color."
+          "$value": "{color.light.900}",
+          "$type": "color",
+          "$description": "Theme-specific light active color."
         },
         "dark": {
-          "value": "{color.dark.900}",
-          "type": "color",
-          "description": "Theme-specific dark active color."
+          "$value": "{color.dark.900}",
+          "$type": "color",
+          "$description": "Theme-specific dark active color."
         },
         "gray": {
-          "value": "{color.gray.900}",
-          "type": "color",
-          "description": "Theme-specific gray active color."
+          "$value": "{color.gray.900}",
+          "$type": "color",
+          "$description": "Theme-specific gray active color."
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json
index bd49b68..6ff2231 100644
--- a/tokens/src/themes/light/components/Badge.json
+++ b/tokens/src/themes/light/components/Badge.json
@@ -2,7 +2,7 @@
   "color": {
     "badge": {
       "bg": {
-        "info": { "value": "{color.accent.a}" }
+        "info": { "$value": "{color.accent.a}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
index 593d212..726b325 100644
--- a/tokens/src/themes/light/components/Button/brand.json
+++ b/tokens/src/themes/light/components/Button/brand.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "brand": {
-          "value": "{color.btn.bg.brand}",
-          "type": "color",
+          "$value": "{color.btn.bg.brand}",
+          "$type": "color",
           "source": "$btn-brand-color",
           "modify": [
             {
@@ -13,71 +13,71 @@
           ]
         },
         "outline-brand": {
-          "value": "{color.btn.bg.brand}",
-          "type": "color",
+          "$value": "{color.btn.bg.brand}",
+          "$type": "color",
           "source": "$btn-brand-outline-color"
         }
       },
       "bg": {
         "brand": {
-          "value": "{color.brand.500}",
-          "type": "color",
+          "$value": "{color.brand.500}",
+          "$type": "color",
           "source": "$btn-brand-bg"
         },
         "outline-brand": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-brand-outline-bg"
         }
       },
       "border": {
         "brand": {
-          "value": "{color.btn.bg.brand}",
-          "type": "color",
+          "$value": "{color.btn.bg.brand}",
+          "$type": "color",
           "source": "$btn-brand-border-color"
         },
         "outline-brand": {
-          "value": "{color.btn.bg.brand}",
-          "type": "color",
+          "$value": "{color.btn.bg.brand}",
+          "$type": "color",
           "source": "$btn-brand-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "brand": {
-            "value": "{color.black}",
-            "type": "color",
+            "$value": "{color.black}",
+            "$type": "color",
             "source": "$btn-brand-hover-color",
             "modify": null
           },
           "outline-brand": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-brand-outline-hover-color",
             "modify": null
           }
         },
         "bg": {
           "brand": {
-            "value": "{color.brand.100}",
-            "type": "color",
+            "$value": "{color.brand.100}",
+            "$type": "color",
             "source": "$btn-brand-hover-bg"
           },
           "outline-brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-outline-hover-bg"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-hover-border-color"
           },
           "outline-brand": {
-            "value": "{color.btn.hover.bg.outline-brand}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-brand}",
+            "$type": "color",
             "source": "$btn-brand-outline-hover-border-color"
           }
         }
@@ -85,39 +85,39 @@
       "active": {
         "text": {
           "brand": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-brand-active-color",
             "modify": null
           },
           "outline-brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-outline-active-color",
             "modify": null
           }
         },
         "bg": {
           "brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-active-bg"
           },
           "outline-brand": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-brand-outline-active-bg"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-active-border-color"
           },
           "outline-brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-outline-active-border-color"
           }
         }
@@ -125,50 +125,50 @@
       "focus": {
         "text": {
           "brand": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-brand-focus-color",
             "modify": null
           },
           "outline-brand": {
-            "value": "{color.brand.500}",
-            "type": "color",
+            "$value": "{color.brand.500}",
+            "$type": "color",
             "source": "$btn-brand-outline-focus-color"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.btn.border.brand}",
-            "type": "color",
+            "$value": "{color.btn.border.brand}",
+            "$type": "color",
             "source": "$btn-brand-focus-border-color"
           },
           "outline-brand": {
-            "value": "{color.btn.border.outline-brand}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-brand}",
+            "$type": "color",
             "source": "$btn-brand-outline-focus-border-color"
           }
         },
         "outline": {
           "brand": {
-            "value": "{color.btn.border.brand}",
-            "type": "color",
+            "$value": "{color.btn.border.brand}",
+            "$type": "color",
             "source": "$btn-brand-focus-focus-outline-color"
           },
           "outline-brand": {
-            "value": "{color.btn.border.outline-brand}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-brand}",
+            "$type": "color",
             "source": "$btn-brand-outline-focus-outline-color"
           }
         },
         "bg": {
           "brand": {
-            "value": "{color.btn.bg.brand}",
-            "type": "color",
+            "$value": "{color.btn.bg.brand}",
+            "$type": "color",
             "source": "$btn-brand-focus-bg"
           },
           "outline-brand": {
-            "value": "{color.btn.bg.outline-brand}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-brand}",
+            "$type": "color",
             "source": "$btn-brand-outline-focus-bg"
           }
         }
@@ -176,37 +176,37 @@
       "disabled": {
         "text": {
           "brand": {
-            "value": "{color.btn.text.brand}",
-            "type": "color",
+            "$value": "{color.btn.text.brand}",
+            "$type": "color",
             "source": "$btn-brand-disabled-color"
           },
           "outline-brand": {
-            "value": "{color.btn.text.outline-brand}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-brand}",
+            "$type": "color",
             "source": "$btn-brand-outline-disabled-color"
           }
         },
         "bg": {
           "brand": {
-            "value": "{color.brand.100}",
-            "type": "color",
+            "$value": "{color.brand.100}",
+            "$type": "color",
             "source": "$btn-brand-disabled-bg"
           },
           "outline-brand": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-brand-outline-disabled-bg"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.btn.border.brand}",
-            "type": "color",
+            "$value": "{color.btn.border.brand}",
+            "$type": "color",
             "source": "$btn-brand-disabled-border-color"
           },
           "outline-brand": {
-            "value": "{color.btn.border.outline-brand}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-brand}",
+            "$type": "color",
             "source": "$btn-brand-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
index 065134f..82a14bf 100644
--- a/tokens/src/themes/light/components/Button/core.json
+++ b/tokens/src/themes/light/components/Button/core.json
@@ -4,38 +4,38 @@
       "padding": {
         "y": {
           "base": {
-            "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y"
+            "$value": "{spacing.input.btn.padding.y}", "$type": "dimension", "source": "$btn-padding-y"
           },
           "lg": {
-            "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg"
+            "$value": "{spacing.input.btn.padding.lg.y}", "$type": "dimension", "source": "$btn-padding-y-lg"
           },
           "sm": {
-            "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm"
+            "$value": "{spacing.input.btn.padding.sm.y}", "$type": "dimension", "source": "$btn-padding-y-sm"
           }
         },
         "x": {
-          "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" },
+          "base": { "$value": "{spacing.input.btn.padding.x}", "$type": "dimension", "source": "$btn-padding-x" },
           "lg": {
-            "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg"
+            "$value": "{spacing.input.btn.padding.lg.x}", "$type": "dimension", "source": "$btn-padding-x-lg"
           },
           "sm": {
-            "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm"
+            "$value": "{spacing.input.btn.padding.sm.x}", "$type": "dimension", "source": "$btn-padding-x-sm"
           }
         }
       },
       "block": {
-        "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
+        "spacing-y": { "$value": ".5rem", "$type": "dimension", "source": "$btn-block-spacing-y" }
       },
       "focus": {
-        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
+        "gap": { "$value": "{size.btn.focus.width}", "$type": "dimension", "source": "$btn-focus-gap" },
         "border-gap": {
-          "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
-          "type": "dimension",
+          "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
+          "$type": "dimension",
           "source": "$btn-focus-border-gap"
         },
         "distance-to-border": {
-          "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
-          "type": "dimension",
+          "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
+          "$type": "dimension",
           "source": "$btn-focus-distance-to-border"
         }
       }
@@ -45,52 +45,47 @@
     "btn": {
       "font": {
         "family": {
-          "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family"
+          "$value": "{typography.input.btn.font.family}", "$type": "fontFamily", "source": "$btn-font-family"
         },
         "size": {
           "base": {
-            "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size"
+            "$value": "{typography.input.btn.font.size.base}", "$type": "dimension", "source": "$btn-font-size"
           },
           "sm": {
-            "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm"
+            "$value": "{typography.input.btn.font.size.sm}", "$type": "dimension", "source": "$btn-font-size-sm"
           },
           "lg": {
-            "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg"
+            "$value": "{typography.input.btn.font.size.lg}", "$type": "dimension", "source": "$btn-font-size-lg"
           }
         },
         "weight": {
-          "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight"
+          "$value": "{typography.font.weight.normal}", "$type": "fontWeight", "source": "$btn-font-weight"
         }
       },
       "line-height": {
-        "base": {
-          "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height"
-        },
-        "sm": {
-          "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm"
-        },
-        "lg": {
-          "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg"
-        }
+        "$type": "dimension",
+        "base": { "$value": "{typography.input.btn.line-height.base}", "source": "$btn-line-height" },
+        "sm": { "$value": "{typography.input.btn.line-height.sm}", "source": "$btn-line-height-sm" },
+        "lg": { "$value": "{typography.input.btn.line-height.lg}", "source": "$btn-line-height-lg" }
       }
     }
   },
   "size": {
     "btn": {
       "border": {
-        "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" }
+        "width": { "$value": "{size.input.btn.border-width}", "$type": "dimension", "source": "$btn-border-width" }
       },
       "focus": {
-        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }
+        "width": { "$value": "2px", "$type": "dimension", "source": "$btn-focus-width" }
       }
     }
   },
   "transition": {
-    "btn": { "value": "none", "type": "transition", "source": "$btn-transition" }
+    "btn": { "$value": "none", "$type": "transition", "source": "$btn-transition" }
   },
   "other": {
     "btn": {
-      "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$btn-disabled-opacity" }
+      "disabled-opacity": { "$value": ".3", "$type": "ratio", "source": "$btn-disabled-opacity" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
index 338f09d..5e77105 100644
--- a/tokens/src/themes/light/components/Button/danger.json
+++ b/tokens/src/themes/light/components/Button/danger.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "danger": {
-          "value": "{color.btn.bg.danger}",
-          "type": "color",
+          "$value": "{color.btn.bg.danger}",
+          "$type": "color",
           "source": "$btn-danger-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-danger": {
-          "value": "{color.btn.bg.danger}",
-          "type": "color",
+          "$value": "{color.btn.bg.danger}",
+          "$type": "color",
           "source": "$btn-danger-outline-color"
         }
       },
       "bg": {
         "danger": {
-          "value": "{color.danger.600}",
-          "type": "color",
+          "$value": "{color.danger.600}",
+          "$type": "color",
           "source": "$btn-danger-bg"
         },
         "outline-danger": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-danger-outline-bg"
         }
       },
       "border": {
         "danger": {
-          "value": "{color.btn.bg.danger}",
-          "type": "color",
+          "$value": "{color.btn.bg.danger}",
+          "$type": "color",
           "source": "$btn-danger-border-color"
         },
         "outline-danger": {
-          "value": "{color.btn.bg.danger}",
-          "type": "color",
+          "$value": "{color.btn.bg.danger}",
+          "$type": "color",
           "source": "$btn-danger-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "danger": {
-            "value": "{color.btn.hover.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-danger": {
-            "value": "{color.danger.600}",
-            "type": "color",
+            "$value": "{color.danger.600}",
+            "$type": "color",
             "source": "$btn-danger-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "danger": {
-            "value": "{color.theme.hover.danger}",
-            "type": "color",
+            "$value": "{color.theme.hover.danger}",
+            "$type": "color",
             "source": "$btn-danger-hover-bg"
           },
           "outline-danger": {
-            "value": "{color.danger.600}",
-            "type": "color",
+            "$value": "{color.danger.600}",
+            "$type": "color",
             "source": "$btn-danger-outline-hover-bg"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.btn.hover.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-hover-border-color"
           },
           "outline-danger": {
-            "value": "{color.btn.hover.bg.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "danger": {
-            "value": "{color.btn.active.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-danger": {
-            "value": "{color.btn.active.bg.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "danger": {
-            "value": "{color.theme.active.danger}",
-            "type": "color",
+            "$value": "{color.theme.active.danger}",
+            "$type": "color",
             "source": "$btn-danger-active-bg"
           },
           "outline-danger": {
-            "value": "{color.btn.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-active-bg"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.theme.active.danger}",
-            "type": "color",
+            "$value": "{color.theme.active.danger}",
+            "$type": "color",
             "source": "$btn-danger-active-border-color"
           },
           "outline-danger": {
-            "value": "{color.btn.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "danger": {
-            "value": "{color.btn.text.danger}",
-            "type": "color",
+            "$value": "{color.btn.text.danger}",
+            "$type": "color",
             "source": "$btn-danger-focus-color"
           },
           "outline-danger": {
-            "value": "{color.btn.text.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-focus-color"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.btn.border.danger}",
-            "type": "color",
+            "$value": "{color.btn.border.danger}",
+            "$type": "color",
             "source": "$btn-danger-focus-border-color"
           },
           "outline-danger": {
-            "value": "{color.btn.border.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-focus-border-color"
           }
         },
         "outline": {
           "danger": {
-            "value": "{color.btn.border.danger}",
-            "type": "color",
+            "$value": "{color.btn.border.danger}",
+            "$type": "color",
             "source": "$btn-danger-focus-focus-outline-color"
           },
           "outline-danger": {
-            "value": "{color.btn.border.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-focus-outline-color"
           }
         },
         "bg": {
           "danger": {
-            "value": "{color.btn.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-focus-bg"
           },
           "outline-danger": {
-            "value": "{color.btn.bg.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "danger": {
-            "value": "{color.btn.text.danger}",
-            "type": "color",
+            "$value": "{color.btn.text.danger}",
+            "$type": "color",
             "source": "$btn-danger-disabled-color"
           },
           "outline-danger": {
-            "value": "{color.btn.hover.text.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-disabled-color"
           }
         },
         "bg": {
           "danger": {
-            "value": "{color.btn.bg.danger}",
-            "type": "color",
+            "$value": "{color.btn.bg.danger}",
+            "$type": "color",
             "source": "$btn-danger-disabled-bg"
           },
           "outline-danger": {
-            "value": "{color.btn.bg.outline-danger",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-disabled-bg"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.btn.border.danger}",
-            "type": "color",
+            "$value": "{color.btn.border.danger}",
+            "$type": "color",
             "source": "$btn-danger-disabled-border-color"
           },
           "outline-danger": {
-            "value": "{color.btn.border.outline-danger}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-danger}",
+            "$type": "color",
             "source": "$btn-danger-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
index 30d438b..ecfcbc7 100644
--- a/tokens/src/themes/light/components/Button/dark.json
+++ b/tokens/src/themes/light/components/Button/dark.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "dark": {
-          "value": "{color.btn.bg.dark}",
-          "type": "color",
+          "$value": "{color.btn.bg.dark}",
+          "$type": "color",
           "source": "$btn-dark-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-dark": {
-          "value": "{color.btn.bg.dark}",
-          "type": "color",
+          "$value": "{color.btn.bg.dark}",
+          "$type": "color",
           "source": "$btn-dark-outline-color"
         }
       },
       "bg": {
         "dark": {
-          "value": "{color.dark.600}",
-          "type": "color",
+          "$value": "{color.dark.600}",
+          "$type": "color",
           "source": "$btn-dark-bg"
         },
         "outline-dark": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-dark-outline-bg"
         }
       },
       "border": {
         "dark": {
-          "value": "{color.btn.bg.dark}",
-          "type": "color",
+          "$value": "{color.btn.bg.dark}",
+          "$type": "color",
           "source": "$btn-dark-border-color"
         },
         "outline-dark": {
-          "value": "{color.btn.bg.dark}",
-          "type": "color",
+          "$value": "{color.btn.bg.dark}",
+          "$type": "color",
           "source": "$btn-dark-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "dark": {
-            "value": "{color.btn.hover.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-dark": {
-            "value": "{color.dark.600}",
-            "type": "color",
+            "$value": "{color.dark.600}",
+            "$type": "color",
             "source": "$btn-dark-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "dark": {
-            "value": "{color.theme.hover.dark}",
-            "type": "color",
+            "$value": "{color.theme.hover.dark}",
+            "$type": "color",
             "source": "$btn-dark-hover-bg"
           },
           "outline-dark": {
-            "value": "{color.dark.600}",
-            "type": "color",
+            "$value": "{color.dark.600}",
+            "$type": "color",
             "source": "$btn-dark-outline-hover-bg"
           }
         },
         "border": {
           "dark": {
-            "value": "{color.btn.hover.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-hover-border-color"
           },
           "outline-dark": {
-            "value": "{color.btn.hover.bg.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "dark": {
-            "value": "{color.btn.active.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-dark": {
-            "value": "{color.btn.active.bg.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "dark": {
-            "value": "{color.theme.active.dark}",
-            "type": "color",
+            "$value": "{color.theme.active.dark}",
+            "$type": "color",
             "source": "$btn-dark-active-bg"
           },
           "outline-dark": {
-            "value": "{color.btn.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-active-bg"
           }
         },
         "border": {
           "dark": {
-            "value": "{color.theme.active.dark}",
-            "type": "color",
+            "$value": "{color.theme.active.dark}",
+            "$type": "color",
             "source": "$btn-dark-active-border-color"
           },
           "outline-dark": {
-            "value": "{color.btn.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "dark": {
-            "value": "{color.btn.text.dark}",
-            "type": "color",
+            "$value": "{color.btn.text.dark}",
+            "$type": "color",
             "source": "$btn-dark-focus-color"
           },
           "outline-dark": {
-            "value": "{color.btn.text.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-focus-color"
           }
         },
         "border": {
           "dark": {
-            "value": "{color.btn.border.dark}",
-            "type": "color",
+            "$value": "{color.btn.border.dark}",
+            "$type": "color",
             "source": "$btn-dark-focus-border-color"
           },
           "outline-dark": {
-            "value": "{color.btn.border.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-focus-border-color"
           }
         },
         "outline": {
           "dark": {
-            "value": "{color.btn.border.dark}",
-            "type": "color",
+            "$value": "{color.btn.border.dark}",
+            "$type": "color",
             "source": "$btn-dark-focus-focus-outline-color"
           },
           "outline-dark": {
-            "value": "{color.btn.border.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-focus-outline-color"
           }
         },
         "bg": {
           "dark": {
-            "value": "{color.btn.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-focus-bg"
           },
           "outline-dark": {
-            "value": "{color.btn.bg.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "dark": {
-            "value": "{color.btn.text.dark}",
-            "type": "color",
+            "$value": "{color.btn.text.dark}",
+            "$type": "color",
             "source": "$btn-dark-disabled-color"
           },
           "outline-dark": {
-            "value": "{color.btn.hover.text.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-disabled-color"
           }
         },
         "bg": {
           "dark": {
-            "value": "{color.btn.bg.dark}",
-            "type": "color",
+            "$value": "{color.btn.bg.dark}",
+            "$type": "color",
             "source": "$btn-dark-disabled-bg"
           },
           "outline-dark": {
-            "value": "{color.btn.bg.outline-dark",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-disabled-bg"
           }
         },
         "border": {
           "dark": {
-            "value": "{color.btn.border.dark}",
-            "type": "color",
+            "$value": "{color.btn.border.dark}",
+            "$type": "color",
             "source": "$btn-dark-disabled-border-color"
           },
           "outline-dark": {
-            "value": "{color.btn.border.outline-dark}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-dark}",
+            "$type": "color",
             "source": "$btn-dark-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
index 845d742..78be407 100644
--- a/tokens/src/themes/light/components/Button/info.json
+++ b/tokens/src/themes/light/components/Button/info.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "info": {
-          "value": "{color.btn.bg.info}",
-          "type": "color",
+          "$value": "{color.btn.bg.info}",
+          "$type": "color",
           "source": "$btn-info-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-info": {
-          "value": "{color.btn.bg.info}",
-          "type": "color",
+          "$value": "{color.btn.bg.info}",
+          "$type": "color",
           "source": "$btn-info-outline-color"
         }
       },
       "bg": {
         "info": {
-          "value": "{color.info.600}",
-          "type": "color",
+          "$value": "{color.info.600}",
+          "$type": "color",
           "source": "$btn-info-bg"
         },
         "outline-info": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-info-outline-bg"
         }
       },
       "border": {
         "info": {
-          "value": "{color.btn.bg.info}",
-          "type": "color",
+          "$value": "{color.btn.bg.info}",
+          "$type": "color",
           "source": "$btn-info-border-color"
         },
         "outline-info": {
-          "value": "{color.btn.bg.info}",
-          "type": "color",
+          "$value": "{color.btn.bg.info}",
+          "$type": "color",
           "source": "$btn-info-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "info": {
-            "value": "{color.btn.hover.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.info}",
+            "$type": "color",
             "source": "$btn-info-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-info": {
-            "value": "{color.info.600}",
-            "type": "color",
+            "$value": "{color.info.600}",
+            "$type": "color",
             "source": "$btn-info-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "info": {
-            "value": "{color.theme.hover.info}",
-            "type": "color",
+            "$value": "{color.theme.hover.info}",
+            "$type": "color",
             "source": "$btn-info-hover-bg"
           },
           "outline-info": {
-            "value": "{color.info.600}",
-            "type": "color",
+            "$value": "{color.info.600}",
+            "$type": "color",
             "source": "$btn-info-outline-hover-bg"
           }
         },
         "border": {
           "info": {
-            "value": "{color.btn.hover.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.info}",
+            "$type": "color",
             "source": "$btn-info-hover-border-color"
           },
           "outline-info": {
-            "value": "{color.btn.hover.bg.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "info": {
-            "value": "{color.btn.active.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.info}",
+            "$type": "color",
             "source": "$btn-info-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-info": {
-            "value": "{color.btn.active.bg.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "info": {
-            "value": "{color.theme.active.info}",
-            "type": "color",
+            "$value": "{color.theme.active.info}",
+            "$type": "color",
             "source": "$btn-info-active-bg"
           },
           "outline-info": {
-            "value": "{color.btn.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.bg.info}",
+            "$type": "color",
             "source": "$btn-info-outline-active-bg"
           }
         },
         "border": {
           "info": {
-            "value": "{color.theme.active.info}",
-            "type": "color",
+            "$value": "{color.theme.active.info}",
+            "$type": "color",
             "source": "$btn-info-active-border-color"
           },
           "outline-info": {
-            "value": "{color.btn.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.bg.info}",
+            "$type": "color",
             "source": "$btn-info-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "info": {
-            "value": "{color.btn.text.info}",
-            "type": "color",
+            "$value": "{color.btn.text.info}",
+            "$type": "color",
             "source": "$btn-info-focus-color"
           },
           "outline-info": {
-            "value": "{color.btn.text.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-focus-color"
           }
         },
         "border": {
           "info": {
-            "value": "{color.btn.border.info}",
-            "type": "color",
+            "$value": "{color.btn.border.info}",
+            "$type": "color",
             "source": "$btn-info-focus-border-color"
           },
           "outline-info": {
-            "value": "{color.btn.border.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-focus-border-color"
           }
         },
         "outline": {
           "info": {
-            "value": "{color.btn.border.info}",
-            "type": "color",
+            "$value": "{color.btn.border.info}",
+            "$type": "color",
             "source": "$btn-info-focus-focus-outline-color"
           },
           "outline-info": {
-            "value": "{color.btn.border.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-focus-outline-color"
           }
         },
         "bg": {
           "info": {
-            "value": "{color.btn.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.bg.info}",
+            "$type": "color",
             "source": "$btn-info-focus-bg"
           },
           "outline-info": {
-            "value": "{color.btn.bg.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "info": {
-            "value": "{color.btn.text.info}",
-            "type": "color",
+            "$value": "{color.btn.text.info}",
+            "$type": "color",
             "source": "$btn-info-disabled-color"
           },
           "outline-info": {
-            "value": "{color.btn.hover.text.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-disabled-color"
           }
         },
         "bg": {
           "info": {
-            "value": "{color.btn.bg.info}",
-            "type": "color",
+            "$value": "{color.btn.bg.info}",
+            "$type": "color",
             "source": "$btn-info-disabled-bg"
           },
           "outline-info": {
-            "value": "{color.btn.bg.outline-info",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-disabled-bg"
           }
         },
         "border": {
           "info": {
-            "value": "{color.btn.border.info}",
-            "type": "color",
+            "$value": "{color.btn.border.info}",
+            "$type": "color",
             "source": "$btn-info-disabled-border-color"
           },
           "outline-info": {
-            "value": "{color.btn.border.outline-info}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-info}",
+            "$type": "color",
             "source": "$btn-info-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
index f5240ff..5ac41a9 100644
--- a/tokens/src/themes/light/components/Button/light.json
+++ b/tokens/src/themes/light/components/Button/light.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "light": {
-          "value": "{color.btn.bg.light}",
-          "type": "color",
+          "$value": "{color.btn.bg.light}",
+          "$type": "color",
           "source": "$btn-light-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-light": {
-          "value": "{color.btn.bg.light}",
-          "type": "color",
+          "$value": "{color.btn.bg.light}",
+          "$type": "color",
           "source": "$btn-light-outline-color"
         }
       },
       "bg": {
         "light": {
-          "value": "{color.light.600}",
-          "type": "color",
+          "$value": "{color.light.600}",
+          "$type": "color",
           "source": "$btn-light-bg"
         },
         "outline-light": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-light-outline-bg"
         }
       },
       "border": {
         "light": {
-          "value": "{color.btn.bg.light}",
-          "type": "color",
+          "$value": "{color.btn.bg.light}",
+          "$type": "color",
           "source": "$btn-light-border-color"
         },
         "outline-light": {
-          "value": "{color.btn.bg.light}",
-          "type": "color",
+          "$value": "{color.btn.bg.light}",
+          "$type": "color",
           "source": "$btn-light-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "light": {
-            "value": "{color.btn.hover.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.light}",
+            "$type": "color",
             "source": "$btn-light-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-light": {
-            "value": "{color.light.600}",
-            "type": "color",
+            "$value": "{color.light.600}",
+            "$type": "color",
             "source": "$btn-light-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "light": {
-            "value": "{color.theme.hover.light}",
-            "type": "color",
+            "$value": "{color.theme.hover.light}",
+            "$type": "color",
             "source": "$btn-light-hover-bg"
           },
           "outline-light": {
-            "value": "{color.light.600}",
-            "type": "color",
+            "$value": "{color.light.600}",
+            "$type": "color",
             "source": "$btn-light-outline-hover-bg"
           }
         },
         "border": {
           "light": {
-            "value": "{color.btn.hover.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.light}",
+            "$type": "color",
             "source": "$btn-light-hover-border-color"
           },
           "outline-light": {
-            "value": "{color.btn.hover.bg.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "light": {
-            "value": "{color.btn.active.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.light}",
+            "$type": "color",
             "source": "$btn-light-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-light": {
-            "value": "{color.btn.active.bg.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "light": {
-            "value": "{color.theme.active.light}",
-            "type": "color",
+            "$value": "{color.theme.active.light}",
+            "$type": "color",
             "source": "$btn-light-active-bg"
           },
           "outline-light": {
-            "value": "{color.btn.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.bg.light}",
+            "$type": "color",
             "source": "$btn-light-outline-active-bg"
           }
         },
         "border": {
           "light": {
-            "value": "{color.theme.active.light}",
-            "type": "color",
+            "$value": "{color.theme.active.light}",
+            "$type": "color",
             "source": "$btn-light-active-border-color"
           },
           "outline-light": {
-            "value": "{color.btn.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.bg.light}",
+            "$type": "color",
             "source": "$btn-light-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "light": {
-            "value": "{color.btn.text.light}",
-            "type": "color",
+            "$value": "{color.btn.text.light}",
+            "$type": "color",
             "source": "$btn-light-focus-color"
           },
           "outline-light": {
-            "value": "{color.btn.text.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-focus-color"
           }
         },
         "border": {
           "light": {
-            "value": "{color.btn.border.light}",
-            "type": "color",
+            "$value": "{color.btn.border.light}",
+            "$type": "color",
             "source": "$btn-light-focus-border-color"
           },
           "outline-light": {
-            "value": "{color.btn.border.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-focus-border-color"
           }
         },
         "outline": {
           "light": {
-            "value": "{color.btn.border.light}",
-            "type": "color",
+            "$value": "{color.btn.border.light}",
+            "$type": "color",
             "source": "$btn-light-focus-focus-outline-color"
           },
           "outline-light": {
-            "value": "{color.btn.border.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-focus-outline-color"
           }
         },
         "bg": {
           "light": {
-            "value": "{color.btn.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.bg.light}",
+            "$type": "color",
             "source": "$btn-light-focus-bg"
           },
           "outline-light": {
-            "value": "{color.btn.bg.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "light": {
-            "value": "{color.btn.text.light}",
-            "type": "color",
+            "$value": "{color.btn.text.light}",
+            "$type": "color",
             "source": "$btn-light-disabled-color"
           },
           "outline-light": {
-            "value": "{color.btn.hover.text.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-disabled-color"
           }
         },
         "bg": {
           "light": {
-            "value": "{color.btn.bg.light}",
-            "type": "color",
+            "$value": "{color.btn.bg.light}",
+            "$type": "color",
             "source": "$btn-light-disabled-bg"
           },
           "outline-light": {
-            "value": "{color.btn.bg.outline-light",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-disabled-bg"
           }
         },
         "border": {
           "light": {
-            "value": "{color.btn.border.light}",
-            "type": "color",
+            "$value": "{color.btn.border.light}",
+            "$type": "color",
             "source": "$btn-light-disabled-border-color"
           },
           "outline-light": {
-            "value": "{color.btn.border.outline-light}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-light}",
+            "$type": "color",
             "source": "$btn-light-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
index 0201c7b..24ef1c7 100644
--- a/tokens/src/themes/light/components/Button/primary.json
+++ b/tokens/src/themes/light/components/Button/primary.json
@@ -3,76 +3,76 @@
     "btn": {
       "text": {
         "primary": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-primary-color",
           "modify": null
         },
         "outline-primary": {
-          "value": "{color.primary.500}",
-          "type": "color",
+          "$value": "{color.primary.500}",
+          "$type": "color",
           "source": "$btn-primary-outline-color"
         }
       },
       "bg": {
         "primary": {
-          "value": "{color.primary.500}",
-          "type": "color",
+          "$value": "{color.primary.500}",
+          "$type": "color",
           "source": "$btn-primary-bg"
         },
         "outline-primary": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-primary-outline-bg"
         }
       },
       "border": {
         "primary": {
-          "value": "{color.btn.bg.primary}",
-          "type": "color",
+          "$value": "{color.btn.bg.primary}",
+          "$type": "color",
           "source": "$btn-primary-border-color"
         },
         "outline-primary": {
-          "value": "{color.btn.bg.primary}",
-          "type": "color",
+          "$value": "{color.btn.bg.primary}",
+          "$type": "color",
           "source": "$btn-primary-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "primary": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-primary-hover-color",
             "modify": null
           },
           "outline-primary": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-primary-outline-hover-color"
           }
         },
         "bg": {
           "primary": {
-            "value": "{color.primary.300}",
-            "type": "color",
+            "$value": "{color.primary.300}",
+            "$type": "color",
             "source": "$btn-primary-hover-bg"
           },
           "outline-primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-outline-hover-bg"
           }
         },
         "border": {
           "primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-hover-border-color"
           },
           "outline-primary": {
-            "value": "{color.btn.hover.bg.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-hover-border-color"
           }
         }
@@ -80,51 +80,51 @@
       "active": {
         "text": {
           "primary": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-primary-active-color",
             "modify": null
           },
           "outline-primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-outline-active-color",
             "modify": null
           }
         },
         "bg": {
           "primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-active-bg"
           },
           "outline-primary": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-primary-outline-active-bg"
           }
         },
         "border": {
           "primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-active-border-color"
           },
           "outline-primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-outline-active-border-color"
           }
         },
         "outline": {
           "primary": {
-            "value": "{color.btn.border.primary}",
-            "type": "color",
+            "$value": "{color.btn.border.primary}",
+            "$type": "color",
             "source": "$btn-primary-focus-focus-outline-color"
           },
           "outline-primary": {
-            "value": "{color.btn.border.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-focus-outline-color"
           }
         }
@@ -132,49 +132,49 @@
       "focus": {
         "text": {
           "primary": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-primary-focus-color"
           },
           "outline-primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-outline-focus-color"
           }
         },
         "border": {
           "primary": {
-            "value": "{color.btn.border.primary}",
-            "type": "color",
+            "$value": "{color.btn.border.primary}",
+            "$type": "color",
             "source": "$btn-primary-focus-border-color"
           },
           "outline-primary": {
-            "value": "{color.btn.border.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-focus-border-color"
           }
         },
         "outline": {
           "primary": {
-            "value": "{color.btn.border.primary}",
-            "type": "color",
+            "$value": "{color.btn.border.primary}",
+            "$type": "color",
             "source": "$btn-primary-focus-focus-outline-color"
           },
           "outline-primary": {
-            "value": "{color.btn.border.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-focus-outline-color"
           }
         },
         "bg": {
           "primary": {
-            "value": "{color.btn.bg.primary}",
-            "type": "color",
+            "$value": "{color.btn.bg.primary}",
+            "$type": "color",
             "source": "$btn-primary-focus-bg"
           },
           "outline-primary": {
-            "value": "{color.btn.bg.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-focus-bg"
           }
         }
@@ -182,37 +182,37 @@
       "disabled": {
         "text": {
           "primary": {
-            "value": "{color.btn.text.primary}",
-            "type": "color",
+            "$value": "{color.btn.text.primary}",
+            "$type": "color",
             "source": "$btn-primary-disabled-color"
           },
           "outline-primary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-primary-outline-disabled-color"
           }
         },
         "bg": {
           "primary": {
-            "value": "{color.btn.bg.primary}",
-            "type": "color",
+            "$value": "{color.btn.bg.primary}",
+            "$type": "color",
             "source": "$btn-primary-disabled-bg"
           },
           "outline-primary": {
-            "value": "{color.btn.bg.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-disabled-bg"
           }
         },
         "border": {
           "primary": {
-            "value": "{color.btn.border.primary}",
-            "type": "color",
+            "$value": "{color.btn.border.primary}",
+            "$type": "color",
             "source": "$btn-primary-disabled-border-color"
           },
           "outline-primary": {
-            "value": "{color.btn.border.outline-primary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-primary}",
+            "$type": "color",
             "source": "$btn-primary-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
index 8cc4bfb..aa339c7 100644
--- a/tokens/src/themes/light/components/Button/secondary.json
+++ b/tokens/src/themes/light/components/Button/secondary.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "secondary": {
-          "value": "{color.btn.bg.secondary}",
-          "type": "color",
+          "$value": "{color.btn.bg.secondary}",
+          "$type": "color",
           "source": "$btn-secondary-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-secondary": {
-          "value": "{color.btn.bg.secondary}",
-          "type": "color",
+          "$value": "{color.btn.bg.secondary}",
+          "$type": "color",
           "source": "$btn-secondary-outline-color"
         }
       },
       "bg": {
         "secondary": {
-          "value": "{color.secondary.600}",
-          "type": "color",
+          "$value": "{color.secondary.600}",
+          "$type": "color",
           "source": "$btn-secondary-bg"
         },
         "outline-secondary": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-secondary-outline-bg"
         }
       },
       "border": {
         "secondary": {
-          "value": "{color.btn.bg.secondary}",
-          "type": "color",
+          "$value": "{color.btn.bg.secondary}",
+          "$type": "color",
           "source": "$btn-secondary-border-color"
         },
         "outline-secondary": {
-          "value": "{color.btn.bg.secondary}",
-          "type": "color",
+          "$value": "{color.btn.bg.secondary}",
+          "$type": "color",
           "source": "$btn-secondary-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "secondary": {
-            "value": "{color.btn.hover.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-secondary": {
-            "value": "{color.secondary.600}",
-            "type": "color",
+            "$value": "{color.secondary.600}",
+            "$type": "color",
             "source": "$btn-secondary-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "secondary": {
-            "value": "{color.secondary.400}",
-            "type": "color",
+            "$value": "{color.secondary.400}",
+            "$type": "color",
             "source": "$btn-secondary-hover-bg"
           },
           "outline-secondary": {
-            "value": "{color.secondary.600}",
-            "type": "color",
+            "$value": "{color.secondary.600}",
+            "$type": "color",
             "source": "$btn-secondary-outline-hover-bg"
           }
         },
         "border": {
           "secondary": {
-            "value": "{color.btn.hover.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-hover-border-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.hover.bg.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "secondary": {
-            "value": "{color.btn.active.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-secondary": {
-            "value": "{color.btn.active.bg.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "secondary": {
-            "value": "{color.theme.active.secondary}",
-            "type": "color",
+            "$value": "{color.theme.active.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-active-bg"
           },
           "outline-secondary": {
-            "value": "{color.btn.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-active-bg"
           }
         },
         "border": {
           "secondary": {
-            "value": "{color.theme.active.secondary}",
-            "type": "color",
+            "$value": "{color.theme.active.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-active-border-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "secondary": {
-            "value": "{color.btn.text.secondary}",
-            "type": "color",
+            "$value": "{color.btn.text.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-focus-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.text.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-focus-color"
           }
         },
         "border": {
           "secondary": {
-            "value": "{color.btn.border.secondary}",
-            "type": "color",
+            "$value": "{color.btn.border.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-focus-border-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.border.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-focus-border-color"
           }
         },
         "outline": {
           "secondary": {
-            "value": "{color.btn.border.secondary}",
-            "type": "color",
+            "$value": "{color.btn.border.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-focus-focus-outline-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.border.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-focus-outline-color"
           }
         },
         "bg": {
           "secondary": {
-            "value": "{color.btn.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-focus-bg"
           },
           "outline-secondary": {
-            "value": "{color.btn.bg.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "secondary": {
-            "value": "{color.btn.text.secondary}",
-            "type": "color",
+            "$value": "{color.btn.text.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-disabled-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.hover.text.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-disabled-color"
           }
         },
         "bg": {
           "secondary": {
-            "value": "{color.btn.bg.secondary}",
-            "type": "color",
+            "$value": "{color.btn.bg.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-disabled-bg"
           },
           "outline-secondary": {
-            "value": "{color.btn.bg.outline-secondary",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-disabled-bg"
           }
         },
         "border": {
           "secondary": {
-            "value": "{color.btn.border.secondary}",
-            "type": "color",
+            "$value": "{color.btn.border.secondary}",
+            "$type": "color",
             "source": "$btn-secondary-disabled-border-color"
           },
           "outline-secondary": {
-            "value": "{color.btn.border.outline-secondary}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-secondary}",
+            "$type": "color",
             "source": "$btn-secondary-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/spacing.json b/tokens/src/themes/light/components/Button/spacing.json
index dc93213..4d9349b 100644
--- a/tokens/src/themes/light/components/Button/spacing.json
+++ b/tokens/src/themes/light/components/Button/spacing.json
@@ -3,19 +3,18 @@
     "input": {
       "btn": {
         "font": {
-          "family": { "value": "inherit", "type": "fontFamily", "source": "$input-btn-font-family" },
+          "family": { "$value": "inherit", "$type": "fontFamily", "source": "$input-btn-font-family" },
           "size": {
-            "base": { "value": "1.125rem", "type": "dimension", "source": "$input-btn-font-size" },
-            "sm": { "value": ".875rem", "type": "dimension", "source": "$input-btn-font-size-sm" },
-            "lg": { "value": "1.325rem", "type": "dimension", "source": "$input-btn-font-size-lg" }
+            "base": { "$value": "1.125rem", "$type": "dimension", "source": "$input-btn-font-size" },
+            "sm": { "$value": ".875rem", "$type": "dimension", "source": "$input-btn-font-size-sm" },
+            "lg": { "$value": "1.325rem", "$type": "dimension", "source": "$input-btn-font-size-lg" }
           }
         },
         "line-height": {
-          "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" },
-          "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" },
-          "lg": {
-            "value": "{typography.line-height.lg}", "type": "dimension", "source": "$input-btn-line-height-lg"
-          }
+          "$type": "number",
+          "base": { "$value": "1.3333", "source": "$input-btn-line-height" },
+          "sm": { "$value": "1.4286", "source": "$input-btn-line-height-sm" },
+          "lg": { "$value": "{typography.line-height.lg}", "source": "$input-btn-line-height-lg" }
         }
       }
     }
@@ -24,15 +23,15 @@
     "input": {
       "btn": {
         "padding": {
-          "y": { "value": ".5625rem", "type": "dimension", "source": "$input-btn-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$input-btn-padding-x" },
+          "y": { "$value": ".5625rem", "$type": "dimension", "source": "$input-btn-padding-y" },
+          "x": { "$value": "1rem", "$type": "dimension", "source": "$input-btn-padding-x" },
           "sm": {
-            "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" },
-            "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" }
+            "y": { "$value": ".4375rem", "$type": "dimension", "source": "$input-btn-padding-y-sm" },
+            "x": { "$value": ".75rem", "$type": "dimension", "source": "$input-btn-padding-x-sm" }
           },
           "lg": {
-            "y": { "value": ".6875rem", "type": "dimension", "source": "$input-btn-padding-y-lg" },
-            "x": { "value": "1.25rem", "type": "dimension", "source": "$input-btn-padding-x-lg" }
+            "y": { "$value": ".6875rem", "$type": "dimension", "source": "$input-btn-padding-y-lg" },
+            "x": { "$value": "1.25rem", "$type": "dimension", "source": "$input-btn-padding-x-lg" }
           }
         }
       }
@@ -42,9 +41,9 @@
     "input": {
       "btn": {
         "border-width": {
-          "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width"
+          "$value": "{size.border.width}", "$type": "dimension", "source": "$input-btn-border-width"
         },
-        "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" }
+        "focus-width": { "$value": "1px", "$type": "dimension", "source": "$input-btn-focus-width" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
index 0f4892e..f2b09c8 100644
--- a/tokens/src/themes/light/components/Button/success.json
+++ b/tokens/src/themes/light/components/Button/success.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "success": {
-          "value": "{color.btn.bg.success}",
-          "type": "color",
+          "$value": "{color.btn.bg.success}",
+          "$type": "color",
           "source": "$btn-success-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-success": {
-          "value": "{color.btn.bg.success}",
-          "type": "color",
+          "$value": "{color.btn.bg.success}",
+          "$type": "color",
           "source": "$btn-success-outline-color"
         }
       },
       "bg": {
         "success": {
-          "value": "{color.success.600}",
-          "type": "color",
+          "$value": "{color.success.600}",
+          "$type": "color",
           "source": "$btn-success-bg"
         },
         "outline-success": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-success-outline-bg"
         }
       },
       "border": {
         "success": {
-          "value": "{color.btn.bg.success}",
-          "type": "color",
+          "$value": "{color.btn.bg.success}",
+          "$type": "color",
           "source": "$btn-success-border-color"
         },
         "outline-success": {
-          "value": "{color.btn.bg.success}",
-          "type": "color",
+          "$value": "{color.btn.bg.success}",
+          "$type": "color",
           "source": "$btn-success-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "success": {
-            "value": "{color.btn.hover.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.success}",
+            "$type": "color",
             "source": "$btn-success-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-success": {
-            "value": "{color.success.600}",
-            "type": "color",
+            "$value": "{color.success.600}",
+            "$type": "color",
             "source": "$btn-success-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "success": {
-            "value": "{color.theme.hover.success}",
-            "type": "color",
+            "$value": "{color.theme.hover.success}",
+            "$type": "color",
             "source": "$btn-success-hover-bg"
           },
           "outline-success": {
-            "value": "{color.success.600}",
-            "type": "color",
+            "$value": "{color.success.600}",
+            "$type": "color",
             "source": "$btn-success-outline-hover-bg"
           }
         },
         "border": {
           "success": {
-            "value": "{color.btn.hover.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.success}",
+            "$type": "color",
             "source": "$btn-success-hover-border-color"
           },
           "outline-success": {
-            "value": "{color.btn.hover.bg.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "success": {
-            "value": "{color.btn.active.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.success}",
+            "$type": "color",
             "source": "$btn-success-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-success": {
-            "value": "{color.btn.active.bg.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "success": {
-            "value": "{color.theme.active.success}",
-            "type": "color",
+            "$value": "{color.theme.active.success}",
+            "$type": "color",
             "source": "$btn-success-active-bg"
           },
           "outline-success": {
-            "value": "{color.btn.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.bg.success}",
+            "$type": "color",
             "source": "$btn-success-outline-active-bg"
           }
         },
         "border": {
           "success": {
-            "value": "{color.theme.active.success}",
-            "type": "color",
+            "$value": "{color.theme.active.success}",
+            "$type": "color",
             "source": "$btn-success-active-border-color"
           },
           "outline-success": {
-            "value": "{color.btn.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.bg.success}",
+            "$type": "color",
             "source": "$btn-success-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "success": {
-            "value": "{color.btn.text.success}",
-            "type": "color",
+            "$value": "{color.btn.text.success}",
+            "$type": "color",
             "source": "$btn-success-focus-color"
           },
           "outline-success": {
-            "value": "{color.btn.text.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-focus-color"
           }
         },
         "border": {
           "success": {
-            "value": "{color.btn.border.success}",
-            "type": "color",
+            "$value": "{color.btn.border.success}",
+            "$type": "color",
             "source": "$btn-success-focus-border-color"
           },
           "outline-success": {
-            "value": "{color.btn.border.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-focus-border-color"
           }
         },
         "outline": {
           "success": {
-            "value": "{color.btn.border.success}",
-            "type": "color",
+            "$value": "{color.btn.border.success}",
+            "$type": "color",
             "source": "$btn-success-focus-focus-outline-color"
           },
           "outline-success": {
-            "value": "{color.btn.border.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-focus-outline-color"
           }
         },
         "bg": {
           "success": {
-            "value": "{color.btn.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.bg.success}",
+            "$type": "color",
             "source": "$btn-success-focus-bg"
           },
           "outline-success": {
-            "value": "{color.btn.bg.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "success": {
-            "value": "{color.btn.text.success}",
-            "type": "color",
+            "$value": "{color.btn.text.success}",
+            "$type": "color",
             "source": "$btn-success-disabled-color"
           },
           "outline-success": {
-            "value": "{color.btn.hover.text.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-disabled-color"
           }
         },
         "bg": {
           "success": {
-            "value": "{color.btn.bg.success}",
-            "type": "color",
+            "$value": "{color.btn.bg.success}",
+            "$type": "color",
             "source": "$btn-success-disabled-bg"
           },
           "outline-success": {
-            "value": "{color.btn.bg.outline-success",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-disabled-bg"
           }
         },
         "border": {
           "success": {
-            "value": "{color.btn.border.success}",
-            "type": "color",
+            "$value": "{color.btn.border.success}",
+            "$type": "color",
             "source": "$btn-success-disabled-border-color"
           },
           "outline-success": {
-            "value": "{color.btn.border.outline-success}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-success}",
+            "$type": "color",
             "source": "$btn-success-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json
index efa5894..caa8f0c 100644
--- a/tokens/src/themes/light/components/Button/tertiary.json
+++ b/tokens/src/themes/light/components/Button/tertiary.json
@@ -4,15 +4,15 @@
       "hover": {
         "text": {
           "tertiary": {
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-tertiary-hover-color"
           }
         },
         "bg": {
           "tertiary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-inverse-tertiary-hover-bg"
           }
         }
@@ -20,22 +20,22 @@
       "active": {
         "text": {
           "tertiary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-tertiary-active-color"
           }
         },
         "bg": {
           "tertiary": { 
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-tertiary-active-bg"
           }
         },
         "border": {
           "tertiary": {
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-tertiary-active-border-color"
           }
         }
@@ -43,29 +43,29 @@
       "focus": {
         "text": {
           "tertiary": { 
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-tertiary-focus-color"
           }
         },
         "bg": {
           "tertiary": { 
-            "value": "{color.white}",
-            "type": "color",
+            "$value": "{color.white}",
+            "$type": "color",
             "source": "$btn-tertiary-focus-bg" 
           }
         },
         "border": {
           "tertiary": { 
-            "value": "{color.primary.500}",
-            "type": "color",
+            "$value": "{color.primary.500}",
+            "$type": "color",
             "source": "$btn-tertiary-focus-border-color"
           }
         },
         "outline": {
           "tertiary": {
-            "value": "transparent",
-            "type": "color",
+            "$value": "transparent",
+            "$type": "color",
             "source": "$btn-tertiary-focus-outline-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
index 61dd0fd..32609ea 100644
--- a/tokens/src/themes/light/components/Button/warning.json
+++ b/tokens/src/themes/light/components/Button/warning.json
@@ -3,8 +3,8 @@
     "btn": {
       "text": {
         "warning": {
-          "value": "{color.btn.bg.warning}",
-          "type": "color",
+          "$value": "{color.btn.bg.warning}",
+          "$type": "color",
           "source": "$btn-warning-color",
           "modify": [
             {
@@ -13,40 +13,40 @@
           ]
         },
         "outline-warning": {
-          "value": "{color.btn.bg.warning}",
-          "type": "color",
+          "$value": "{color.btn.bg.warning}",
+          "$type": "color",
           "source": "$btn-warning-outline-color"
         }
       },
       "bg": {
         "warning": {
-          "value": "{color.warning.600}",
-          "type": "color",
+          "$value": "{color.warning.600}",
+          "$type": "color",
           "source": "$btn-warning-bg"
         },
         "outline-warning": {
-          "value": "{color.white}",
-          "type": "color",
+          "$value": "{color.white}",
+          "$type": "color",
           "source": "$btn-warning-outline-bg"
         }
       },
       "border": {
         "warning": {
-          "value": "{color.btn.bg.warning}",
-          "type": "color",
+          "$value": "{color.btn.bg.warning}",
+          "$type": "color",
           "source": "$btn-warning-border-color"
         },
         "outline-warning": {
-          "value": "{color.btn.bg.warning}",
-          "type": "color",
+          "$value": "{color.btn.bg.warning}",
+          "$type": "color",
           "source": "$btn-warning-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "warning": {
-            "value": "{color.btn.hover.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-hover-color",
             "modify": [
               {
@@ -55,8 +55,8 @@
             ]
           },
           "outline-warning": {
-            "value": "{color.warning.600}",
-            "type": "color",
+            "$value": "{color.warning.600}",
+            "$type": "color",
             "source": "$btn-warning-outline-hover-color",
             "modify": [
               {
@@ -67,25 +67,25 @@
         },
         "bg": {
           "warning": {
-            "value": "{color.theme.hover.warning}",
-            "type": "color",
+            "$value": "{color.theme.hover.warning}",
+            "$type": "color",
             "source": "$btn-warning-hover-bg"
           },
           "outline-warning": {
-            "value": "{color.warning.600}",
-            "type": "color",
+            "$value": "{color.warning.600}",
+            "$type": "color",
             "source": "$btn-warning-outline-hover-bg"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.btn.hover.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-hover-border-color"
           },
           "outline-warning": {
-            "value": "{color.btn.hover.bg.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.hover.bg.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-hover-border-color"
           }
         }
@@ -93,8 +93,8 @@
       "active": {
         "text": {
           "warning": {
-            "value": "{color.btn.active.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-active-color",
             "modify": [
               {
@@ -103,8 +103,8 @@
             ]
           },
           "outline-warning": {
-            "value": "{color.btn.active.bg.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.active.bg.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-active-color",
             "modify": [
               {
@@ -115,25 +115,25 @@
         },
         "bg": {
           "warning": {
-            "value": "{color.theme.active.warning}",
-            "type": "color",
+            "$value": "{color.theme.active.warning}",
+            "$type": "color",
             "source": "$btn-warning-active-bg"
           },
           "outline-warning": {
-            "value": "{color.btn.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-active-bg"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.theme.active.warning}",
-            "type": "color",
+            "$value": "{color.theme.active.warning}",
+            "$type": "color",
             "source": "$btn-warning-active-border-color"
           },
           "outline-warning": {
-            "value": "{color.btn.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-active-border-color"
           }
         }
@@ -141,49 +141,49 @@
       "focus": {
         "text": {
           "warning": {
-            "value": "{color.btn.text.warning}",
-            "type": "color",
+            "$value": "{color.btn.text.warning}",
+            "$type": "color",
             "source": "$btn-warning-focus-color"
           },
           "outline-warning": {
-            "value": "{color.btn.text.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.text.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-focus-color"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.btn.border.warning}",
-            "type": "color",
+            "$value": "{color.btn.border.warning}",
+            "$type": "color",
             "source": "$btn-warning-focus-border-color"
           },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-focus-border-color"
           }
         },
         "outline": {
           "warning": {
-            "value": "{color.btn.border.warning}",
-            "type": "color",
+            "$value": "{color.btn.border.warning}",
+            "$type": "color",
             "source": "$btn-warning-focus-focus-outline-color"
           },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-focus-outline-color"
           }
         },
         "bg": {
           "warning": {
-            "value": "{color.btn.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-focus-bg"
           },
           "outline-warning": {
-            "value": "{color.btn.bg.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-focus-bg"
           }
         }
@@ -191,37 +191,37 @@
       "disabled": {
         "text": {
           "warning": {
-            "value": "{color.btn.text.warning}",
-            "type": "color",
+            "$value": "{color.btn.text.warning}",
+            "$type": "color",
             "source": "$btn-warning-disabled-color"
           },
           "outline-warning": {
-            "value": "{color.btn.hover.text.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.hover.text.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-disabled-color"
           }
         },
         "bg": {
           "warning": {
-            "value": "{color.btn.bg.warning}",
-            "type": "color",
+            "$value": "{color.btn.bg.warning}",
+            "$type": "color",
             "source": "$btn-warning-disabled-bg"
           },
           "outline-warning": {
-            "value": "{color.btn.bg.outline-warning",
-            "type": "color",
+            "$value": "{color.btn.bg.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-disabled-bg"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.btn.border.warning}",
-            "type": "color",
+            "$value": "{color.btn.border.warning}",
+            "$type": "color",
             "source": "$btn-warning-disabled-border-color"
           },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
+            "$value": "{color.btn.border.outline-warning}",
+            "$type": "color",
             "source": "$btn-warning-outline-disabled-border-color"
           }
         }
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index 7545964..b594fb0 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -1,7 +1,7 @@
 {
   "elevation": {
     "dropdown": {
-      "box-shadow": { "value": "{elevation.box-shadow.level.2}" }
+      "box-shadow": { "$value": "{elevation.box-shadow.level.2}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index be0368b..103c323 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -2,13 +2,13 @@
   "color": {
     "form": {
       "input": {
-        "base": { "value": "{color.body.base}" },
+        "base": { "$value": "{color.body.base}" },
         "bg": {
-          "base": { "value": "{color.white}" }
+          "base": { "$value": "{color.white}" }
         },
         "focus": {
-          "border": { "value": "{color.body.base}" },
-          "bg": { "value": "{color.white}" }
+          "border": { "$value": "{color.body.base}" },
+          "bg": { "$value": "{color.white}" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index f42060a..b4cee32 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -2,7 +2,7 @@
   "elevation": {
     "form": {
       "input": {
-        "base": { "value": "none" }
+        "base": { "$value": "none" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index 5a5e183..636fa2b 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -5,12 +5,12 @@
         "feedback": {
           "icon": {
             "valid": {
-              "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e\")",
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e\")",
               "outputReferences": false,
               "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
             },
             "invalid": {
-              "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E\")",
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E\")",
               "outputReferences": false,
               "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
             }
diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
index 232da44..00dc65c 100644
--- a/tokens/src/themes/light/components/Image.json
+++ b/tokens/src/themes/light/components/Image.json
@@ -2,7 +2,7 @@
   "elevation": {
     "image": {
       "thumbnail": {
-        "box-shadow": { "value": "none" }
+        "box-shadow": { "$value": "none" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index 4136249..2da8b57 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -3,7 +3,7 @@
     "modal": {
       "content": {
         "box-shadow": {
-          "sm-up": { "value": "{elevation.box-shadow.level.3}" }
+          "sm-up": { "$value": "{elevation.box-shadow.level.3}" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json
index dd0a8fa..c664444 100644
--- a/tokens/src/themes/light/components/Pagination.json
+++ b/tokens/src/themes/light/components/Pagination.json
@@ -2,7 +2,7 @@
   "color": {
     "pagination": {
       "text": {
-        "base": { "value": "{color.primary.base}" }
+        "base": { "$value": "{color.primary.base}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index 2b12c24..0445e47 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -2,13 +2,13 @@
   "color": {
     "popover": {
       "header": {
-        "bg": { "value": "transparent" }
+        "bg": { "$value": "transparent" }
       }
     }
   },
   "elevation": {
     "popover": {
-      "box-shadow": { "value": "{elevation.box-shadow.level.2}" }
+      "box-shadow": { "$value": "{elevation.box-shadow.level.2}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index 694b3bb..4dacc79 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -1,7 +1,7 @@
 {
   "elevation": {
     "toast": {
-      "box-shadow": { "value": "{elevation.box-shadow.level.4}" }
+      "box-shadow": { "$value": "{elevation.box-shadow.level.4}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index 52e096d..3391db6 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -1,9 +1,9 @@
 {
   "color": {
     "tooltip": {
-      "light": { "value": "{color.primary.base}" },
+      "light": { "$value": "{color.primary.base}" },
       "bg": {
-        "base": { "value": "{color.primary.base}" }
+        "base": { "$value": "{color.primary.base}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json
index 9af4217..e81790d 100644
--- a/tokens/src/themes/light/components/general/body.json
+++ b/tokens/src/themes/light/components/general/body.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "body": {
-      "bg": { "value": "{color.white}" }
+      "bg": { "$value": "{color.white}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json
index fce41e2..a9a3237 100644
--- a/tokens/src/themes/light/components/general/headings.json
+++ b/tokens/src/themes/light/components/general/headings.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "headings": {
-      "base": { "value": "{color.dark.500}" }
+      "base": { "$value": "{color.dark.500}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index 58bf158..4f7aece 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "input": {
-      "btn-focus": { "value": "{color.bg.active}" }
+      "btn-focus": { "$value": "{color.bg.active}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json
index b655ae2..efc56bf 100644
--- a/tokens/src/themes/light/components/general/link.json
+++ b/tokens/src/themes/light/components/general/link.json
@@ -1,8 +1,8 @@
 {
   "color": {
     "link": {
-      "base": { "value": "{color.info.500}" },
-      "hover": { "value": "{color.info.700}", "modify": null }
+      "base": { "$value": "{color.info.500}" },
+      "hover": { "$value": "{color.info.700}", "modify": null }
     }
   }
 }
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index 4a1a70c..bbd5e3b 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -1,755 +1,559 @@
 {
+  "$type": "color",
   "color": {
-    "blue": { "value": "#00688D" },
-    "red": { "value": "#AB0D02" },
-    "green": { "value": "#0D7D4D" },
-    "yellow": { "value": "#D6B600" },
-    "white": { "value": "#FFFFFF" },
-    "black": { "value": "000000" },
+    "blue": { "$value": "#00688D" },
+    "red": { "$value": "#AB0D02" },
+    "green": { "$value": "#0D7D4D" },
+    "yellow": { "$value": "#D6B600" },
+    "white": { "$value": "#FFFFFF" },
+    "black": { "$value": "000000" },
     "gray": {
       "base": {
-        "value": "#EBEBEB",
-        "type": "color",
+        "$value": "#707070",
         "source": "$gray",
-        "description": "Basic gray color."
+        "$description": "Basic gray color."
       },
       "100": {
-        "value": "{color.gray.base}",
-        "type": "color",
+        "$value": "#EBEBEB",
         "source": "$gray-100",
-        "description": "Gray color of level 100."
+        "$description": "Gray color of level 100."
       },
       "200": {
-        "value": "#CCCCCC",
-        "type": "color",
+        "$value": "#CCCCCC",
         "source": "$gray-200",
-        "description": "Gray color of level 200."
+        "$description": "Gray color of level 200."
       },
       "300": {
-        "value": "#ADADAD",
-        "type": "color",
+        "$value": "#ADADAD",
         "source": "$gray-300",
-        "description": "Gray color of level 300."
+        "$description": "Gray color of level 300."
       },
       "400": {
-        "value": "#8F8F8F",
-        "type": "color",
+        "$value": "#8F8F8F",
         "source": "$gray-400",
-        "description": "Gray color of level 400."
+        "$description": "Gray color of level 400."
       },
       "500": {
-        "value": "#707070",
-        "type": "color",
+        "$value": "{color.gray.base}",
         "source": "$gray-500",
-        "description": "Gray color of level 500."
+        "$description": "Gray color of level 500."
       },
       "600": {
-        "value": "#5C5C5C",
-        "type": "color",
+        "$value": "#5C5C5C",
         "source": "$gray-600",
-        "description": "Gray color of level 600."
+        "$description": "Gray color of level 600."
       },
       "700": {
-        "value": "#454545",
-        "type": "color",
+        "$value": "#454545",
         "source": "$gray-700",
-        "description": "Gray color of level 700."
+        "$description": "Gray color of level 700."
       },
       "800": {
-        "value": "#333333",
-        "type": "color",
+        "$value": "#333333",
         "source": "$gray-800",
-        "description": "Gray color of level 800."
+        "$description": "Gray color of level 800."
       },
       "900": {
-        "value": "#212529",
-        "type": "color",
+        "$value": "#212529",
         "source": "$gray-900",
-        "description": "Gray color of level 900."
+        "$description": "Gray color of level 900."
       }
     },
     "accent": {
       "a": {
-        "base": {
-          "value": "#DFF9F2",
-          "type": "color",
-          "source": "$accent-a",
-          "description": "Accent-a color."
-        },
-        "100": {
-          "value": "{color.accent.a.base}",
-          "type": "color",
-          "source": "$accent-a-100",
-          "description": "Accent-a color of level 100."
-        },
-        "200": {
-          "value": "#BEF4E5",
-          "type": "color",
-          "source": "$accent-a-200",
-          "description": "Accent-a color of level 200."
-        },
-        "300": {
-          "value": "#9EEED9",
-          "type": "color",
-          "source": "$accent-a-300",
-          "description": "Accent-a color of level 300."
-        },
-        "400": {
-          "value": "#7DE9CC",
-          "type": "color",
-          "source": "$accent-a-400",
-          "description": "Accent-a color of level 400."
-        },
-        "500": {
-          "value": "#5DE3BF",
-          "type": "color",
-          "source": "$accent-a-500",
-          "description": "Accent-a color of level 500."
-        },
-        "600": {
-          "value": "#4AB699",
-          "type": "color",
-          "source": "$accent-a-600",
-          "description": "Accent-a color of level 600."
-        },
-        "700": {
-          "value": "#388873",
-          "type": "color",
-          "source": "$accent-a-700",
-          "description": "Accent-a color of level 700."
-        },
-        "800": {
-          "value": "#255B4C",
-          "type": "color",
-          "source": "$accent-a-800",
-          "description": "Accent-a color of level 800."
-        },
-        "900": {
-          "value": "#132D26",
-          "type": "color",
-          "source": "$accent-a-900",
-          "description": "Accent-a color of level 900."
-        }
+        "$value": "#5DE3BF",
+        "source": "$accent-a",
+        "$description": "Accent-a color."
       },
       "b": {
-        "base": {
-          "value": "#FBEDF2",
-          "type": "color",
-          "source": "$accent-b",
-          "description": "Accent-b color."
-        },
-        "100": {
-          "value": "{color.accent.b.base}",
-          "type": "color",
-          "source": "$accent-b-100",
-          "description": "Accent-b color of level 100."
-        },
-        "200": {
-          "value": "#F7DCE4",
-          "type": "color",
-          "source": "$accent-b-200",
-          "description": "Accent-b color of level 200."
-        },
-        "300": {
-          "value": "#F3CAD7",
-          "type": "color",
-          "source": "$accent-b-300",
-          "description": "Accent-b color of level 300."
-        },
-        "400": {
-          "value": "#EFB9C9",
-          "type": "color",
-          "source": "$accent-b-400",
-          "description": "Accent-b color of level 400."
-        },
-        "500": {
-          "value": "#EBA7BC",
-          "type": "color",
-          "source": "$accent-b-500",
-          "description": "Accent-b color of level 500."
-        },
-        "600": {
-          "value": "#BC8696",
-          "type": "color",
-          "source": "$accent-b-600",
-          "description": "Accent-b color of level 600."
-        },
-        "700": {
-          "value": "#8D6471",
-          "type": "color",
-          "source": "$accent-b-700",
-          "description": "Accent-b color of level 700."
-        },
-        "800": {
-          "value": "#5E434B",
-          "type": "color",
-          "source": "$accent-b-800",
-          "description": "Accent-b color of level 800."
-        },
-        "900": {
-          "value": "#2F2126",
-          "type": "color",
-          "source": "$accent-b-900",
-          "description": "Accent-b color of level 900."
-        }
+        "$value": "#EBA7BC",
+        "source": "$accent-b",
+        "$description": "Accent-b color."
       }
     },
     "primary": {
       "base": {
-        "value": "#F0F2F2",
-        "type": "color",
+        "$value": "#00262B",
         "source": "$primary",
-        "description": "Basic primary color."
+        "$description": "Basic primary color."
       },
       "100": {
-        "value": "{color.primary.base}",
-        "type": "color",
+        "$value": "#F0F2F2",
         "source": "$primary-100",
-        "description": "Primary color of level 100."
+        "$description": "Primary color of level 100.",
+        "modify": null
       },
       "200": {
-        "value": "#BFC9CA",
-        "type": "color",
+        "$value": "#BFC9CA",
         "source": "$primary-200",
-        "description": "Primary color of level 200.",
+        "$description": "Primary color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#2D494E",
-        "type": "color",
+        "$value": "#2D494E",
         "source": "$primary-300",
-        "description": "Primary color of level 300.",
+        "$description": "Primary color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#0E3639",
-        "type": "color",
+        "$value": "#0E3639",
         "source": "$primary-400",
-        "description": "Primary color of level 400.",
+        "$description": "Primary color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#00262B",
-        "type": "color",
+        "$value": "{color.primary.base}",
         "source": "$primary-500",
-        "description": "Primary color of level 500."
+        "$description": "Primary color of level 500.",
+        "modify": null
       },
       "600": {
-        "value": "#002326",
-        "type": "color",
+        "$value": "#002326",
         "source": "$primary-600",
-        "description": "Primary color of level 600.",
+        "$description": "Primary color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#002121",
-        "type": "color",
+        "$value": "#002121",
         "source": "$primary-700",
-        "description": "Primary color of level 700.",
+        "$description": "Primary color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#001D20",
-        "type": "color",
+        "$value": "#001D20",
         "source": "$primary-800",
-        "description": "Primary color of level 800.",
+        "$description": "Primary color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#001B1E",
-        "type": "color",
+        "$value": "#001B1E",
         "source": "$primary-900",
-        "description": "Primary color of level 900.",
+        "$description": "Primary color of level 900.",
         "modify": null
       }
     },
     "brand": {
       "base": {
-        "value": "#F49974",
-        "type": "color",
+        "$value": "#D74000",
         "source": "$brand",
-        "description": "Basic brand color."
+        "$description": "Basic brand color."
       },
       "100": {
-        "value": "{color.brand.base}",
-        "type": "color",
+        "$value": "#F49974",
         "source": "$brand-100",
-        "description": "Brand color of level 100.",
+        "$description": "Brand color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#EE855A",
-        "type": "color",
+        "$value": "#EE855A",
         "source": "$brand-200",
-        "description": "Brand color of level 200.",
+        "$description": "Brand color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#E76F3F",
-        "type": "color",
+        "$value": "#E76F3F",
         "source": "$brand-300",
-        "description": "Brand color of level 300.",
+        "$description": "Brand color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#DF5924",
-        "type": "color",
+        "$value": "#DF5924",
         "source": "$brand-400",
-        "description": "Brand color of level 400.",
+        "$description": "Brand color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#D74000",
-        "type": "color",
+        "$value": "{color.brand.base}",
         "source": "$brand-500",
-        "description": "Brand color of level 500."
+        "$description": "Brand color of level 500."
       },
       "600": {
-        "value": "#BC3A05",
-        "type": "color",
+        "$value": "#BC3A05",
         "source": "$brand-600",
-        "description": "Brand color of level 600.",
+        "$description": "Brand color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#A33508",
-        "type": "color",
+        "$value": "#A33508",
         "source": "$brand-700",
-        "description": "Brand color of level 700.",
+        "$description": "Brand color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#8B2F0B",
-        "type": "color",
+        "$value": "#8B2F0B",
         "source": "$brand-800",
-        "description": "Brand color of level 800.",
+        "$description": "Brand color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#73290C",
-        "type": "color",
+        "$value": "#73290C",
         "source": "$brand-900",
-        "description": "Brand color of level 900.",
+        "$description": "Brand color of level 900.",
         "modify": null
       }
     },
     "success": {
       "base": {
-        "value": "#F2FAF7",
-        "type": "color",
+        "$value": "#0D7D4D",
         "source": "$success",
-        "description": "Basic success color."
+        "$description": "Basic success color."
       },
       "100": {
-        "value": "{color.success.base}",
-        "type": "color",
+        "$value": "#F2FAF7",
         "source": "$success-100",
-        "description": "Success color of level 100.",
+        "$description": "Success color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#BBE6D7",
-        "type": "color",
+        "$value": "#BBE6D7",
         "source": "$success-200",
-        "description": "Success color of level 200.",
+        "$description": "Success color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#30A171",
-        "type": "color",
+        "$value": "#30A171",
         "source": "$success-300",
-        "description": "Success color of level 300.",
+        "$description": "Success color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#4A9E7A",
-        "type": "color",
+        "$value": "#4A9E7A",
         "source": "$success-400",
-        "description": "Success color of level 400.",
+        "$description": "Success color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#0D7D4D",
-        "type": "color",
+        "$value": "{color.success.base}",
         "source": "$success-500",
-        "description": "Success color of level 500."
+        "$description": "Success color of level 500.",
+        "modify": null
       },
       "600": {
-        "value": "#0C7145",
-        "type": "color",
+        "$value": "#0C7145",
         "source": "$success-600",
-        "description": "Success color of level 600.",
+        "$description": "Success color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#175B3C",
-        "type": "color",
+        "$value": "#175B3C",
         "source": "$success-700",
-        "description": "Success color of level 700.",
+        "$description": "Success color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#0A5E3A",
-        "type": "color",
+        "$value": "#0A5E3A",
         "source": "$success-800",
-        "description": "Success color of level 800.",
+        "$description": "Success color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#0F4D0F",
-        "type": "color",
+        "$value": "#0F4D0F",
         "source": "$success-900",
-        "description": "Success color of level 900.",
+        "$description": "Success color of level 900.",
         "modify": null
       }
     },
     "info": {
       "base": {
-        "value": "#EFF8FA",
-        "type": "color",
+        "$value": "#00688D",
         "source": "$info",
-        "description": "Basic info color."
+        "$description": "Basic info color."
       },
       "100": {
-        "value": "{color.info.base}",
-        "type": "color",
+        "$value": "#EFF8FA",
         "source": "$info-100",
-        "description": "Info color of level 100.",
+        "$description": "Info color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#9CD2E6",
-        "type": "color",
+        "$value": "#9CD2E6",
         "source": "$info-200",
-        "description": "Info color of level 200.",
+        "$description": "Info color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#1C8DBE",
-        "type": "color",
+        "$value": "#1C8DBE",
         "source": "$info-300",
-        "description": "Info color of level 300.",
+        "$description": "Info color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#408EAA",
-        "type": "color",
+        "$value": "#408EAA",
         "source": "$info-400",
-        "description": "Info color of level 400.",
+        "$description": "Info color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#00688D",
-        "type": "color",
+        "$value": "{color.info.base}",
         "source": "$info-500",
-        "description": "Info color of level 500."
+        "$description": "Info color of level 500."
       },
       "600": {
-        "value": "#005E7F",
-        "type": "color",
+        "$value": "#005E7F",
         "source": "$info-600",
-        "description": "Info color of level 600.",
+        "$description": "Info color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#004972",
-        "type": "color",
+        "$value": "#004972",
         "source": "$info-700",
-        "description": "Info color of level 700.",
+        "$description": "Info color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#004E6A",
-        "type": "color",
+        "$value": "#004E6A",
         "source": "$info-800",
-        "description": "Info color of level 800.",
+        "$description": "Info color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#002F4A",
-        "type": "color",
+        "$value": "#002F4A",
         "source": "$info-900",
-        "description": "Info color of level 900.",
+        "$description": "Info color of level 900.",
         "modify": null
       }
     },
     "warning": {
       "base": {
-        "value": "#FFFADB",
-        "type": "color",
+        "$value": "#D6B600",
         "source": "$warning",
-        "description": "Basic warning color."
+        "$description": "Basic warning color."
       },
       "100": {
-        "value": "{color.warning.base}",
-        "type": "color",
+        "$value": "#FFFADB",
         "source": "$warning-100",
-        "description": "Warning color of level 100.",
+        "$description": "Warning color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#FFEA75",
-        "type": "color",
+        "$value": "#FFEA75",
         "source": "$warning-200",
-        "description": "Warning color of level 200.",
+        "$description": "Warning color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#F0CC00",
-        "type": "color",
+        "$value": "#F0CC00",
         "source": "$warning-300",
-        "description": "Warning color of level 300.",
+        "$description": "Warning color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#E0C840",
-        "type": "color",
+        "$value": "#E0C840",
         "source": "$warning-400",
-        "description": "Warning color of level 400.",
+        "$description": "Warning color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#D6B600",
-        "type": "color",
+        "$value": "{color.warning.base}",
         "source": "$warning-500",
-        "description": "Warning color of level 500."
+        "$description": "Warning color of level 500.",
+        "modify": null
       },
       "600": {
-        "value": "#C1A400",
-        "type": "color",
+        "$value": "#C1A400",
         "source": "$warning-600",
-        "description": "Warning color of level 600.",
+        "$description": "Warning color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#998200",
-        "type": "color",
+        "$value": "#998200",
         "source": "$warning-700",
-        "description": "Warning color of level 700.",
+        "$description": "Warning color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#A18900",
-        "type": "color",
+        "$value": "#A18900",
         "source": "$warning-800",
-        "description": "Warning color of level 800.",
+        "$description": "Warning color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#7A6800",
-        "type": "color",
+        "$value": "#7A6800",
         "source": "$warning-900",
-        "description": "Warning color of level 900.",
+        "$description": "Warning color of level 900.",
         "modify": null
       }
     },
     "danger": {
       "base": {
-        "value": "#FCF1F4",
-        "type": "color",
+        "$value": "#AB0D02",
         "source": "$danger",
-        "description": "Basic danger color."
+        "$description": "Basic danger color."
       },
       "100": {
-        "value": "{color.danger.base}",
-        "type": "color",
+        "$value": "#FCF1F4",
         "source": "$danger-100",
-        "description": "Danger color of level 100.",
+        "$description": "Danger color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#F3AEA9",
-        "type": "color",
+        "$value": "#F3AEA9",
         "source": "$danger-200",
-        "description": "Danger color of level 200.",
+        "$description": "Danger color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#CA3A2F",
-        "type": "color",
+        "$value": "#CA3A2F",
         "source": "$danger-300",
-        "description": "Danger color of level 300.",
+        "$description": "Danger color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#C04A41",
-        "type": "color",
+        "$value": "#C04A41",
         "source": "$danger-400",
-        "description": "Danger color of level 400.",
+        "$description": "Danger color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#AB0D02",
-        "type": "color",
+        "$value": "{color.danger.base}",
         "source": "$danger-500",
-        "description": "Danger color of level 500."
+        "$description": "Danger color of level 500.",
+        "modify": null
       },
       "600": {
-        "value": "#9A0C02",
-        "type": "color",
+        "$value": "#9A0C02",
         "source": "$danger-600",
-        "description": "Danger color of level 600.",
+        "$description": "Danger color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#951C13",
-        "type": "color",
+        "$value": "#951C13",
         "source": "$danger-700",
-        "description": "Danger color of level 700.",
+        "$description": "Danger color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#800A02",
-        "type": "color",
+        "$value": "#800A02",
         "source": "$danger-800",
-        "description": "Danger color of level 800.",
+        "$description": "Danger color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#690E07",
-        "type": "color",
+        "$value": "#690E07",
         "source": "$danger-900",
-        "description": "Danger color of level 900.",
+        "$description": "Danger color of level 900.",
         "modify": null
       }
     },
     "light": {
       "base": {
-        "value": "#F9F8F6",
-        "type": "color",
+        "$value": "#E1DDD2",
         "source": "$light",
-        "description": "Basic light color."
+        "$description": "Basic light color."
       },
       "100": {
-        "value": "{color.light.base}",
-        "type": "color",
+        "$value": "#F9F8F6",
         "source": "$light-100",
-        "description": "Light color of level 100.",
+        "$description": "Light color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#F3F1ED",
-        "type": "color",
+        "$value": "#F3F1ED",
         "source": "$light-200",
-        "description": "Light color of level 200.",
+        "$description": "Light color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#EDEBE4",
-        "type": "color",
+        "$value": "#EDEBE4",
         "source": "$light-300",
-        "description": "Light color of level 300.",
+        "$description": "Light color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#E7E4DB",
-        "type": "color",
+        "$value": "#E7E4DB",
         "source": "$light-400",
-        "description": "Light color of level 400.",
+        "$description": "Light color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#E1DDD2",
-        "type": "color",
+        "$value": "{color.light.base}",
         "source": "$light-500",
-        "description": "Light color of level 500."
+        "$description": "Light color of level 500.",
+        "modify": null
       },
       "600": {
-        "value": "#B4B1A8",
-        "type": "color",
+        "$value": "#B4B1A8",
         "source": "$light-600",
-        "description": "Light color of level 600.",
+        "$description": "Light color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#87857E",
-        "type": "color",
+        "$value": "#87857E",
         "source": "$light-700",
-        "description": "Light color of level 700.",
+        "$description": "Light color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#5A5854",
-        "type": "color",
+        "$value": "#5A5854",
         "source": "$light-800",
-        "description": "Light color of level 800.",
+        "$description": "Light color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#2D2C2A",
-        "type": "color",
+        "$value": "#2D2C2A",
         "source": "$light-900",
-        "description": "Light color of level 900.",
+        "$description": "Light color of level 900.",
         "modify": null
       }
     },
     "dark": {
       "base": {
-        "value": "#D2DAD8",
-        "type": "color",
+        "$value": "#1F453D",
         "source": "$dark",
-        "description": "Basic dark color."
+        "$description": "Basic dark color."
       },
       "100": {
-        "value": "{color.dark.base}",
-        "type": "color",
+        "$value": "#D2DAD8",
         "source": "$dark-100",
-        "description": "Dark color of level 100.",
+        "$description": "Dark color of level 100.",
         "modify": null
       },
       "200": {
-        "value": "#BFC9CA",
-        "type": "color",
+        "$value": "#BFC9CA",
         "source": "$dark-200",
-        "description": "Dark color of level 200.",
+        "$description": "Dark color of level 200.",
         "modify": null
       },
       "300": {
-        "value": "#798F8B",
-        "type": "color",
+        "$value": "#798F8B",
         "source": "$dark-300",
-        "description": "Dark color of level 300.",
+        "$description": "Dark color of level 300.",
         "modify": null
       },
       "400": {
-        "value": "#4C6A64",
-        "type": "color",
+        "$value": "#4C6A64",
         "source": "$dark-400",
-        "description": "Dark color of level 400.",
+        "$description": "Dark color of level 400.",
         "modify": null
       },
       "500": {
-        "value": "#1F453D",
-        "type": "color",
+        "$value": "{color.dark.base}",
         "source": "$dark-500",
-        "description": "Dark color of level 500."
+        "$description": "Dark color of level 500.",
+        "modify": null
       },
       "600": {
-        "value": "#193731",
-        "type": "color",
+        "$value": "#193731",
         "source": "$dark-600",
-        "description": "Dark color of level 600.",
+        "$description": "Dark color of level 600.",
         "modify": null
       },
       "700": {
-        "value": "#132925",
-        "type": "color",
+        "$value": "#132925",
         "source": "$dark-700",
-        "description": "Info color of level 700.",
+        "$description": "Info color of level 700.",
         "modify": null
       },
       "800": {
-        "value": "#0C1C18",
-        "type": "color",
+        "$value": "#0C1C18",
         "source": "$dark-800",
-        "description": "Dark color of level 800.",
+        "$description": "Dark color of level 800.",
         "modify": null
       },
       "900": {
-        "value": "#060E0C",
-        "type": "color",
+        "$value": "#060E0C",
         "source": "$dark-900",
-        "description": "Dark color of level 900.",
+        "$description": "Dark color of level 900.",
         "modify": null
       }
     }
diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
index e251a93..cf8f341 100644
--- a/tokens/src/themes/light/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -2,14 +2,14 @@
   "elevation": {
     "box-shadow": {
       "level": {
-        "1": { "value": "0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15)" },
-        "2": { "value": "0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15)" },
-        "3": { "value": "0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15)" },
-        "4": { "value": "0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15)" }
+        "1": { "$value": "0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15)" },
+        "2": { "$value": "0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15)" },
+        "3": { "$value": "0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15)" },
+        "4": { "$value": "0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15)" }
       },
-      "base": { "value": "{elevation.box-shadow.level.2}" },
-      "sm": { "value": "{elevation.box-shadow.level.1}" },
-      "lg": { "value": "{elevation.box-shadow.level.3}" }
+      "base": { "$value": "{elevation.box-shadow.level.2}" },
+      "sm": { "$value": "{elevation.box-shadow.level.1}" },
+      "lg": { "$value": "{elevation.box-shadow.level.3}" }
     }
   }
 }