diff --git a/package-lock.json b/package-lock.json
index 0c7ecc78a..c4b7e02ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -452,9 +452,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.0.tgz",
-      "integrity": "sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA==",
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "dependencies": {
+        "@babel/types": "^7.25.2"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1821,13 +1824,13 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.2.tgz",
-      "integrity": "sha512-s4/r+a7xTnny2O6FcZzqgT6nE4/GHEdcqj4qAeglbUOh0TeglEfmNJFAd/OLoVtGd6ZhAO8GCVvCNUO5t/VJVQ==",
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
+      "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
         "@babel/generator": "^7.25.0",
-        "@babel/parser": "^7.25.0",
+        "@babel/parser": "^7.25.3",
         "@babel/template": "^7.25.0",
         "@babel/types": "^7.25.2",
         "debug": "^4.3.1",
@@ -2431,9 +2434,9 @@
       }
     },
     "node_modules/@jest/console/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -2573,9 +2576,9 @@
       }
     },
     "node_modules/@jest/core/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -2723,9 +2726,9 @@
       }
     },
     "node_modules/@jest/environment/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -2850,9 +2853,9 @@
       }
     },
     "node_modules/@jest/fake-timers/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -2952,9 +2955,9 @@
       }
     },
     "node_modules/@jest/globals/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -3111,9 +3114,9 @@
       }
     },
     "node_modules/@jest/reporters/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -3299,9 +3302,9 @@
       }
     },
     "node_modules/@jest/test-result/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -3434,9 +3437,9 @@
       }
     },
     "node_modules/@jest/transform/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -4356,15 +4359,15 @@
       "link": true
     },
     "node_modules/@s-ui/react-atom-icon": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@s-ui/react-atom-icon/-/react-atom-icon-1.18.0.tgz",
-      "integrity": "sha512-xby2Ro8lwbgAlsCjHxLaF+6v39neGWvT00nvahhgfizKYoOrusA7L4kHe2Olf/2Ej1Q8j60SpsGNV0fAdYWkpA==",
+      "version": "1.18.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@s-ui/react-atom-icon/-/react-atom-icon-1.18.0-beta.1.tgz",
+      "integrity": "sha512-ZriCzYoTAnjHG1Wdx5K9hDi+j0aNsGZNf2yjAcNlDu+3dOtWD9krWfAn/YU0z73KQ65wO8F5YtKLDVyDiFA4rA==",
       "dependencies": {
-        "@s-ui/react-hooks": "1",
-        "@s-ui/react-primitive-polymorphic-element": "1"
+        "@s-ui/react-hooks": "beta",
+        "@s-ui/react-primitive-polymorphic-element": "beta"
       },
       "peerDependencies": {
-        "@s-ui/component-dependencies": "1"
+        "@s-ui/component-dependencies": "beta"
       }
     },
     "node_modules/@s-ui/react-context": {
@@ -4376,24 +4379,38 @@
       "link": true
     },
     "node_modules/@s-ui/react-hooks": {
-      "version": "1.38.0",
-      "resolved": "https://registry.npmjs.org/@s-ui/react-hooks/-/react-hooks-1.38.0.tgz",
-      "integrity": "sha512-enOpMa6yfM1sHhqdx2uJMPcrXikYG1Zl/vQZBOr6NWMAyCf5nFoCp0KJPHpTH1oEZb9dDPU5V6a4fy3EvepZ3A==",
+      "version": "1.38.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@s-ui/react-hooks/-/react-hooks-1.38.0-beta.0.tgz",
+      "integrity": "sha512-0jb8GZvCyhcZPiwLejfBL4TdLXqB/+SvdmSB2j/Bin7wb6l6vZtnpkOb2dKMoOe9Rsheet4WljF9uF2UI2Cyow==",
       "dependencies": {
-        "@s-ui/component-dependencies": "1",
+        "@s-ui/component-dependencies": "beta",
         "intersection-observer": "0.10.0"
       }
     },
+    "node_modules/@s-ui/react-hooks/node_modules/@s-ui/component-dependencies": {
+      "version": "1.7.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@s-ui/component-dependencies/-/component-dependencies-1.7.0-beta.0.tgz",
+      "integrity": "sha512-QfN9If/aQCG166uDVrH8sQ7xA43YykCY2aQk9ITGXSL9jvueNpbdSyHOoEacY+/ts/Cbsfhj3VJEaxyCp1iG2g==",
+      "dependencies": {
+        "@s-ui/theme": "beta",
+        "classnames": "2.2.5"
+      }
+    },
+    "node_modules/@s-ui/react-hooks/node_modules/@s-ui/theme": {
+      "version": "9.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@s-ui/theme/-/theme-9.0.0-beta.0.tgz",
+      "integrity": "sha512-2GzP6XBg20bH++2GI9UyE3J8Hfvd4KoirAjpkqC3wNgWVFFzYirxZeRPm5QVMYDNiPHJkPGp91Xsp1UkATIiOQ=="
+    },
     "node_modules/@s-ui/react-initial-props": {
       "resolved": "packages/sui-react-initial-props",
       "link": true
     },
     "node_modules/@s-ui/react-primitive-polymorphic-element": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@s-ui/react-primitive-polymorphic-element/-/react-primitive-polymorphic-element-1.2.0.tgz",
-      "integrity": "sha512-qneL/t9Ix2gR3pewNPukrw+Kf2gRVMN94dnURicaqrUfUzRbikFdjKvP768FzbvORrbsgqeTNtwTuDaLFVnYlA==",
+      "version": "1.2.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@s-ui/react-primitive-polymorphic-element/-/react-primitive-polymorphic-element-1.2.0-beta.0.tgz",
+      "integrity": "sha512-2AGs21lRMJvXD4UzUazgmzwKlFHemQgfVMjR2WZlQAyN8of9e7DJjVlZUjxfWidN1RS/SWP9h5dWJUsJfngJPw==",
       "peerDependencies": {
-        "@s-ui/theme": "8"
+        "@s-ui/theme": "beta"
       }
     },
     "node_modules/@s-ui/react-router": {
@@ -5217,9 +5234,9 @@
       "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA=="
     },
     "node_modules/@types/http-proxy": {
-      "version": "1.17.14",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz",
-      "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
+      "version": "1.17.15",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
+      "integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==",
       "dependencies": {
         "@types/node": "*"
       }
@@ -5354,9 +5371,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "16.18.104",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.104.tgz",
-      "integrity": "sha512-OF3keVCbfPlkzxnnDBUZJn1RiCJzKeadjiW0xTEb0G1SUJ5gDVb3qnzZr2T4uIFvsbKJbXy1v2DN7e2zaEY7jQ=="
+      "version": "16.18.105",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.105.tgz",
+      "integrity": "sha512-w2d0Z9yMk07uH3+Cx0N8lqFyi3yjXZxlbYappPj+AsOlT02OyxyiuNoNHdGt6EuiSm8Wtgp2YV7vWg+GMFrvFA=="
     },
     "node_modules/@types/node-forge": {
       "version": "1.3.11",
@@ -6552,9 +6569,9 @@
       }
     },
     "node_modules/aws4": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.0.tgz",
-      "integrity": "sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g=="
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.1.tgz",
+      "integrity": "sha512-u5w79Rd7SU4JaIlA/zFqG+gOiuq25q5VLyZ8E+ijJeILuTxVzZgp2CaGw/UTw6pXYN9XMO9yiqj/nEHmhTG5CA=="
     },
     "node_modules/axios": {
       "version": "1.6.7",
@@ -7277,9 +7294,9 @@
       "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw=="
     },
     "node_modules/browserslist": {
-      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
       "funding": [
         {
           "type": "opencollective",
@@ -7295,9 +7312,9 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.14",
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
         "update-browserslist-db": "^1.1.0"
       },
       "bin": {
@@ -7478,9 +7495,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001645",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz",
-      "integrity": "sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "funding": [
         {
           "type": "opencollective",
@@ -8337,9 +8354,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
-      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
+      "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -8347,11 +8364,11 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
-      "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==",
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.0.tgz",
+      "integrity": "sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==",
       "dependencies": {
-        "browserslist": "^4.23.0"
+        "browserslist": "^4.23.3"
       },
       "funding": {
         "type": "opencollective",
@@ -8359,9 +8376,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.37.1.tgz",
-      "integrity": "sha512-J/r5JTHSmzTxbiYYrzXg9w1VpqrYt+gexenBE9pugeyhwPZTAEJddyiReJWsLO6uNQ8xJZFbod6XC7KKwatCiA==",
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.38.0.tgz",
+      "integrity": "sha512-8balb/HAXo06aHP58mZMtXgD8vcnXz9tUDePgqBgJgKdmTlMt+jw3ujqniuBDQXMvTzxnMpxHFeuSM3g1jWQuQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -8471,9 +8488,9 @@
       }
     },
     "node_modules/create-jest/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -9792,9 +9809,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.4.tgz",
-      "integrity": "sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA=="
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.6.tgz",
+      "integrity": "sha512-jwXWsM5RPf6j9dPYzaorcBSUg6AiqocPEyMpkchkvntaH9HGfOOMZwxMJjDY/XEs3T5dM7uyH1VhRMkqUU9qVw=="
     },
     "node_modules/element-polyfill": {
       "version": "1.1.0",
@@ -12206,9 +12223,9 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -13396,9 +13413,9 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "engines": {
         "node": ">= 4"
       }
@@ -14476,9 +14493,9 @@
       }
     },
     "node_modules/jest-circus/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -14633,9 +14650,9 @@
       }
     },
     "node_modules/jest-cli/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -14803,9 +14820,9 @@
       }
     },
     "node_modules/jest-config/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -15061,9 +15078,9 @@
       }
     },
     "node_modules/jest-each/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -15204,9 +15221,9 @@
       }
     },
     "node_modules/jest-environment-jsdom/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -15308,9 +15325,9 @@
       }
     },
     "node_modules/jest-environment-node/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -15428,9 +15445,9 @@
       }
     },
     "node_modules/jest-haste-map/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -15711,9 +15728,9 @@
       }
     },
     "node_modules/jest-message-util/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -15849,9 +15866,9 @@
       }
     },
     "node_modules/jest-mock/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16095,9 +16112,9 @@
       }
     },
     "node_modules/jest-runner/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16260,9 +16277,9 @@
       }
     },
     "node_modules/jest-runtime/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16386,9 +16403,9 @@
       }
     },
     "node_modules/jest-snapshot/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16530,9 +16547,9 @@
       }
     },
     "node_modules/jest-util/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16634,9 +16651,9 @@
       }
     },
     "node_modules/jest-validate/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16780,9 +16797,9 @@
       }
     },
     "node_modules/jest-watcher/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -16903,9 +16920,9 @@
       }
     },
     "node_modules/jest/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -17510,9 +17527,9 @@
       "integrity": "sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA=="
     },
     "node_modules/launch-editor": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz",
-      "integrity": "sha512-vJranOAJrI/llyWGRQqiDM+adrw+k83fvmmx3+nV47g3+36xM15jE+zyZ6Ffel02+xSvuM0b2GDRosXZkbb6wA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.1.tgz",
+      "integrity": "sha512-elBx2l/tp9z99X5H/qev8uyDywVh0VXAwEbjk8kJhnc5grOFkGh7aW6q55me9xnYbss261XtnUrysZ+XvGbhQA==",
       "dependencies": {
         "picocolors": "^1.0.0",
         "shell-quote": "^1.8.1"
@@ -20747,9 +20764,9 @@
       }
     },
     "node_modules/postcss-resolve-nested-selector": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.4.tgz",
-      "integrity": "sha512-R6vHqZWgVnTAPq0C+xjyHfEZqfIYboCBVSy24MjxEDm+tIh1BU4O6o7DP7AA7kHzf136d+Qc5duI4tlpHjixDw=="
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+      "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw=="
     },
     "node_modules/postcss-safe-parser": {
       "version": "6.0.0",
@@ -20782,9 +20799,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
-      "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
+      "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==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -22291,9 +22308,9 @@
       }
     },
     "node_modules/set-cookie-parser": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ=="
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
+      "integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ=="
     },
     "node_modules/set-function-length": {
       "version": "1.2.2",
@@ -23678,9 +23695,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/terser": {
-      "version": "5.31.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz",
-      "integrity": "sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==",
+      "version": "5.31.5",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.5.tgz",
+      "integrity": "sha512-YPmas0L0rE1UyLL/llTWA0SiDOqIcAQYLeUj7cJYzXHlRTAnMSg9pPe4VJ5PlKvTrPQsdVFuiRiwyeNlYgwh2Q==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -24153,9 +24170,9 @@
       }
     },
     "node_modules/uglify-js": {
-      "version": "3.19.1",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.1.tgz",
-      "integrity": "sha512-y/2wiW+ceTYR2TSSptAhfnEtpLaQ4Ups5zrjB2d3kuVxHj16j/QJwPl5PvuGy9uARb39J0+iKxcRPvtpsx4A4A==",
+      "version": "3.19.2",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.2.tgz",
+      "integrity": "sha512-S8KA6DDI47nQXJSi2ctQ629YzwOVs+bQML6DAtvy0wgNdpi+0ySpQK0g2pxBq2xfF2z3YCscu7NNA8nXT9PlIQ==",
       "optional": true,
       "bin": {
         "uglifyjs": "bin/uglifyjs"
@@ -25819,7 +25836,7 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "packages/eslint-plugin-sui": {
-      "version": "1.9.0",
+      "version": "1.10.0",
       "license": "ISC",
       "dependencies": {
         "fast-glob": "3.3.2",
@@ -25863,7 +25880,7 @@
     },
     "packages/sui-bundler": {
       "name": "@s-ui/bundler",
-      "version": "9.61.0",
+      "version": "9.62.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -25952,13 +25969,18 @@
     },
     "packages/sui-component-dependencies": {
       "name": "@s-ui/component-dependencies",
-      "version": "1.7.0",
+      "version": "1.7.0-beta.0",
       "license": "MIT",
       "dependencies": {
-        "@s-ui/theme": "8",
+        "@s-ui/theme": "beta",
         "classnames": "2.2.5"
       }
     },
+    "packages/sui-component-dependencies/node_modules/@s-ui/theme": {
+      "version": "9.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@s-ui/theme/-/theme-9.0.0-beta.0.tgz",
+      "integrity": "sha512-2GzP6XBg20bH++2GI9UyE3J8Hfvd4KoirAjpkqC3wNgWVFFzYirxZeRPm5QVMYDNiPHJkPGp91Xsp1UkATIiOQ=="
+    },
     "packages/sui-consents": {
       "name": "@s-ui/consents",
       "version": "1.6.0",
@@ -26045,7 +26067,7 @@
     },
     "packages/sui-decorators": {
       "name": "@s-ui/decorators",
-      "version": "3.26.0",
+      "version": "3.27.0",
       "license": "MIT",
       "dependencies": {
         "@s-ui/js": "2",
@@ -26152,7 +26174,7 @@
     },
     "packages/sui-i18n": {
       "name": "@s-ui/i18n",
-      "version": "1.34.0",
+      "version": "1.35.0",
       "license": "MIT",
       "dependencies": {
         "@s-ui/js": "2"
@@ -26293,7 +26315,7 @@
     },
     "packages/sui-js": {
       "name": "@s-ui/js",
-      "version": "2.32.0",
+      "version": "2.34.0",
       "license": "MIT",
       "dependencies": {
         "bowser": "2.11.0",
@@ -26967,10 +26989,10 @@
     },
     "packages/sui-react-web-vitals": {
       "name": "@s-ui/react-web-vitals",
-      "version": "2.6.0",
+      "version": "2.6.0-beta.0",
       "license": "MIT",
       "dependencies": {
-        "@s-ui/react-hooks": "1",
+        "@s-ui/react-hooks": "beta",
         "web-vitals": "4.1.1"
       },
       "devDependencies": {
@@ -27159,7 +27181,7 @@
       "version": "3.24.0",
       "license": "MIT",
       "dependencies": {
-        "@s-ui/react-atom-icon": "1",
+        "@s-ui/react-atom-icon": "beta",
         "babel-preset-sui": "3",
         "commander": "8.3.0",
         "fast-glob": "3.2.11",
@@ -27333,7 +27355,7 @@
     },
     "packages/sui-theme": {
       "name": "@s-ui/theme",
-      "version": "8.127.0",
+      "version": "9.0.0-beta.0",
       "license": "MIT"
     },
     "packages/sui-widget-embedder": {
@@ -27344,7 +27366,7 @@
         "@s-ui/bundler": "9",
         "@s-ui/helpers": "1",
         "@s-ui/react-context": "1",
-        "@s-ui/react-hooks": "1",
+        "@s-ui/react-hooks": "1.38.0-beta.0",
         "commander": "8.3.0",
         "copy-paste": "1.3.0",
         "webpack-dev-middleware": "5.3.4"
diff --git a/packages/sui-component-dependencies/package.json b/packages/sui-component-dependencies/package.json
index 945380575..a70fc46cd 100644
--- a/packages/sui-component-dependencies/package.json
+++ b/packages/sui-component-dependencies/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/component-dependencies",
-  "version": "1.7.0",
+  "version": "1.7.0-beta.0",
   "description": "A set of dependencies of all SUI components.",
   "keywords": [
     "fatigue",
@@ -9,7 +9,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@s-ui/theme": "8",
+    "@s-ui/theme": "beta",
     "classnames": "2.2.5"
   },
   "repository": {
diff --git a/packages/sui-react-web-vitals/package.json b/packages/sui-react-web-vitals/package.json
index 1b238db50..76f13cb8e 100644
--- a/packages/sui-react-web-vitals/package.json
+++ b/packages/sui-react-web-vitals/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/react-web-vitals",
-  "version": "2.6.0",
+  "version": "2.6.0-beta.0",
   "description": "",
   "type": "module",
   "main": "lib/index.js",
@@ -18,7 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "web-vitals": "4.1.1",
-    "@s-ui/react-hooks": "1"
+    "@s-ui/react-hooks": "beta"
   },
   "peerDependencies": {
     "react": "16 || 17",
diff --git a/packages/sui-svg/package.json b/packages/sui-svg/package.json
index 14424365a..3526dc45d 100644
--- a/packages/sui-svg/package.json
+++ b/packages/sui-svg/package.json
@@ -11,7 +11,7 @@
     "sui-svg": "./bin/sui-svg.js"
   },
   "dependencies": {
-    "@s-ui/react-atom-icon": "1",
+    "@s-ui/react-atom-icon": "beta",
     "babel-preset-sui": "3",
     "commander": "8.3.0",
     "fast-glob": "3.2.11",
diff --git a/packages/sui-theme/README.md b/packages/sui-theme/README.md
index f1d935176..dd9d875ed 100644
--- a/packages/sui-theme/README.md
+++ b/packages/sui-theme/README.md
@@ -27,37 +27,11 @@ If you want to customize your components, create your own theme and add it to yo
 @import '~@s-ui/theme/lib/index';
 ```
 
-## Upgrade from theme-basic@7
+## Upgrade from theme-basic@8 to theme@9
 
-Compatibility variables are still available to import manually.
+rgba
 
-**Import only what you need, in inheritance order**
-
-For instance:
-
-```scss
-@import '../custom-settings';
-@import '~@s-ui/theme/lib/settings-compat-v7/color';
-@import '~@s-ui/theme/lib/settings-compat-v7/spacing';
-@import '~@s-ui/theme/lib/index';
-```
-
-Find below the compat varible groups available:
-
-- [settings-compat-v7/color](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_color.scss)
-- [settings-compat-v7/font](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_font.scss)
-- [settings-compat-v7/spacing](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_spacing.scss)
-- [settings-compat-v7/box-style](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_box-style.scss)
-- [settings-compat-v7/animation](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_animation.scss)
-- [settings-compat-v7/layout](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_layout.scss)
-- [settings-compat-v7/components](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_components.scss)
-
-**Also, if you need it all for older components, you can do**
-
-```scss
-@import '~@s-ui/theme/lib/settings-compat-v7/index';
-@import '~@s-ui/theme/lib/index';
-```
+Compatibility v7 variables are no longer available to import manually.
 
 ## Media queries and breakpoints
 
@@ -65,12 +39,14 @@ Find below the compat varible groups available:
 
 - Breakpoints must be exactly `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
 - For new implementations, the only allowed media query is `media-breakpoint-up`
-- `media-breakpoint-down`, `media-breakpoint-only` and `media-breakpoint-between` are deprecated and only kept for legacy reasons.
+- `media-breakpoint-down`, `media-breakpoint-only` and `media-breakpoint-between` are removed.
 
 ### Reason
 
 - We want to create all our components `mobile first`
 
+> Read more at [settings-compat-v7.md](src/settings-compat-v7.md)
+
 ### Legacy components
 
 - Keep in mind that refactoring legacy components in order to make it rules compliant would suppose a breaking change, so a new major must be released.
diff --git a/packages/sui-theme/package.json b/packages/sui-theme/package.json
index b6c1df90f..735377b53 100644
--- a/packages/sui-theme/package.json
+++ b/packages/sui-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@s-ui/theme",
-  "version": "8.127.0",
+  "version": "9.0.0-beta.4",
   "description": "Generic theme to add styles to all SUI components",
   "main": "lib/index.scss",
   "scripts": {
diff --git a/packages/sui-theme/src/_default.scss b/packages/sui-theme/src/_default.scss
index f4aa979b0..ebe3315bc 100644
--- a/packages/sui-theme/src/_default.scss
+++ b/packages/sui-theme/src/_default.scss
@@ -1,3 +1,3 @@
 @mixin p {
-  margin: 0 0 $m-v;
+  margin: 0 0 $m-m;
 }
diff --git a/packages/sui-theme/src/_typography.scss b/packages/sui-theme/src/_typography.scss
index 367638f72..41b53ab17 100644
--- a/packages/sui-theme/src/_typography.scss
+++ b/packages/sui-theme/src/_typography.scss
@@ -6,8 +6,13 @@ $c-link-negative-hover: $c-white !default;
 
 $ff-link: $ff-sans-serif !default;
 $fw-link: normal !default;
+$fz-text-link: $fz-base !default;
+
 $lh-link: $lh-l !default;
 
+$td-text-link: underline !default;
+$td-hover-text-link: none !default;
+
 @mixin link($negative: false) {
   color: if($negative, $c-link-negative, $c-link);
   font-family: $ff-link;
@@ -28,31 +33,31 @@ $lh-link: $lh-l !default;
 @mixin h1 {
   font-size: $fz-h1;
   font-weight: $fw-bold;
-  margin: 0 0 $m-v;
+  margin: 0 0 $m-m;
 }
 
 @mixin h2 {
   font-size: $fz-h2;
   font-weight: $fw-bold;
-  margin: 0 0 $m-v;
+  margin: 0 0 $m-m;
 }
 
 @mixin h3 {
   font-size: $fz-h3;
   font-weight: $fw-bold;
-  margin: 0 0 $m-v-small;
+  margin: 0 0 $m-s;
 }
 
 @mixin h4 {
   font-size: $fz-h4;
   font-weight: $fw-bold;
-  margin: 0 0 $m-v-small;
+  margin: 0 0 $m-s;
 }
 
 @mixin h5 {
   font-size: $fz-h5;
   font-weight: $fw-bold;
-  margin: 0 0 $m-v-small;
+  margin: 0 0 $m-s;
 }
 
 @mixin text-link {
@@ -66,7 +71,7 @@ $lh-link: $lh-l !default;
 }
 
 @mixin text-highlighted {
-  background-color: $c-highlighted;
+  background-color: $c-highlight;
 }
 
 @mixin font-rendering {
diff --git a/packages/sui-theme/src/components/_badge.scss b/packages/sui-theme/src/components/_badge.scss
deleted file mode 100644
index c5a82f9e9..000000000
--- a/packages/sui-theme/src/components/_badge.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// sass-lint:disable no-important
-
-// --- SUI Badge Notification --- //
-// @include sui-badge-notification();
-// @include sui-badge-notification($pseudo:true);
-// Markup ---> data-notification-counter={5}
-
-@mixin sui-badge-notification-element {
-  background-color: $c-badge-notification;
-  border: $bd-badge-notification;
-  border-radius: $bdrs-rounded;
-  color: $c-white;
-  display: inline-block;
-  font-size: $fz-xs;
-  line-height: $size-badge-notification;
-  margin: $m-badge-notification;
-  min-height: $size-badge-notification;
-  min-width: $size-badge-notification;
-  padding: $p-badge-notification;
-  text-align: center;
-  text-shadow: $bxsh-base;
-}
-
-@mixin sui-badge-notification($pseudo: false, $top: 0, $right: 0) {
-  @if $pseudo {
-    position: relative;
-
-    &::before {
-      @include sui-badge-notification-element;
-      content: attr(data-notification-counter);
-      position: absolute;
-      right: $right;
-      top: $top;
-    }
-  } @else {
-    @include sui-badge-notification-element;
-    border: 0;
-  }
-}
diff --git a/packages/sui-theme/src/components/_button.scss b/packages/sui-theme/src/components/_button.scss
deleted file mode 100644
index 3e1fb1cb5..000000000
--- a/packages/sui-theme/src/components/_button.scss
+++ /dev/null
@@ -1,225 +0,0 @@
-// sass-lint:disable no-important
-// --- SUI Button --- //
-// @include sui-button();
-// @include sui-button('secondary', 'small');
-// @include sui-button('ghost', 'large', 'full');
-
-@mixin sui-button(
-  $type: 'primary',
-  $size: 'medium',
-  $layout: null,
-  $background-color: $c-gray-dark,
-  $color: $c-white,
-  $icon-fill: transparent,
-  $icon-stroke: $c-white
-) {
-  align-items: center;
-  border: 0;
-  border-radius: $bdrs-button;
-  cursor: pointer;
-  display: flex;
-  font-family: inherit;
-  line-height: $lh-button;
-  outline: none;
-  padding: $p-v $p-h;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: $o-button-disabled;
-  }
-
-  @if $type == 'primary' {
-    @include sui-button--primary;
-  }
-  @if $type == 'secondary' {
-    @include sui-button--secondary;
-  }
-  @if $type == 'ghost' {
-    @include sui-button--ghost;
-  }
-  @if $type == 'accent' {
-    @include sui-button--accent;
-  }
-  @if $type == 'flat' {
-    @include sui-button--flat;
-  }
-  @if $type == 'custom' {
-    @include sui-button--custom($background-color, $color, $icon-fill, $icon-stroke);
-  }
-
-  @if $size == 'small' {
-    @include sui-button--small;
-  }
-  @if $size == 'medium' {
-    @include sui-button--medium;
-  }
-  @if $size == 'large' {
-    @include sui-button--large;
-  }
-
-  @if $layout == 'full' {
-    @include sui-button--full;
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    @if $size == 'small' {
-      @include sui-icon--small;
-    }
-    @if $size == 'medium' {
-      @include sui-icon--small;
-    }
-    @if $size == 'large' {
-      @include sui-icon--large;
-    }
-
-    &:first-child {
-      margin-right: $m-h-small;
-    }
-
-    &:last-child {
-      margin-left: $m-h-small;
-    }
-  }
-}
-
-// Button types
-
-@mixin sui-button--primary {
-  background-color: $bgc-button-primary;
-  color: $c-button-primary;
-
-  &:hover {
-    background-color: $bgc-button-primary-hover;
-  }
-
-  &:active {
-    background-color: $bgc-button-primary-active;
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    fill: $c-button-primary-icon-fill !important;
-    stroke: $c-button-primary-icon-stroke !important;
-  }
-}
-
-@mixin sui-button--secondary {
-  background-color: $bgc-button-secondary;
-  box-shadow: 0 0 0 1px $bdc-button-secondary inset;
-  color: $c-button-secondary;
-
-  &:hover {
-    background-color: $bgc-button-secondary-hover;
-    color: $c-button-secondary-hover;
-  }
-
-  &:active {
-    background-color: $bgc-button-secondary-active;
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    fill: $c-button-secondary-icon-fill !important;
-    stroke: $c-button-secondary-icon-stroke !important;
-  }
-}
-
-@mixin sui-button--accent {
-  background-color: $bgc-button-accent;
-  color: $c-button-accent;
-
-  &:hover {
-    background-color: $bgc-button-accent-hover;
-  }
-
-  &:active {
-    background-color: $bgc-button-accent-active;
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    fill: $c-button-accent-icon-fill !important;
-    stroke: $c-button-accent-icon-stroke !important;
-  }
-}
-
-@mixin sui-button--ghost {
-  background-color: transparent;
-  box-shadow: 0 0 0 1px $bdc-button-ghost inset;
-  color: $c-button-ghost;
-
-  &:hover {
-    box-shadow: 0 0 0 1px $bdc-button-ghost-hover inset;
-    color: $c-button-ghost-hover;
-  }
-
-  &:active {
-    background-color: $bgc-button-ghost-active;
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    fill: $c-button-ghost-icon-fill !important;
-    stroke: $c-button-ghost-icon-stroke !important;
-  }
-}
-
-@mixin sui-button--flat {
-  background-color: transparent;
-  color: $c-button-flat;
-
-  &:hover {
-    color: $c-button-flat-hover;
-  }
-
-  &:active {
-    background-color: $bgc-button-flat-active;
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    fill: $c-button-flat-icon-fill !important;
-    stroke: $c-button-flat-icon-stroke !important;
-  }
-}
-
-@mixin sui-button--custom($background-color, $color, $icon-fill, $icon-stroke) {
-  background-color: $background-color;
-  color: $color;
-
-  &:hover {
-    background-color: lighten($background-color, 15%);
-  }
-
-  &:active {
-    background-color: darken($background-color, 10%);
-  }
-
-  & > [class$='icon'],
-  & > [class$='Icon'] {
-    fill: $icon-fill !important;
-    stroke: $icon-stroke !important;
-  }
-}
-
-// Button sizes
-
-@mixin sui-button--small {
-  font-size: $fz-s;
-}
-
-@mixin sui-button--medium {
-  font-size: $fz-m;
-}
-
-@mixin sui-button--large {
-  font-size: $fz-l;
-}
-
-// Button layouts
-
-@mixin sui-button--full {
-  justify-content: center;
-  width: 100%;
-}
diff --git a/packages/sui-theme/src/components/_card.scss b/packages/sui-theme/src/components/_card.scss
deleted file mode 100644
index 640d0aee1..000000000
--- a/packages/sui-theme/src/components/_card.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-// sass-lint:disable class-name-format, no-important, no-warn
-
-// --- SUI Card --- //
-// @include sui-card;
-
-@mixin sui-card {
-  background-color: $c-white;
-  border: 0;
-  border-radius: $bdrs-card;
-  box-shadow: $bxsh-card;
-  transition: box-shadow $trs-base;
-
-  &:hover {
-    box-shadow: $bxsh-card-hover;
-  }
-
-  &:hover &-title {
-    color: $c-card-title-hover;
-  }
-
-  &.is-disabled {
-    opacity: 0.3;
-  }
-
-  &-media {
-    position: relative;
-
-    img {
-      height: auto;
-      vertical-align: bottom;
-      width: 100%;
-    }
-
-    &Icon {
-      @include sui-icon--xlarge;
-
-      fill: $c-card-article-icon-fill !important;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      z-index: $z-card-article-icon;
-    }
-  }
-
-  &-content {
-    padding: $p-v $p-h $p-v-large;
-  }
-
-  &-title {
-    @include h3;
-
-    &--primary {
-      color: $c-primary;
-    }
-  }
-
-  &-description {
-    color: $c-card-article-description;
-    font-size: $fz-m;
-  }
-
-  &-action {
-    margin-top: $m-m;
-  }
-}
-
-// Card sizes (modifiers)
-
-@mixin sui-card--small {
-  @warn 'Modifier deprecated. You should use `sui-card` mixin instead.';
-}
diff --git a/packages/sui-theme/src/components/_icon.scss b/packages/sui-theme/src/components/_icon.scss
deleted file mode 100644
index 2181926fb..000000000
--- a/packages/sui-theme/src/components/_icon.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Icon sizes
-
-@mixin sui-icon--small {
-  height: 16px;
-  width: 16px;
-}
-
-@mixin sui-icon--medium {
-  height: 20px;
-  width: 20px;
-}
-
-@mixin sui-icon--large {
-  height: 24px;
-  width: 24px;
-}
-
-@mixin sui-icon--xlarge {
-  height: 48px;
-  width: 48px;
-}
diff --git a/packages/sui-theme/src/components/_input.scss b/packages/sui-theme/src/components/_input.scss
deleted file mode 100644
index ccd031b34..000000000
--- a/packages/sui-theme/src/components/_input.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-// sass-lint:disable class-name-format
-
-// --- SUI Input --- //
-// @include sui-input;
-// @include sui-input('large');
-
-@mixin sui-input($size: 'medium') {
-  @include input-placeholder {
-    color: $c-input-placeholder;
-    font-style: $fs-input-placeholder;
-  }
-
-  background-color: $bgc-input;
-  border: 0;
-  border-radius: $bdrs-input;
-  box-shadow: $bd-input;
-  color: $c-input;
-  font-family: inherit;
-  font-weight: $fw-light;
-  line-height: $lh-input;
-  outline: none;
-  padding: $p-v $p-h;
-  width: 100%;
-
-  @if $size == 'medium' {
-    font-size: $fz-base;
-  }
-  @if $size == 'large' {
-    font-size: $fz-l;
-  }
-
-  &:hover {
-    background-color: $bgc-input-hover;
-    box-shadow: $bd-input-hover;
-    color: $c-input-hover;
-  }
-
-  &:focus {
-    background-color: $bgc-input-focus;
-    box-shadow: $bd-input-focus;
-    color: $c-input-focus;
-  }
-
-  &.has-error {
-    box-shadow: 1px solid $c-error;
-  }
-}
diff --git a/packages/sui-theme/src/components/_select.scss b/packages/sui-theme/src/components/_select.scss
deleted file mode 100644
index 03e5733e3..000000000
--- a/packages/sui-theme/src/components/_select.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-// --- SUI Select --- //
-// Markup:
-// <div class="sui-selectWrap">
-//   <select class="sui-select">
-//     [...]
-//   </select>
-//   <div class="sui-selectIcon">
-//   </div>
-// </div>
-//
-// @include sui-select;
-// @include sui-select('large');
-
-@mixin sui-select($size: 'medium') {
-  @include appearance(none);
-  background-color: $bgc-select;
-  border: 0;
-  border-radius: $bdrs-base;
-  box-shadow: $bxsh-select;
-  display: inline-block;
-  font-family: inherit;
-  line-height: $lh-select;
-  outline: none;
-  padding: $p-v $p-h;
-  width: 100%;
-
-  @if $size == 'medium' {
-    font-size: $fz-base;
-  }
-  @if $size == 'large' {
-    font-size: $fz-l;
-  }
-
-  &-wrap {
-    position: relative;
-  }
-
-  &-icon-wrap {
-    background-color: $bgc-select-icon-wrap;
-    border-bottom-right-radius: $bdrs-base;
-    border-top-right-radius: $bdrs-base;
-    bottom: 1px;
-    padding: $p-select-icon-wrap;
-    pointer-events: none;
-    position: absolute;
-    right: 1px;
-    top: 1px;
-    width: $w-select-icon-wrap;
-  }
-
-  &:hover {
-    background-color: $bgc-select-hover;
-    box-shadow: $bxsh-select-hover;
-  }
-
-  &:focus {
-    background-color: $bgc-select-focus;
-    box-shadow: $bxsh-select-focus;
-  }
-}
diff --git a/packages/sui-theme/src/components/_tabs.scss b/packages/sui-theme/src/components/_tabs.scss
deleted file mode 100644
index 63fdea590..000000000
--- a/packages/sui-theme/src/components/_tabs.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// sass-lint:disable class-name-format
-
-// --- SUI Tab --- //
-// @include sui-tab;
-
-@mixin sui-tab {
-  background-color: $bgc-tab;
-  border: $bd-tab;
-  color: $c-tab;
-  cursor: pointer;
-  display: inline-block;
-  font-size: $fz-m;
-  font-weight: $fw-tab;
-  margin-right: $mr-tab;
-  padding: $p-tab;
-  text-transform: $tt-tab;
-
-  &-wrap {
-    border-bottom: $bd-tab-wrap;
-  }
-
-  &:hover {
-    background-color: $bgc-tab-hover;
-  }
-
-  &.is-active {
-    background-color: $bgc-tab-active;
-    box-shadow: $bxsh-tab-active;
-    color: $c-tab-active;
-  }
-}
diff --git a/packages/sui-theme/src/components/_tag.scss b/packages/sui-theme/src/components/_tag.scss
deleted file mode 100644
index 702bd415e..000000000
--- a/packages/sui-theme/src/components/_tag.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-// sass-lint:disable class-name-format
-
-// --- SUI Tag --- //
-// @include sui-tag;
-
-@mixin sui-tag {
-  align-items: center;
-  background-color: $bgc-tag;
-  border: $bd-tag;
-  border-radius: $bdrs-tag;
-  color: $c-tag;
-  display: inline-flex;
-  font-size: $fz-tag;
-  line-height: $lh-tag;
-  margin-bottom: $m-h-xsmall;
-  margin-right: $m-h-small;
-  padding: $p-h-xsmall $p-h-small;
-}
-
-@mixin sui-tag-link {
-  @include reset-link;
-  cursor: pointer;
-  font-weight: $fw-tag-link;
-
-  &:hover {
-    background-color: $bgc-tag-hover;
-    border-color: $c-gray-dark;
-  }
-}
-
-@mixin sui-tag-icon {
-  @include reset-button;
-  fill: $c-gray-light !important;
-  height: $lh-tag;
-  margin-left: $m-h-xsmall;
-  width: $lh-tag;
-
-  &:hover {
-    fill: $c-accent !important;
-  }
-}
diff --git a/packages/sui-theme/src/components/atom/input/_placeholders.scss b/packages/sui-theme/src/components/atom/input/_placeholders.scss
deleted file mode 100644
index 9bb1ba816..000000000
--- a/packages/sui-theme/src/components/atom/input/_placeholders.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@mixin sui-atom-input-input() {
-  background: $bgc-atom-input;
-  border: $bd-atom-input-base;
-  box-sizing: border-box;
-  color: $c-atom-input;
-  font-family: inherit;
-  font-size: $fz-atom-input;
-  padding-left: $pl-atom-input;
-  padding-right: $pr-atom-input;
-  width: 100%;
-}
-
-@mixin sui-atom-input-input-focus() {
-  border: $bd-atom-input-focus;
-  box-shadow: $bxsh-atom-input;
-  outline: 0 none;
-}
-
-@mixin sui-atom-input-select-focus() {
-  border: $bd-atom-select-focus;
-  box-shadow: $bxsh-atom-select-focus;
-  outline: $ol-atom-select-focus;
-  outline-offset: $olo-atom-select-focus;
-}
-
-@mixin sui-molecule-autosuggest-focus() {
-  border: $bd-molecule-autosuggest-focus;
-  box-shadow: $bxsh-molecule-autosuggest-focus;
-  outline: $ol-molecule-autosuggest-focus;
-  outline-offset: $olo-molecule-autosuggest-focus;
-}
-
-%sui-atom-input-input {
-  @include sui-atom-input-input;
-}
-
-%sui-atom-input-input-focus {
-  @include sui-atom-input-input-focus;
-}
-
-%sui-atom-input-select-focus {
-  @include sui-atom-input-select-focus;
-}
-
-%sui-molecule-autosuggest-focus {
-  @include sui-molecule-autosuggest-focus;
-}
diff --git a/packages/sui-theme/src/components/atom/input/_settings.scss b/packages/sui-theme/src/components/atom/input/_settings.scss
deleted file mode 100644
index 58c472490..000000000
--- a/packages/sui-theme/src/components/atom/input/_settings.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$pl-atom-input: $p-l !default;
-$pr-atom-input: $p-l !default;
-
-$bxsh-atom-input-size: $bxsh-focus-size !default;
-$bxsh-atom-input: $bxsh-focus !default;
-$bd-atom-input: $bdw-s solid $c-primary !default;
-$bd-atom-input-focus: $bd-atom-input !default;
-$fz-atom-input: $fz-base !default;
-$bgc-atom-input: $c-white !default;
-$c-atom-input: initial !default;
-$bd-atom-input-base: $bdw-s solid $c-gray-light !default;
-
-$bd-molecule-autosuggest-focus: $bd-atom-input !default;
-$bxsh-molecule-autosuggest-focus: $bxsh-atom-input !default;
-$ol-molecule-autosuggest-focus: 0 none !default;
-$olo-molecule-autosuggest-focus: 0 !default;
-
-$bd-atom-select-focus: $bd-atom-input !default;
-$bxsh-atom-select-focus: $bxsh-atom-input !default;
-$ol-atom-select-focus: 0 none !default;
-$olo-atom-select-focus: 0 !default;
-
-$h-atom-input--xl: 7 * $sz-base !default; // 56px
-$h-atom-input--l: 6 * $sz-base !default; // 48px
-$h-atom-input--m: 5 * $sz-base !default; // 40px
-$h-atom-input--s: 4 * $sz-base !default; // 32px
-$h-atom-input--xs: 3 * $sz-base !default; // 24px
-
-$c-atom-input--success: $c-success !default;
-$c-atom-input--error: $c-error !default;
-$c-atom-input--alert: $c-alert !default;
-
-$sizes-atom-input: xl $h-atom-input--xl, l $h-atom-input--l, m $h-atom-input--m, xs $h-atom-input--xs,
-  s $h-atom-input--s !default;
-$states-atom-input: success $c-atom-input--success, error $c-atom-input--error, alert $c-atom-input--alert !default;
diff --git a/packages/sui-theme/src/components/atom/input/index.scss b/packages/sui-theme/src/components/atom/input/index.scss
deleted file mode 100644
index f42b40d8b..000000000
--- a/packages/sui-theme/src/components/atom/input/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './settings';
-@import './placeholders';
diff --git a/packages/sui-theme/src/components/thumbnail/_basic.scss b/packages/sui-theme/src/components/thumbnail/_basic.scss
deleted file mode 100644
index ff5ed8718..000000000
--- a/packages/sui-theme/src/components/thumbnail/_basic.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$jc-thumbnail-basic-image: flex-start !default;
-$ar-thumbnail-basic-image: auto !default;
diff --git a/packages/sui-theme/src/icons/_arrow.scss b/packages/sui-theme/src/icons/_arrow.scss
deleted file mode 100644
index a8b18ad3d..000000000
--- a/packages/sui-theme/src/icons/_arrow.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@mixin arrow-up($size: 12px, $color: $c-gray) {
-  border-bottom: $size solid $color;
-  border-left: $size solid transparent;
-  border-right: $size solid transparent;
-  height: 0;
-  width: 0;
-}
-
-@mixin arrow-down($size: 12px, $color: $c-gray) {
-  border-left: $size solid transparent;
-  border-right: $size solid transparent;
-  border-top: $size solid $color;
-  height: 0;
-  width: 0;
-}
-
-@mixin arrow-right($size: 12px, $color: $c-gray) {
-  border-bottom: $size solid transparent;
-  border-left: $size solid $color;
-  border-top: $size solid transparent;
-  height: 0;
-  width: 0;
-}
-
-@mixin arrow-left($size: 12px, $color: $c-gray) {
-  border-bottom: $size solid transparent;
-  border-right: $size solid $color;
-  border-top: $size solid transparent;
-  height: 0;
-  width: 0;
-}
diff --git a/packages/sui-theme/src/index.scss b/packages/sui-theme/src/index.scss
index abb5aa42a..46f9f1634 100644
--- a/packages/sui-theme/src/index.scss
+++ b/packages/sui-theme/src/index.scss
@@ -9,23 +9,6 @@
 // Reset
 @import './reset';
 
-// Components
-@import './components/icon';
-@import './components/button';
-@import './components/input';
-@import './components/select';
-@import './components/tabs';
-@import './components/tag';
-@import './components/card';
-@import './components/badge';
-
-@import './components/thumbnail/basic';
-
-// SUI-Components
-@import './components/atom/input/index';
-
-// Icons
-@import './icons/arrow';
 // Layout
 @import './layout/grid';
 @import './layout/breakpoints';
diff --git a/packages/sui-theme/src/settings-compat-v7.md b/packages/sui-theme/src/settings-compat-v7.md
new file mode 100644
index 000000000..af3bc603a
--- /dev/null
+++ b/packages/sui-theme/src/settings-compat-v7.md
@@ -0,0 +1,964 @@
+# TOKENS
+
+## _animation.scss
+
+### Transitions
+
+> `$trsdu-base`: removed
+> 
+> `$trsdu-slow`: removed
+> 
+> `$trsdu-fast`: removed
+> 
+> `$trs-base`: removed
+
+## _box-style.scss
+
+### Border radius
+
+> `$bdrs-none`: included
+> 
+> `$bdrs-small`: removed
+
+### Box shadows
+
+> `$bxsh-spread`: removed
+>
+> `$bxsh-base`: removed
+
+## _color.scss
+
+### Colors
+
+#### Colors non-existing in the new color palette
+
+> `$c-highlighted`: replaced by `$c-highlight`
+> 
+> `$c-featured`: removed
+> 
+> `$c-white`: included
+> 
+> `$c-black`: included
+
+#### Colors renamed in the new color palette
+
+> `$c-warning`: replaced by $c-alert
+
+## _components.scss
+
+### Forms
+
+#### Inputs
+
+> `$bgc-input`: replaced by `$bgc-atom-input`
+> 
+> `$bgc-input-hover`: removed
+> 
+> `$bgc-input-focus`: removed
+> 
+> `$bdrs-input`: renamed to `$bdrs-atom-input`
+> 
+> `$c-input`: replaced by `$c-atom-input`
+> 
+> `$c-input-focus`: removed
+> 
+> `$c-input-hover`: removed
+> 
+> `$c-input-placeholder`: removed
+> 
+> `$ff-input-placeholder`: removed
+> 
+> `$fs-input-placeholder`: removed
+> 
+> `$lh-input`: removed, by default it was `$lh-xxl`
+
+> `$bd-input`: replaced by `$bd-atom-input-base`
+> 
+> `$bd-input-hover`: removed
+> 
+> `$bd-input-focus`: removed
+
+#### Radio List
+
+> `$bd-radio-list`: removed
+> 
+> `$bdrs-radio-list`: removed
+
+> `$bgc-radio-list-checked`: removed
+> 
+> `$bgc-radio-list`: removed
+
+> `$c-radio-list-checked`: removed
+> 
+> `$p-radio-list`: removed
+
+#### Selects
+
+> `$bgc-select`: replaced by `$bgc-atom-input`
+> 
+> `$bgc-select-hover`: removed
+> 
+> `$bgc-select-focus`: removed
+> 
+> `$lh-select`: removed. Set `$lh-xxl`;
+
+> `$bgc-select-icon-wrap`: removed. Set `$c-gray-lightest;
+> 
+> `$p-select-icon-wrap`: removed
+> 
+> `$w-select-icon-wrap`: removed. Set `$sz-icon-l`
+
+> `$bxsh-select`: removed
+> 
+> `$bxsh-select-hover`: removed
+> 
+> `$bxsh-select-focus`: removed
+
+### Components
+
+#### Ads
+
+> `$h-ad-l-top`: removed
+> `$w-ad-l-top`: removed
+> `$h-ad-l-right`: removed
+> `$w-ad-l-right`: removed
+> `$mih-ad-l-top`: removed
+
+#### Alert Basic
+
+> `$bdrs-alert-basic`
+> 
+> `$bxsh-alert-basic`: removed
+> 
+> `$c-alert-basic-link`: removed
+
+> `$c-alert-basic-info`: removed
+> 
+> `$bd-alert-basic-info`: removed
+> 
+> `$bdl-alert-basic-info`: removed
+> 
+> `$bgc-alert-basic-info`: removed
+
+> `$c-alert-basic-error`: removed
+> 
+> `$bd-alert-basic-error`: removed
+> 
+> `$bdl-alert-basic-error`: removed
+> 
+> `$bgc-alert-basic-error`: removed
+
+> `$c-alert-basic-success`: removed
+> 
+> `$bd-alert-basic-success`: removed
+> 
+> `$bdl-alert-basic-success`: removed
+> 
+> `$bgc-alert-basic-success`: removed
+
+#### Badge
+
+> `$c-badge-notification`: removed. $c-primary
+> 
+> `$size-badge-notification`: removed. Set `math.div(2, 3) * $sz-base`
+> 
+> `$p-badge-notification`: removed. Set `0 math.div(1, 3) * $sz-base`
+> 
+> `$m-badge-notification`: removed
+> 
+> `$bd-badge-notification`: removed
+
+#### Button
+
+> `$bdrs-button`: removed
+> 
+> `$lh-button`: removed
+> 
+> `$o-button-disabled`: removed
+
+> `$c-button-primary`: removed
+> 
+> `$c-button-primary-icon-fill`: removed
+> 
+> `$c-button-primary-icon-stroke`: removed
+> 
+> `$bgc-button-primary`: removed
+> 
+> `$bgc-button-primary-hover`: removed
+> 
+> `$bgc-button-primary-active`: removed
+
+> `$c-button-secondary`: removed
+> 
+> `$c-button-secondary-hover`: removed
+> 
+> `$c-button-secondary-icon-fill`: removed
+> 
+> `$c-button-secondary-icon-stroke`: removed
+> 
+> `$bdc-button-secondary`: removed
+> 
+> `$bgc-button-secondary`: removed
+> 
+> `$bgc-button-secondary-hover`: removed
+> 
+> `$bgc-button-secondary-active`: removed
+
+> `$c-button-accent`: removed
+> 
+> `$c-button-accent-icon-fill`: removed
+> 
+> `$c-button-accent-icon-stroke`: removed
+> 
+> `$bgc-button-accent`: removed
+> 
+> `$bgc-button-accent-hover`: removed
+> 
+> `$bgc-button-accent-active`: removed
+
+> `$c-button-ghost`: removed
+> 
+> `$c-button-ghost-hover`: removed
+> 
+> `$c-button-ghost-icon-fill`: removed
+> 
+> `$c-button-ghost-icon-stroke`: removed
+> 
+> `$bdc-button-ghost`: removed
+> 
+> `$bdc-button-ghost-hover`: removed
+> 
+> `$bgc-button-ghost-active`: removed
+
+> `$c-button-flat`: removed
+> 
+> `$c-button-flat-hover`: removed
+> 
+> `$c-button-flat-icon-fill`: removed
+> 
+> `$c-button-flat-icon-stroke`: removed
+> 
+> `$bgc-button-flat-active`: removed
+
+#### Card
+
+> `$bdc-article-featured`: removed
+> 
+> `$bd-article-featured`: removed
+> 
+> `$bdrs-card`: removed
+> 
+> `$bxsh-card`: removed
+> 
+> `$bxsh-card-hover`: removed
+> 
+> `$c-card-article-description`: removed
+> 
+> `$c-card-article-icon-fill`: removed
+> 
+> `$c-card-title-hover`: removed
+> 
+> `$z-card-article-icon`: removed
+
+#### Card composable
+
+> `$bgc-card-composable`: removed
+> 
+> `$p-card-composable-primary`: removed
+> 
+> `$p-card-composable-secondary`: removed
+
+#### Card product
+
+> `$c-card-product-title`: removed
+> 
+> `$c-card-product-favorited`: removed
+> 
+> `$c-card-product-slider-nav-icon`: removed
+> 
+> `$size-card-product-slider-nav-icon`: removed
+
+
+#### Card subscription
+
+> `$bg-card-subscription-image`: removed
+> 
+> `$bgc-card-subscription-content`: removed
+> 
+> `$c-card-subscription-icon`: removed
+> 
+> `$c-card-subscription-title`: removed
+> 
+> `$fz-card-subscription-input`: removed
+> 
+> `$h-card-subscription-image`: removed
+> 
+> `$pt-card-subscription`: removed
+> 
+> `$t-card-subscription-image`: removed
+> 
+> `$type-card-subscription-button`: removed
+
+#### Cookie banner
+
+> `$bgc-cookie-banner`: removed
+> 
+> `$c-cookie-banner`: removed
+> 
+> `$fz-cookie-banner`: removed
+> 
+> `$z-cookie-banner`: removed
+
+> `$maw-cookie-banner-content`: removed
+> 
+> `$p-cookie-banner-content`: removed
+> 
+> `$ta-cookie-banner-context`: removed
+
+> `$c-cookie-banner-link`: removed
+
+> `$c-cookie-banner-close-icon`: removed
+> 
+> `$c-cookie-banner-close-icon-hover`: removed
+
+#### Dropdown
+
+> `$c-dropdown-button-large`: removed
+> 
+> `$bdt-dropdown-menu`: removed
+> 
+> `$bgc-dropdown-button-hover`: removed
+> 
+> `$bgc-dropdown-menu-hover`: removed
+> 
+> `$bgc-dropdown-menu`: removed
+> 
+> `$bxsh-dropdown-menu`: removed
+> 
+> `$c-dropdown-arrow`: removed
+> 
+> `$size-dropdown-arrow-up`: removed
+> 
+> `$size-dropdown-icon`: removed
+> 
+> `$z-dropdown-menu`: kept under layers.scss
+
+#### Dropdown basic
+
+> `$bdrs-dropdown-basic-menu`: removed
+> 
+> `$c-dropdown-basic-button-hover`: removed
+> 
+> `$c-dropdown-basic-button-icon`: removed
+> 
+> `$c-dropdown-basic-list-link`: removed
+> 
+> `$fw-dropdown-basic-button`: removed
+
+#### Dropdown user
+
+> `$bd-dropdown-user-last-item`: removed
+> 
+> `$bdrs-dropdown-user-menu`: removed
+> 
+> `$bg-dropdown-user-button`: removed
+> 
+> `$bgc-dropdown-user`: removed
+> 
+> `$c-dropdown-user-icon-highlight`: removed
+> 
+> `$c-dropdown-user-icon-hover`: removed
+> 
+> `$c-dropdown-user-link-highlight`: removed
+> 
+> `$c-dropdown-user-text-large`: removed
+> 
+> `$w-dropdown-user-avatar`: removed
+> 
+> `$w-dropdown-user-text`: removed
+
+#### Form Autocompleted
+
+> `$bd-form-autocompleted`: removed
+> 
+> `$bdr-form-autocompleted`: removed
+> 
+> `$bgc-form-autocompleted-item-active`: removed
+> 
+> `$bgc-form-autocompleted-item-hover`: removed
+> 
+> `$bgc-form-autocompleted`: removed
+> 
+> `$c-form-autocompleted-submit-icon`: removed
+> 
+> `$ml-form-autocompleted-submit`: removed
+> 
+> `$mt-form-autocompleted`: removed
+> 
+> `$p-form-autocompleted-item`: removed
+> 
+> `$r-form-autocompleted-clear`: removed
+> 
+> `$t-form-autocompleted-clear`: removed
+> 
+> `$trf-form-autocompleted-clear`: removed
+> 
+> `$z-form-autocompleted-suggests`: removed
+> 
+> `$type-form-autocompleted-submit`: removed
+
+#### Modal
+
+> `$bg-modal`: removed
+
+#### Modal Basic
+
+> `$bd-modal-basic`: removed
+> 
+> `$bg-modal-basic`: removed
+> 
+> `$bxsh-modal-basic`: removed
+> 
+> `$m-modal-basic`: removed
+> 
+> `$maw-modal-basic`: removed
+> 
+> `$p-modal-basic`: removed
+> 
+> `$w-modal-basic`: removed
+> 
+> `$z-modal-basic`: removed
+> 
+> `$c-modal-basic-icon`: removed
+> 
+> `$h-modal-basic-icon`: removed
+> 
+> `$w-modal-basic-icon`: removed
+> 
+> `$bg-modal-basic-dialog`: removed
+> 
+> `$bg-modal-basic-header`: removed
+> 
+> `$c-modal-basic-header`: removed
+> 
+> `$p-modal-basic-header`: removed
+> 
+> `$m-modal-basic-header`: removed
+> 
+> `$bd-modal-basic-content`: removed
+> 
+> `$p-modal-basic-content`: removed
+> 
+> `$p-modal-basic-footer`: removed
+
+#### Search box
+
+> `$bg-search-box`: removed
+
+#### Section
+
+> `$c-section-basic-main-title`: removed
+> 
+> `$c-section-basic-subtitle`: removed
+> 
+> `$c-section-basic-content-text-paragraph`: removed
+> 
+> `$fz-section-basic-title`: removed
+> 
+> `$fz-section-basic-subtitle`: removed
+> 
+> `$fz-section-basic-content-text-paragraph`: removed
+> 
+> `$lh-section-basic-paragraph`: removed
+> 
+> `$mb-section-basic`: removed
+> 
+> `$mb-section-basic-header`: removed
+> 
+> `$m-v-section-basic-content-text-paragraph`: removed
+> 
+> `$bd-section-basic-line-separator`: removed
+
+#### Smartbanner
+
+> $bgc-ad-smartbanner
+> 
+> `$bb-ad-smartbanner`: removed
+> 
+> `$h-ad-smartbanner`: removed
+> 
+> `$t-ad-smartbanner`: removed
+> 
+> `$b-ad-smartbanner`: removed
+> 
+> `$l-ad-smartbanner`: removed
+> 
+> `$z-ad-smartbanner`: removed
+> 
+> `$m-ad-smartbanner-logo`: removed
+> 
+> `$w-ad-smartbanner-logo`: removed
+> 
+> `$h-ad-smartbanner-logo`: removed
+> 
+> `$bdrs-ad-smartbanner-logo`: removed
+> 
+> `$bgc-ad-smartbanner-button-install`: removed
+> 
+> `$c-ad-smartbanner-button-color`: removed
+> 
+> `$w-ad-smartbanner-button-close-icon`: removed
+> 
+> `$h-ad-smartbanner-button-close-icon`: removed
+> 
+> `$c-ad-smartbanner-button-close-icon`: removed
+> 
+> `$m-ad-smartbanner-button-close-container`: removed
+> 
+> `$fz-ad-smartbanner-title`: removed
+> 
+> `$fw-ad-smartbanner-title`: removed
+> 
+> `$m-ad-smartbanner-title`: removed
+> 
+> `$fz-ad-smartbanner-text`: removed
+> 
+> `$m-ad-smartbanner-text`: removed
+> 
+> `$p-ad-smartbanner-secondary`: removed
+> 
+> `$p-ad-smartbanner-rating-container`: removed
+> 
+> `$c-ad-smartbanner-rating-icon`: removed
+
+#### Spinner
+
+> `$c-spinner`: removed
+> 
+> `$m-spinner`: removed
+> 
+> `$op-spinner`: removed
+> 
+> `$animdur-spinner`: removed
+> 
+> `$animic-spinner`: removed
+> 
+> `$animtf-spinner`: removed
+
+> `$size-spinner-l`: removed
+> 
+> `$bdw-spinner-l`: removed
+> 
+> `$size-spinner-m`: removed
+> 
+> `$bdw-spinner-m`: removed
+> 
+> `$size-spinner-s`: removed
+> 
+> `$bdw-spinner-s`: removed
+
+#### Tabs
+
+> `$bd-tab-wrap`: removed
+> 
+> `$bd-tab`: removed
+> 
+> `$bgc-tab`: removed
+> 
+> `$c-tab`: removed
+> 
+> `$fw-tab`: removed
+> 
+> `$mr-tab`: removed
+> 
+> `$p-tab`: removed
+> 
+> `$tt-tab`: removed
+
+> `$bgc-tab-hover`: removed
+
+> `$bgc-tab-active`: removed
+> 
+> `$bxsh-tab-active`: removed
+> 
+> `$c-tab-active`: removed
+
+#### Tag
+
+> `$c-tag`: removed
+> 
+> `$c-tag-selected`: removed
+> 
+> `$bd-tag`: removed
+> 
+> `$bd-tag-selected`: removed
+> 
+> `$bgc-tag`: removed
+> 
+> `$bgc-tag-hover`: removed
+> 
+> `$bgc-tag-selected`: removed
+> 
+> `$bdrs-tag`: removed
+> 
+> `$fz-tag`: removed
+> 
+> `$fw-tag-link`: removed
+> 
+> `$lh-tag`: removed
+> 
+> `$size-tag-icon`: removed
+
+#### Title
+
+> `$c-title-basic-main-title`: removed
+> 
+> `$c-title-basic-subtitle`: removed
+
+#### Tooltip basic
+
+> `$bdr-tooltip-basic`: removed
+> 
+> `$bdw-tooltip-basic-arrow`: removed
+> 
+> `$fz-tooltip-basic`: removed
+> 
+> `$w-toolip-basic-arrow`: removed
+> 
+> `$p-toolip-basic`: removed
+> 
+> `$trs-toolip-basic`: removed
+> 
+> `$bxsh-toolip-basic`: removed
+> 
+> `$maw-tooltip-basic`: removed
+
+> `$bgc-tooltip-basic-dark`: removed
+> 
+> `$c-tooltip-basic-dark`: removed
+> 
+> `$bdc-tooltip-basic-dark`: removed
+
+> `$bgc-tooltip-basic-success`: removed
+> 
+> `$c-tooltip-basic-success`: removed
+> 
+> `$bdc-tooltip-basic-success`: removed
+
+> `$bgc-tooltip-basic-error`: removed
+> 
+> `$c-tooltip-basic-error`: removed
+> 
+> `$bdc-tooltip-basic-error`: removed
+
+> `$bgc-tooltip-basic-info`: removed
+> 
+> `$c-tooltip-basic-info`: removed
+> 
+> `$bdc-tooltip-basic-info`: removed
+
+#### Thumbnail
+
+> `$bgc-thumbnail-basic`: removed
+> 
+> `$bd-thumbnail-basic`: removed
+> 
+> `$bdrs-thumbnail-basic`: removed
+> 
+> `$p-thumbnail-basic`: removed
+> 
+> `$bgc-thumbnail-basic-caption`: removed
+> 
+> `$c-thumbnail-basic-caption`: removed
+> 
+> `$fz-thumbnail-basic-caption`: removed
+> 
+> `$trs-thumbnail-basic`: removed
+> 
+> `$p-thumbnail-basic-caption`: removed
+
+#### List
+
+> `$m-list-gutter`: removed
+
+## _font.scss
+
+### Strip number
+
+### Fonts and typography
+
+#### Font weights
+
+> `$fw-semi-bold`: maintained
+
+#### Font sizes
+
+> `$fz-base`: maintained
+> 
+> `$fz-body`: maintained
+> 
+> `$fz-xs`: maintained
+> 
+> `$fz-s`: maintained
+> 
+> `$fz-m`: maintained
+> 
+> `$fz-l`: maintained
+> 
+> `$fz-xl`: maintained
+
+#### Font sizes for headings
+
+> `$fz-h1`: maintained
+> 
+> `$fz-h2`: maintained
+> 
+> `$fz-h3`: maintained
+> 
+> `$fz-h4`: maintained
+> 
+> `$fz-h5`: maintained
+
+#### Line heights
+
+> `$lh-base`: removed
+
+#### Text link
+
+> `$td-text-link`: moved
+> 
+> `$td-hover-text-link`: moved
+> 
+> `$fz-text-link`: moved
+
+## _layout.scss
+
+### Layout
+
+> `$w-layout`: removed
+> 
+> `$w-layout-large`: removed
+
+### Breakpoints
+
+> `$breakpoints`: included
+> 
+> `$breakpoint-names`: included
+
+## _spacings.scss
+
+#### Margins
+
+> `$m-base`: included
+> 
+> `$m-v-xlarge`: removed
+> 
+> `$m-v-large`: removed
+> 
+> `$m-v`: removed
+> 
+> `$m-v-xsmall`: removed
+> 
+> `$m-v-small`: removed
+> 
+> `$m-h-xlarge`: removed
+> 
+> `$m-h-large`: removed
+> 
+> `$m-h`: removed
+> 
+> `$m-h-small`: removed
+> 
+> `$m-h-xsmall`: removed
+
+
+#### Paddings
+
+> `$p-base`: included
+> 
+> `$p-small`: removed
+> 
+> `$p-xsmall`: removed
+> 
+> `$p-xxsmall`: removed
+> 
+> `$p-v-xlarge`: removed
+> 
+> `$p-v-large`: removed
+> 
+> `$p-v`: removed
+> 
+> `$p-v-small`: removed
+> 
+> `$p-v-xsmall`: removed
+> 
+> `$p-h-xlarge`: removed
+> 
+> `$p-h-large`: removed
+> 
+> `$p-h`: removed
+> 
+> `$p-h-small`: removed
+> 
+> `$p-h-xsmall`: removed
+
+#### Gutter
+
+> $gutter: included
+> 
+> $gutter-s: included
+
+## components/atom/input/_settings.scss
+
+> `$pl-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$pr-atom-input`: moved to `@s-ui/react-atom-input`
+    
+> `$bxsh-atom-input-size`: moved to `@s-ui/react-atom-input`
+>
+> `$bxsh-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$bd-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$bd-atom-input-focus`: moved to `@s-ui/react-atom-input`
+> 
+> `$fz-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$bgc-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$c-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$bd-atom-input-base`: moved to `@s-ui/react-atom-input`
+
+> `$bd-molecule-autosuggest-focus`: moved to `@s-ui/react-molecule-autosuggest`
+> 
+> `$bxsh-molecule-autosuggest-focus`: moved to `@s-ui/react-molecule-autosuggest`
+> 
+> `$ol-molecule-autosuggest-focus`: moved to `@s-ui/react-molecule-autosuggest`
+> 
+> `$olo-molecule-autosuggest-focus`: moved to `@s-ui/react-molecule-autosuggest`
+
+> `$bd-atom-select-focus`: moved to `@s-ui/react-molecule-select`
+> 
+> `$bxsh-atom-select-focus`: moved to `@s-ui/react-molecule-select`
+> 
+> `$ol-atom-select-focus`: moved to `@s-ui/react-molecule-select`
+> 
+> `$olo-atom-select-focus`: moved to `@s-ui/react-molecule-select`
+
+> `$h-atom-input--xl`: moved to `@s-ui/react-atom-input`
+> 
+> `$h-atom-input--l`: moved to `@s-ui/react-atom-input`
+> 
+> `$h-atom-input--m`: moved to `@s-ui/react-atom-input`
+> 
+> `$h-atom-input--s`: moved to `@s-ui/react-atom-input`
+> 
+> `$h-atom-input--xs`: moved to `@s-ui/react-atom-input`
+
+> `$c-atom-input--success`: moved to `@s-ui/react-atom-input`
+> 
+> `$c-atom-input--error`: moved to `@s-ui/react-atom-input`
+> 
+> `$c-atom-input--alert`: moved to `@s-ui/react-atom-input`
+
+> `$sizes-atom-input`: moved to `@s-ui/react-atom-input`
+> 
+> `$states-atom-input`: moved to `@s-ui/react-atom-input`
+
+## components/thumbnail/_basic.scss
+
+> `$jc-thumbnail-basic-image`: removed
+> 
+> `$ar-thumbnail-basic-image`: removed
+
+# Mixins:
+
+> `@mixin sui-atom-input-input`: moved to `@s-ui/react-atom-input`
+> 
+> `@mixin sui-atom-input-input-focus`: moved to `@s-ui/react-atom-input`
+> 
+> `@mixin sui-atom-input-select-focus`: moved to `@s-ui/react-molecule-select`
+> 
+> `@mixin sui-molecule-autosuggest-focus`: moved to `@s-ui/react-molecule-autosuggest`
+
+> `@mixin sui-badge-notification-element`: removed
+> 
+> `@mixin sui-badge-notification`: removed
+
+> `@mixin sui-button`: removed
+> 
+> `@mixin sui-button--primary`: removed
+> 
+> `@mixin sui-button--secondary`: removed
+> 
+> `@mixin sui-button--accent`: removed
+> 
+> `@mixin sui-button--ghost`: removed
+> 
+> `@mixin sui-button--flat`: removed
+> 
+> `@mixin sui-button--small`: removed
+> 
+> `@mixin sui-button--medium`: removed
+> 
+> `@mixin sui-button--large`: removed
+> 
+> `@mixin sui-button--full`: removed
+
+> `@mixin sui-card`: removed
+> 
+> `@mixin sui-card--small`: removed
+
+> `@mixin sui-icon--small`: moved to `@s-ui/react-atom-icon`
+> 
+> `@mixin sui-icon--medium`: moved to `@s-ui/react-atom-icon`
+> 
+> `@mixin sui-icon--large`: moved to `@s-ui/react-atom-icon`
+> 
+> `@mixin sui-icon--xlarge`: moved to `@s-ui/react-atom-icon`
+
+> `@mixin sui-input`: removed
+
+> `@mixin sui-select`: removed
+
+> `@mixin sui-tab`: removed
+
+> `@mixin sui-tag`: removed
+> 
+> `@mixin sui-tag-link`: removed
+> 
+> `@mixin sui-tag-icon`: removed
+
+> `@mixin arrow-up`: removed
+> 
+> `@mixin arrow-down`: removed
+> 
+> `@mixin arrow-right`: removed
+> 
+> `@mixin arrow-left`: removed
+
+> `@mixin media-breakpoint-down`: removed
+>
+> `@mixin media-breakpoint-between`: removed
+>
+> `@mixin media-breakpoint-only`: removed
+
+## Placeholder Selectors
+
+> `%sui-atom-input-input`: moved to `@s-ui/react-atom-input`
+> 
+> `%sui-atom-input-input-focus`: moved to `@s-ui/react-atom-input`
+> 
+> `%sui-atom-input-select-focus`: moved to `@s-ui/react-molecule-select`
+> 
+> `%sui-molecule-autosuggest-focus`: moved to `@s-ui/react-molecule-autosuggest`
+ 
+
+## Functions
+
+> @function strip-unit($number)
+> 
+> @function breakpoint-next($name)
+>
+> @function breakpoint-max($name)
\ No newline at end of file
diff --git a/packages/sui-theme/src/settings-compat-v7/_animation.scss b/packages/sui-theme/src/settings-compat-v7/_animation.scss
deleted file mode 100644
index 914e0470d..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_animation.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// --- Animation --- //
-
-// Transitions
-$trsdu-base: 0.3s !default;
-$trsdu-slow: $trsdu-base * 2 !default;
-$trsdu-fast: $trsdu-base * 0.5 !default;
-$trs-base: $trsdu-base ease !default;
diff --git a/packages/sui-theme/src/settings-compat-v7/_box-style.scss b/packages/sui-theme/src/settings-compat-v7/_box-style.scss
deleted file mode 100644
index c1b21c1f3..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_box-style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// --- Box Style --- //
-
-// Border radius
-$bdrs-none: 0 !default;
-$bdrs-small: ceil(4px * 0.5) !default;
-
-// Box shadows
-$bxsh-spread: 3px !default;
-$bxsh-base: 0 1px $bxsh-spread rgba($c-black, 0.15) !default;
diff --git a/packages/sui-theme/src/settings-compat-v7/_color.scss b/packages/sui-theme/src/settings-compat-v7/_color.scss
deleted file mode 100644
index 99a499f56..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_color.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// --- Colors --- //
-// This is a layer to maintain compatiblity with version 7-
-
-// Colors non-existing in the new color palette
-$c-highlighted: #f2cd96 !default; // seem not used
-$c-featured: #ffe613 !default; // used as category tag
-$c-white: #ffffff !default; // not semantic
-$c-black: #000000 !default; // not semantic
-
-// Colors renamed in the new color palette
-$c-warning: #f5a623 !default; // This color corresponds to $c-alert
diff --git a/packages/sui-theme/src/settings-compat-v7/_components.scss b/packages/sui-theme/src/settings-compat-v7/_components.scss
deleted file mode 100644
index b18941f3f..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_components.scss
+++ /dev/null
@@ -1,373 +0,0 @@
-// --- Forms --- //
-
-// Inputs
-@use 'sass:math';
-
-$bgc-input: $c-white !default;
-$bgc-input-hover: $c-white !default;
-$bgc-input-focus: $c-gray-lightest !default;
-$bdrs-input: $bdrs-base !default;
-$c-input: $c-text-base !default;
-$c-input-focus: $c-text-base !default;
-$c-input-hover: $c-text-base !default;
-$c-input-placeholder: $c-gray !default;
-$ff-input-placeholder: $ff-sans-serif !default;
-$fs-input-placeholder: italic !default;
-$lh-input: $lh-base !default;
-
-$bd-input: 0 0 0 1px $c-gray inset !default;
-$bd-input-hover: 0 0 0 1px $c-gray inset !default;
-$bd-input-focus: 0 0 0 1px $c-gray inset !default;
-
-// Radio List
-$bd-radio-list: 1px solid $c-gray !default;
-$bdrs-radio-list: $bdrs-base !default;
-
-$bgc-radio-list-checked: $c-primary !default;
-$bgc-radio-list: $c-white !default;
-
-$c-radio-list-checked: $c-white !default;
-$p-radio-list: $p-v $p-h !default;
-
-// Selects
-$bgc-select: $c-white !default;
-$bgc-select-hover: $c-white !default;
-$bgc-select-focus: $c-gray-lightest !default;
-$lh-select: $lh-base !default;
-
-$bgc-select-icon-wrap: $c-gray-lightest !default;
-$p-select-icon-wrap: 0 $p-h-small !default;
-$w-select-icon-wrap: 30px !default;
-
-$bxsh-select: 0 0 0 1px $c-gray inset !default;
-$bxsh-select-hover: 0 0 0 1px $c-gray inset !default;
-$bxsh-select-focus: 0 0 0 1px $c-gray inset !default;
-
-// --- Components --- //
-
-// Ads
-$h-ad-l-top: auto !default;
-$w-ad-l-top: 980px !default;
-$h-ad-l-right: 600px !default;
-$w-ad-l-right: 300px !default;
-$mih-ad-l-top: 0 !default;
-
-// Alert Basic
-$bdrs-alert-basic: 0 !default;
-$bxsh-alert-basic: $bxsh-base !default;
-$c-alert-basic-link: $c-primary !default;
-
-$c-alert-basic-info: $c-primary !default;
-$bd-alert-basic-info: 0 !default;
-$bdl-alert-basic-info: $bdw-l solid $c-alert-basic-info !default;
-$bgc-alert-basic-info: $c-white !default;
-
-$c-alert-basic-error: $c-error !default;
-$bd-alert-basic-error: 0 !default;
-$bdl-alert-basic-error: $bdw-l solid $c-alert-basic-error !default;
-$bgc-alert-basic-error: $c-white !default;
-
-$c-alert-basic-success: $c-success !default;
-$bd-alert-basic-success: 0 !default;
-$bdl-alert-basic-success: $bdw-l solid $c-alert-basic-success !default;
-$bgc-alert-basic-success: $c-white !default;
-
-// Badge
-$c-badge-notification: $c-primary !default;
-$size-badge-notification: 18px !default;
-$p-badge-notification: 0 5px !default;
-$m-badge-notification: 0 0 0 10px !default;
-$bd-badge-notification: $bdw-m solid $c-white !default;
-
-// Button
-$bdrs-button: 0 !default;
-$lh-button: $lh-base !default;
-$o-button-disabled: 0.4 !default;
-
-$c-button-primary: $c-white !default;
-$c-button-primary-icon-fill: $c-white !default;
-$c-button-primary-icon-stroke: transparent !default;
-$bgc-button-primary: $c-primary !default;
-$bgc-button-primary-hover: $c-primary-light !default;
-$bgc-button-primary-active: $c-primary-dark !default;
-
-$c-button-secondary: $c-gray-dark !default;
-$c-button-secondary-hover: $c-gray-dark !default;
-$c-button-secondary-icon-fill: $c-gray-dark !default;
-$c-button-secondary-icon-stroke: transparent !default;
-$bdc-button-secondary: $c-gray-dark !default;
-$bgc-button-secondary: $c-white !default;
-$bgc-button-secondary-hover: $c-gray-lightest !default;
-$bgc-button-secondary-active: $c-gray-light !default;
-
-$c-button-accent: $c-white !default;
-$c-button-accent-icon-fill: $c-white !default;
-$c-button-accent-icon-stroke: transparent !default;
-$bgc-button-accent: $c-accent !default;
-$bgc-button-accent-hover: $c-accent-light !default;
-$bgc-button-accent-active: $c-accent-dark !default;
-
-$c-button-ghost: $c-gray-dark !default;
-$c-button-ghost-hover: $c-gray !default;
-$c-button-ghost-icon-fill: $c-gray-dark !default;
-$c-button-ghost-icon-stroke: transparent !default;
-$bdc-button-ghost: $c-gray-dark !default;
-$bdc-button-ghost-hover: $c-gray !default;
-$bgc-button-ghost-active: $c-gray !default;
-
-$c-button-flat: $c-gray-dark !default;
-$c-button-flat-hover: $c-gray !default;
-$c-button-flat-icon-fill: $c-gray-dark !default;
-$c-button-flat-icon-stroke: transparent !default;
-$bgc-button-flat-active: $c-gray !default;
-
-// Card
-$bdc-article-featured: $c-featured !default;
-$bd-article-featured: $bdw-l solid $bdc-article-featured !default;
-$bdrs-card: 0 !default;
-$bxsh-card: $bxsh-base !default;
-$bxsh-card-hover: 0 1px 6px 2px rgba($c-black, 0.15) !default;
-$c-card-article-description: inherit !default;
-$c-card-article-icon-fill: $c-white !default;
-$c-card-title-hover: inherit !default;
-$z-card-article-icon: 1 !default;
-
-// Card composable
-$bgc-card-composable: $c-white !default;
-$p-card-composable-primary: 0 !default;
-$p-card-composable-secondary: $p-base !default;
-
-// Card product
-$c-card-product-title: $c-primary !default;
-$c-card-product-favorited: $c-primary !default;
-$c-card-product-slider-nav-icon: $c-primary !default;
-$size-card-product-slider-nav-icon: 30px !default;
-
-// Card subscription
-$bg-card-subscription-image: none !default;
-$bgc-card-subscription-content: $c-white !default;
-$c-card-subscription-icon: $c-white !default;
-$c-card-subscription-title: $c-gray !default;
-$fz-card-subscription-input: $fz-base !default;
-$h-card-subscription-image: 0 !default;
-$pt-card-subscription: 0 !default;
-$t-card-subscription-image: 0 !default;
-$type-card-subscription-button: 'primary' !default;
-
-// Cookie banner
-$bgc-cookie-banner: $c-gray-lightest !default;
-$c-cookie-banner: $c-gray !default;
-$fz-cookie-banner: $fz-s !default;
-$z-cookie-banner: 50 !default;
-
-$maw-cookie-banner-content: $w-layout-large !default;
-$p-cookie-banner-content: $p-v $p-h !default;
-$ta-cookie-banner-context: center !default;
-
-$c-cookie-banner-link: $c-primary !default;
-
-$c-cookie-banner-close-icon: $c-gray-dark !default;
-$c-cookie-banner-close-icon-hover: $c-gray !default;
-
-// Dropdown
-$c-dropdown-button-large: $c-text-base !default;
-$bdt-dropdown-menu: $bdw-s solid $c-primary !default;
-$bgc-dropdown-button-hover: $c-white !default;
-$bgc-dropdown-menu-hover: $c-white !default;
-$bgc-dropdown-menu: $c-gray-lightest !default;
-$bxsh-dropdown-menu: $bxsh-base !default;
-$c-dropdown-arrow: transparent !default;
-$size-dropdown-arrow-up: 0 !default;
-$size-dropdown-icon: 18px !default;
-$z-dropdown-menu: 1 !default;
-
-// Dropdown basic
-$bdrs-dropdown-basic-menu: 0 !default;
-$c-dropdown-basic-button-hover: $c-accent !default;
-$c-dropdown-basic-button-icon: $c-accent !default;
-$c-dropdown-basic-list-link: $c-accent !default;
-$fw-dropdown-basic-button: inherit !default;
-
-// Dropdown user
-$bd-dropdown-user-last-item: 1px solid $c-gray-light !default;
-$bdrs-dropdown-user-menu: 0 !default;
-$bg-dropdown-user-button: $c-gray !default;
-$bgc-dropdown-user: $c-white !default;
-$c-dropdown-user-icon-highlight: $c-accent !default;
-$c-dropdown-user-icon-hover: $c-accent !default;
-$c-dropdown-user-link-highlight: $c-accent !default;
-$c-dropdown-user-text-large: $c-text-base !default;
-$w-dropdown-user-avatar: 48px !default;
-$w-dropdown-user-text: 100px !default;
-
-// Form Autocompleted
-$bd-form-autocompleted: $bdw-s solid $c-gray !default;
-$bdr-form-autocompleted: $bdrs-base !default;
-$bgc-form-autocompleted-item-active: $c-gray-lightest !default;
-$bgc-form-autocompleted-item-hover: $c-gray-lightest !default;
-$bgc-form-autocompleted: $c-white !default;
-$c-form-autocompleted-submit-icon: $c-white !default;
-$ml-form-autocompleted-submit: $m-h !default;
-$mt-form-autocompleted: 3px !default;
-$p-form-autocompleted-item: $p-v $p-h !default;
-$r-form-autocompleted-clear: 12px !default;
-$t-form-autocompleted-clear: 50% !default;
-$trf-form-autocompleted-clear: translateY(-50%) !default;
-$z-form-autocompleted-suggests: 1 !default;
-$type-form-autocompleted-submit: 'primary' !default;
-
-// Modal
-$bg-modal: rgba(0, 0, 0, 0.6) !default;
-
-// Modal Basic
-$bd-modal-basic: 0 !default;
-$bg-modal-basic: $bg-modal !default;
-$bxsh-modal-basic: $bxsh-base !default;
-$m-modal-basic: $m-base !default;
-$maw-modal-basic: 50% !default;
-$p-modal-basic: $p-base !default;
-$w-modal-basic: auto !default;
-$z-modal-basic: 100 !default;
-$c-modal-basic-icon: $c-black !default;
-$h-modal-basic-icon: 16px !default;
-$w-modal-basic-icon: 16px !default;
-$bg-modal-basic-dialog: $c-white !default;
-$bg-modal-basic-header: transparent !default;
-$c-modal-basic-header: inherit !default;
-$p-modal-basic-header: $p-base !default;
-$m-modal-basic-header: $p-modal-basic-header !default;
-$bd-modal-basic-content: $bdrs-s solid $c-gray-light !default;
-$p-modal-basic-content: $p-base !default;
-$p-modal-basic-footer: $p-base !default;
-
-// Search box
-$bg-search-box: $c-gray-light !default;
-
-// Section
-$c-section-basic-main-title: $c-black !default;
-$c-section-basic-subtitle: $c-gray-light !default;
-$c-section-basic-content-text-paragraph: $c-gray !default;
-$fz-section-basic-title: $fz-h3 !default;
-$fz-section-basic-subtitle: $fz-h5 !default;
-$fz-section-basic-content-text-paragraph: $fz-m !default;
-$lh-section-basic-paragraph: $lh-base !default;
-$mb-section-basic: $m-v-xlarge * 2 !default;
-$mb-section-basic-header: $m-v-xlarge !default;
-$m-v-section-basic-content-text-paragraph: $m-v-large !default;
-$bd-section-basic-line-separator: $bdrs-s solid $c-gray-lightest !default;
-
-// Smartbanner
-$bgc-ad-smartbanner: $c-white !default;
-$bb-ad-smartbanner: $bdrs-s solid $c-gray-light !default;
-$h-ad-smartbanner: 70px !default;
-$t-ad-smartbanner: 0 !default;
-$b-ad-smartbanner: auto !default;
-$l-ad-smartbanner: 0 !default;
-$z-ad-smartbanner: 10 !default;
-$m-ad-smartbanner-logo: 0 $m-h-small !default;
-$w-ad-smartbanner-logo: 50px !default;
-$h-ad-smartbanner-logo: 50px !default;
-$bdrs-ad-smartbanner-logo: 0 !default;
-$bgc-ad-smartbanner-button-install: $c-primary !default;
-$c-ad-smartbanner-button-color: $c-white !default;
-$w-ad-smartbanner-button-close-icon: 10px !default;
-$h-ad-smartbanner-button-close-icon: 10px !default;
-$c-ad-smartbanner-button-close-icon: grey !default;
-$m-ad-smartbanner-button-close-container: 0 $m-h-small !default;
-$fz-ad-smartbanner-title: $fz-h5 !default;
-$fw-ad-smartbanner-title: $fw-bold !default;
-$m-ad-smartbanner-title: 0 0 $m-v-xsmall 0 !default;
-$fz-ad-smartbanner-text: $fz-s !default;
-$m-ad-smartbanner-text: 0 0 $m-v-xsmall 0 !default;
-$p-ad-smartbanner-secondary: $p-v $p-h-small !default;
-$p-ad-smartbanner-rating-container: 0 !default;
-$c-ad-smartbanner-rating-icon: #f39c12 !default;
-
-// Spinner
-$c-spinner: $c-primary !default;
-$m-spinner: $m-h-xsmall !default;
-$op-spinner: 0.45 !default;
-$animdur-spinner: 1500ms !default;
-$animic-spinner: infinite !default;
-$animtf-spinner: linear !default;
-
-$size-spinner-l: 60px !default;
-$bdw-spinner-l: 3px !default;
-$size-spinner-m: 30px !default;
-$bdw-spinner-m: $bdw-m !default;
-$size-spinner-s: 15px !default;
-$bdw-spinner-s: $bdw-s !default;
-
-// Tabs
-$bd-tab-wrap: $bdw-s solid $c-gray-light !default;
-$bd-tab: 0 !default;
-$bgc-tab: $c-white !default;
-$c-tab: $c-text-base !default;
-$fw-tab: $fw-semi-bold !default;
-$mr-tab: 0 !default;
-$p-tab: $p-v * 1.5 $p-h !default;
-$tt-tab: uppercase !default;
-
-$bgc-tab-hover: $c-white !default;
-
-$bgc-tab-active: $c-white !default;
-$bxsh-tab-active: 0 -4px 0 $c-primary inset !default;
-$c-tab-active: $c-primary !default;
-
-// Tag
-$c-tag: $c-text-base !default;
-$c-tag-selected: $c-text-base !default;
-$bd-tag: $bdw-s solid $c-gray-light !default;
-$bd-tag-selected: $bdw-s solid $c-primary !default;
-$bgc-tag: $c-white !default;
-$bgc-tag-hover: $c-white !default;
-$bgc-tag-selected: $c-white !default;
-$bdrs-tag: $bdrs-base !default;
-$fz-tag: $fz-s !default;
-$fw-tag-link: $fw-regular !default;
-$lh-tag: 1.5em !default;
-$size-tag-icon: 14px !default;
-
-// Title
-$c-title-basic-main-title: $c-primary !default;
-$c-title-basic-subtitle: $c-primary !default;
-
-// Tooltip basic
-$bdr-tooltip-basic: 0 !default;
-$bdw-tooltip-basic-arrow: $bdw-l !default;
-$fz-tooltip-basic: $fz-base !default;
-$w-toolip-basic-arrow: 12px !default;
-$p-toolip-basic: $p-v $p-h !default;
-$trs-toolip-basic: opacity $trsdu-base ease-out !default;
-$bxsh-toolip-basic: $bxsh-base !default;
-$maw-tooltip-basic: 300px !default;
-
-$bgc-tooltip-basic-dark: $c-white !default;
-$c-tooltip-basic-dark: $c-text-base !default;
-$bdc-tooltip-basic-dark: $c-gray !default;
-
-$bgc-tooltip-basic-success: $c-white !default;
-$c-tooltip-basic-success: $c-text-base !default;
-$bdc-tooltip-basic-success: $c-success !default;
-
-$bgc-tooltip-basic-error: $c-white !default;
-$c-tooltip-basic-error: $c-text-base !default;
-$bdc-tooltip-basic-error: $c-error !default;
-
-$bgc-tooltip-basic-info: $c-white !default;
-$c-tooltip-basic-info: $c-text-base !default;
-$bdc-tooltip-basic-info: $c-accent !default;
-
-// Thumbnail
-$bgc-thumbnail-basic: $c-white !default;
-$bd-thumbnail-basic: $bdw-s solid $c-gray-lightest !default;
-$bdrs-thumbnail-basic: 0 !default;
-$p-thumbnail-basic: $p-xxsmall !default;
-$bgc-thumbnail-basic-caption: $c-black !default;
-$c-thumbnail-basic-caption: $c-white !default;
-$fz-thumbnail-basic-caption: $fz-h4 !default;
-$trs-thumbnail-basic: $trsdu-slow ease-in-out !default;
-$p-thumbnail-basic-caption: ceil(math.div($p-base, 3)) !default;
-
-// List
-$m-list-gutter: $m-h !default;
diff --git a/packages/sui-theme/src/settings-compat-v7/_font.scss b/packages/sui-theme/src/settings-compat-v7/_font.scss
deleted file mode 100644
index 6104a0d63..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_font.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-// --- Strip number --- //
-// Necessary to support $fz definitions either with or without units
-@use 'sass:math';
-
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return math.div($number, $number * 0 + 1);
-  }
-
-  @return $number;
-}
-
-// --- Fonts and typography --- //
-
-// Font weights
-$fw-semi-bold: 600 !default;
-
-// Font sizes
-$fz-base: 14 !default;
-$fz-body: strip-unit($fz-base) * 1px !default;
-$fz-xs: strip-unit(ceil($fz-base * 0.666)) * 1px !default;
-$fz-s: strip-unit(ceil($fz-base * 0.8)) * 1px !default;
-$fz-m: strip-unit($fz-base) * 1px !default;
-$fz-l: strip-unit(ceil($fz-base * 1.25)) * 1px !default;
-$fz-xl: strip-unit(ceil($fz-base * 1.75)) * 1px !default;
-
-// Font sizes for headings
-$fz-h1: 32px !default;
-$fz-h2: 24px !default;
-$fz-h3: 18px !default;
-$fz-h4: 14px !default;
-$fz-h5: 12px !default;
-
-// Line heights
-$lh-base: 1.715 !default;
-
-// Text link
-$td-text-link: underline !default;
-$td-hover-text-link: none !default;
-$fz-text-link: null !default;
diff --git a/packages/sui-theme/src/settings-compat-v7/_index.scss b/packages/sui-theme/src/settings-compat-v7/_index.scss
deleted file mode 100644
index fbf45e4ca..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_index.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// # Theme Variables
-// --------------------------------------------------
-// The naming convention used for variables is based on Emmet.
-// See [Emmet cheat sheet](http://docs.emmet.io/cheat-sheet/)
-//
-// Some of the prefixes used:
-// * bg = background
-// * bgc = background-color
-// * c = color
-// * ff = font-family
-// * fw = font-weight
-// * fz = font-size
-// * lh = line-height
-// * m = margin
-// * maw = max-width
-// * p = padding
-// * ta = text-align
-// * z = z-index
-
-// URLs
-// Note: This URL must be overwritten in your own component/site styles.
-$url-statics: 'https://statics.sui-cdn.com/' !default;
-
-@import './color';
-@import '../settings/color';
-
-@import './font';
-@import '../settings/font';
-
-@import './box-style';
-@import '../settings/box-style';
-
-@import './spacing';
-@import '../settings/spacing';
-@import '../settings/size';
-
-@import './animation';
-@import './layout';
-@import './components';
diff --git a/packages/sui-theme/src/settings-compat-v7/_layout.scss b/packages/sui-theme/src/settings-compat-v7/_layout.scss
deleted file mode 100644
index 65979dc0b..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_layout.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-// --- Layout --- //
-
-$w-layout: 980px !default;
-$w-layout-large: 1280px !default;
-
-// Breakpoints
-$breakpoints: (
-  xxs: 0,
-  xs: 320px,
-  s: 576px,
-  m: 768px,
-  l: 992px,
-  xl: 1200px
-) !default;
-$breakpoint-names: map-keys($breakpoints) !default;
-
-// Breakpoint viewport sizes and media queries.
-//
-// Breakpoints are defined as a map of (name: minimum width), order from small to large:
-//
-//    (xxs: 0, xs: 320px, sm: 576px, md: 768px)
-
-// Name of the next breakpoint, or null for the last breakpoint.
-//
-//    >> breakpoint-next(sm)
-//    md
-@function breakpoint-next($name) {
-  $n: index($breakpoint-names, $name);
-  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
-//
-//    >> breakpoint-max(sm)
-//    767px
-@function breakpoint-max($name) {
-  $next: breakpoint-next($name);
-  @return if($next, breakpoint-min($next) - 1px, null);
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name) {
-  $max: breakpoint-max($name);
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper) {
-  @include media-breakpoint-up($lower) {
-    @include media-breakpoint-down($upper) {
-      @content;
-    }
-  }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name) {
-  @include media-breakpoint-between($name, $name) {
-    @content;
-  }
-}
diff --git a/packages/sui-theme/src/settings-compat-v7/_spacing.scss b/packages/sui-theme/src/settings-compat-v7/_spacing.scss
deleted file mode 100644
index b24677a2e..000000000
--- a/packages/sui-theme/src/settings-compat-v7/_spacing.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Margins
-@use 'sass:math';
-
-$m-base: 16px !default;
-$m-v: ceil($m-base * 0.5) !default; // 8px
-$m-h: $m-base !default; // 16px
-$m-v-xsmall: ceil(math.div($m-v, 3)) !default; // 3px
-$m-h-xsmall: ceil(math.div($m-h, 3)) !default; // 6px
-$m-v-small: ceil($m-v * 0.5) !default; // 4px
-$m-h-small: ceil($m-h * 0.5) !default; // 8px
-$m-v-large: ceil($m-v * 2) !default; // 16px
-$m-h-large: ceil($m-h * 2) !default; // 32px
-$m-v-xlarge: ceil($m-v * 3) !default; // 24px
-$m-h-xlarge: ceil($m-h * 3) !default; // 48px
-
-// Paddings
-$p-base: 16px !default;
-$p-small: ceil($p-base * 0.5) !default; // 8px
-$p-xsmall: ceil(math.div($p-base, 3)) !default; // 6px
-$p-xxsmall: ceil($p-base * 0.25) !default; // 4px
-$p-v: ceil($p-base * 0.5) !default; // 8px
-$p-h: $p-base !default; // 16px
-$p-v-xsmall: ceil(math.div($p-v, 3)) !default; // 3px
-$p-h-xsmall: ceil(math.div($p-h, 3)) !default; // 6px
-$p-v-small: ceil($p-v * 0.5) !default; // 4px
-$p-h-small: ceil($p-h * 0.5) !default; // 8px
-$p-v-large: ceil($p-v * 2) !default; // 16px
-$p-h-large: ceil($p-h * 2) !default; // 32px
-$p-v-xlarge: ceil($p-v * 3) !default; // 24px
-$p-h-xlarge: ceil($p-h * 3) !default; // 48px
-
-// Gutter
-$gutter: $p-base !default;
-$gutter-s: $gutter * 0.5 !default;
diff --git a/packages/sui-theme/src/settings/_size.scss b/packages/sui-theme/src/settings/_size.scss
index 13f765112..62f160276 100644
--- a/packages/sui-theme/src/settings/_size.scss
+++ b/packages/sui-theme/src/settings/_size.scss
@@ -3,10 +3,10 @@
 //
 // Prefixes used:
 // * sz = size
-$sz-base: 8px !default;
+$sz-base: 8px !default; // 8px
 
 // Icons
-$sz-icon: 3 * $sz-base !default;
+$sz-icon: 3 * $sz-base !default; // 24px
 
 $sz-icon-xs: math.div(2, 4) * $sz-icon !default; // 12px
 $sz-icon-s: math.div(2, 3) * $sz-icon !default; // 16px
diff --git a/packages/sui-theme/src/utils/_colors.scss b/packages/sui-theme/src/utils/_colors.scss
index edb4ca3c2..4b91e56f6 100644
--- a/packages/sui-theme/src/utils/_colors.scss
+++ b/packages/sui-theme/src/utils/_colors.scss
@@ -25,14 +25,18 @@ $color-darken-steps: 20, 35, 55, 75 !default;
   $variation: $color;
 
   @if ($step > $positive-steps) {
-    $variation: mix($light, $color, nth($color-lighten-steps, $positive-steps));
+    $variation: color-mix(in srgb, $light #{'#{nth($color-lighten-steps, $positive-steps)}%'}, $color);
   } @else if ($step < -$negative-steps) {
-    $variation: mix($dark, $color, nth($color-darken-steps, $negative-steps));
+    $variation: color-mix(in srgb, $dark #{'#{nth($color-darken-steps, $negative-steps)}%'}, $color);
   } @else if ($step < 0) {
-    $variation: mix($dark, $color, nth($color-darken-steps, -$step));
+    $variation: color-mix(in srgb, $dark #{'#{nth($color-darken-steps, -$step)}%'}, $color);
   } @else if ($step > 0) {
-    $variation: mix($light, $color, nth($color-lighten-steps, $step));
+    $variation: color-mix(in srgb, $light #{'#{nth($color-lighten-steps, $step)}%'}, $color);
   }
 
   @return $variation;
 }
+
+@function transparentize($color, $amount) {
+  @return color-mix(in srgb, $color #{'#{(1 - $amount) * 100}%'}, transparent);
+}
diff --git a/packages/sui-theme/src/utils/_forms.scss b/packages/sui-theme/src/utils/_forms.scss
index b05c44ef2..66c9f52a1 100644
--- a/packages/sui-theme/src/utils/_forms.scss
+++ b/packages/sui-theme/src/utils/_forms.scss
@@ -53,7 +53,6 @@
 
     &:not(:disabled)::placeholder {
       color: $c-gray-dark;
-      font-family: $ff-input-placeholder;
     }
 
     &:disabled {
@@ -61,7 +60,6 @@
 
       &::placeholder {
         color: $c-gray-light;
-        font-family: $ff-input-placeholder;
       }
     }
 
diff --git a/packages/sui-theme/src/utils/_opacity.scss b/packages/sui-theme/src/utils/_opacity.scss
index 78ea8fbe9..ca1702809 100644
--- a/packages/sui-theme/src/utils/_opacity.scss
+++ b/packages/sui-theme/src/utils/_opacity.scss
@@ -4,11 +4,11 @@
 // @include bgcolor-opacity($c-black);
 
 @mixin bgcolor-opacity($color) {
-  background-color: rgba($color, 1);
+  background-color: color-mix(in srgb, $color 100%, transparent);
 
   @each $value in $c-opacity {
     &-#{$value} {
-      background-color: rgba($color, $value * 0.01);
+      background-color: color-mix(in srgb, $color #{'#{$value}%'}, transparent);
     }
   }
 }
@@ -19,7 +19,7 @@
       position: relative;
 
       &::before {
-        background-color: rgba($color, $value * 0.01);
+        background-color: color-mix(in srgb, $color #{'#{$value}%'}, transparent);
         content: '';
         display: block;
         height: 100%;
diff --git a/packages/sui-widget-embedder/package.json b/packages/sui-widget-embedder/package.json
index fab57ea78..9207d3794 100644
--- a/packages/sui-widget-embedder/package.json
+++ b/packages/sui-widget-embedder/package.json
@@ -16,7 +16,7 @@
     "@s-ui/bundler": "9",
     "@s-ui/helpers": "1",
     "@s-ui/react-context": "1",
-    "@s-ui/react-hooks": "1",
+    "@s-ui/react-hooks": "beta",
     "commander": "8.3.0",
     "copy-paste": "1.3.0",
     "webpack-dev-middleware": "5.3.4"