diff --git a/.eslintrc b/.eslintrc
index c4ca0a649..6508125b3 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,9 +1,11 @@
 {
     "plugins": ["jest", "jsx-a11y"],
     "extends": [
-        "@doist/eslint-config/recommended-requiring-type-checking",
+        "@doist/eslint-config/recommended-type-checked",
         "@doist/eslint-config/react",
-        "plugin:jest/recommended"
+        "plugin:react/jsx-runtime",
+        "plugin:jest/recommended",
+        "@doist/eslint-config/simple-import-sort"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
@@ -12,7 +14,7 @@
             "impliedStrict": true
         },
         "sourceType": "module",
-        "project": ["tsconfig.json", "tsconfig.stories.json"]
+        "project": ["tsconfig.json", "stories/tsconfig.json"]
     },
     "ignorePatterns": [
         "dist/**",
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index dd37702c6..9874a91c3 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -10,19 +10,19 @@ Our [README](../README.md) should contain all information to get you started. If
 
 Do you want to work on an existing issue?
 
--   Leave a comment on the issue saying that you start working on it.
+- Leave a comment on the issue saying that you start working on it.
 
 Do you want to add a new component?
 
--   Create an issue describing the component and we'll tell you whether it's a good fit for Reactist (most of them will be so don't be shy 😊). After that you can start working on it.
+- Create an issue describing the component and we'll tell you whether it's a good fit for Reactist (most of them will be so don't be shy 😊). After that you can start working on it.
 
 Did you find a bug or a component not behaving as expected?
 
--   Create an issue describing the problem. Either we will fix this or give you the opportunity (and help) to fix it yourself.
+- Create an issue describing the problem. Either we will fix this or give you the opportunity (and help) to fix it yourself.
 
 Any other question / feedback?
 
--   Open an issue and let us know :)
+- Open an issue and let us know :)
 
 ## Struggling during development or need help?
 
diff --git a/.github/ISSUE_TEMPLATE/Bug.md b/.github/ISSUE_TEMPLATE/Bug.md
index bc389c056..15b34a8b5 100644
--- a/.github/ISSUE_TEMPLATE/Bug.md
+++ b/.github/ISSUE_TEMPLATE/Bug.md
@@ -31,6 +31,6 @@ If possible, describe how this bug could be fixed.
 Consider adding any relevant environment information here.
 -->
 
--   `@doist/reactist` version:
--   `react` version:
--   Browser:
+- `@doist/reactist` version:
+- `react` version:
+- Browser:
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 07f9cc97b..8ac9efebb 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -16,9 +16,9 @@ Please describe your implementation and any details that we should keep in mind
 Feel free to leave unchecked or remove the lines that are not applicable.
 -->
 
--   [ ] Added tests for bugs / new features
--   [ ] Updated docs (storybooks, readme)
--   [ ] Reviewed and approved Chromatic visual regression tests in CI
+- [ ] Added tests for bugs / new features
+- [ ] Updated docs (storybooks, readme)
+- [ ] Reviewed and approved Chromatic visual regression tests in CI
 
 <!--
 _Note:_ versioning is handled by [release-please](https://github.com/googleapis/release-please) action, based on the PR title.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 55316136f..1864e6091 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -40,7 +40,8 @@ module.exports = {
             {
                 test: /\.(m?jsx?|tsx?)$/,
                 // Exclude all node_modules from transpilation, except for Ariakit and Storybook testing libraries
-                exclude: /node_modules\/(?!(ariakit.*|@storybook\/expect|@storybook\/jest|@adobe\/css-tools|@testing-library\/jest-dom)\/).*/,
+                exclude:
+                    /node_modules\/(?!(ariakit.*|@storybook\/expect|@storybook\/jest|@adobe\/css-tools|@testing-library\/jest-dom)\/).*/,
                 use: [{ loader: 'babel-loader', options: babelConfigForNodeModules }],
             },
             {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9312f8f5..fc6f08944 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,1455 +2,1418 @@
 
 ## [28.7.4](https://github.com/Doist/reactist/compare/v28.7.3...v28.7.4) (2025-10-31)
 
-
 ### 🧰 Maintenance
 
-* Enable trusted publishing and npm provenance ([#975](https://github.com/Doist/reactist/issues/975)) ([b3b1bcc](https://github.com/Doist/reactist/commit/b3b1bcc65cf15baa7f8516cbea45ce5f7fdaa30e))
+- Enable trusted publishing and npm provenance ([#975](https://github.com/Doist/reactist/issues/975)) ([b3b1bcc](https://github.com/Doist/reactist/commit/b3b1bcc65cf15baa7f8516cbea45ce5f7fdaa30e))
 
 ## [28.7.3](https://github.com/Doist/reactist/compare/v28.7.2...v28.7.3) (2025-10-31)
 
-
 ### 🧰 Maintenance
 
-* Migrate from tsdx to Rollup for modern build tooling ([#973](https://github.com/Doist/reactist/issues/973)) ([45b3275](https://github.com/Doist/reactist/commit/45b3275f87e29c9e2506f3871c90824ee4fb49e2))
+- Migrate from tsdx to Rollup for modern build tooling ([#973](https://github.com/Doist/reactist/issues/973)) ([45b3275](https://github.com/Doist/reactist/commit/45b3275f87e29c9e2506f3871c90824ee4fb49e2))
 
 ## [28.7.2](https://github.com/Doist/reactist/compare/v28.7.1...v28.7.2) (2025-10-24)
 
-
 ### 🧰 Maintenance
 
-* Temporarily disable npm trusted publishing until we can upgrade Node.js ([#971](https://github.com/Doist/reactist/issues/971)) ([25ca6e9](https://github.com/Doist/reactist/commit/25ca6e91920c6d6372d3edf4ec47a92185b64bf5))
+- Temporarily disable npm trusted publishing until we can upgrade Node.js ([#971](https://github.com/Doist/reactist/issues/971)) ([25ca6e9](https://github.com/Doist/reactist/commit/25ca6e91920c6d6372d3edf4ec47a92185b64bf5))
 
 ## [28.7.1](https://github.com/Doist/reactist/compare/v28.7.0...v28.7.1) (2025-10-24)
 
-
 ### 🧰 Maintenance
 
-* Enable trusted publishing and npm provenance ([#968](https://github.com/Doist/reactist/issues/968)) ([0c33d50](https://github.com/Doist/reactist/commit/0c33d50a85e63a617b84cac009d9cae3f7095948))
+- Enable trusted publishing and npm provenance ([#968](https://github.com/Doist/reactist/issues/968)) ([0c33d50](https://github.com/Doist/reactist/commit/0c33d50a85e63a617b84cac009d9cae3f7095948))
 
 ## [28.7.0](https://github.com/Doist/reactist/compare/v28.6.0...v28.7.0) (2025-10-16)
 
-
 ### 🚀 Features
 
-* **banner:** Allow action prop to accept ReactNode in addition to Action object ([#964](https://github.com/Doist/reactist/issues/964)) ([19625b3](https://github.com/Doist/reactist/commit/19625b3e28a14e2c38960325edfeb13aace0e2fe))
+- **banner:** Allow action prop to accept ReactNode in addition to Action object ([#964](https://github.com/Doist/reactist/issues/964)) ([19625b3](https://github.com/Doist/reactist/commit/19625b3e28a14e2c38960325edfeb13aace0e2fe))
 
 ## [28.6.0](https://github.com/Doist/reactist/compare/v28.5.4...v28.6.0) (2025-09-16)
 
-
 ### 🚀 Features
 
-* **tooltip:** Expose tooltip store via `forwardRef` for imperative control ([#960](https://github.com/Doist/reactist/issues/960)) ([20628ea](https://github.com/Doist/reactist/commit/20628eaed7bbbb362fd4a2d56167649dbc33c5c9))
+- **tooltip:** Expose tooltip store via `forwardRef` for imperative control ([#960](https://github.com/Doist/reactist/issues/960)) ([20628ea](https://github.com/Doist/reactist/commit/20628eaed7bbbb362fd4a2d56167649dbc33c5c9))
 
 ## [28.5.4](https://github.com/Doist/reactist/compare/v28.5.3...v28.5.4) (2025-09-16)
 
-
 ### 🐛 Bug Fixes
 
-* Prevent a controlled TextArea from expanding when autoExpand is false ([#947](https://github.com/Doist/reactist/issues/947)) ([c5a0eee](https://github.com/Doist/reactist/commit/c5a0eee54297667eff1745021a44023558b2bf48))
+- Prevent a controlled TextArea from expanding when autoExpand is false ([#947](https://github.com/Doist/reactist/issues/947)) ([c5a0eee](https://github.com/Doist/reactist/commit/c5a0eee54297667eff1745021a44023558b2bf48))
 
 ## [28.5.3](https://github.com/Doist/reactist/compare/v28.5.2...v28.5.3) (2025-09-08)
 
-
 ### 🐛 Bug Fixes
 
-* Smaller loader in `<Button>` component ([#945](https://github.com/Doist/reactist/issues/945)) ([01cad54](https://github.com/Doist/reactist/commit/01cad544c4bfba998a4bbd4349e7be21eb7c1343))
+- Smaller loader in `<Button>` component ([#945](https://github.com/Doist/reactist/issues/945)) ([01cad54](https://github.com/Doist/reactist/commit/01cad544c4bfba998a4bbd4349e7be21eb7c1343))
 
 ## [28.5.2](https://github.com/Doist/reactist/compare/v28.5.1...v28.5.2) (2025-08-12)
 
-
 ### 🧰 Maintenance
 
-* replace LESS styles with CSS modules for ProgressBar component ([#941](https://github.com/Doist/reactist/issues/941)) ([6097154](https://github.com/Doist/reactist/commit/6097154497af842bd8331aa2f8408e980f7378a7))
+- replace LESS styles with CSS modules for ProgressBar component ([#941](https://github.com/Doist/reactist/issues/941)) ([6097154](https://github.com/Doist/reactist/commit/6097154497af842bd8331aa2f8408e980f7378a7))
 
 ## [28.5.1](https://github.com/Doist/reactist/compare/v28.5.0...v28.5.1) (2025-08-12)
 
-
 ### 🐛 Bug Fixes
 
-* Enable banner with an Image to use container full width (with CSS vars) ([#939](https://github.com/Doist/reactist/issues/939)) ([2bf931c](https://github.com/Doist/reactist/commit/2bf931ca5c4ba5b6614708c67525791fd4d88234))
+- Enable banner with an Image to use container full width (with CSS vars) ([#939](https://github.com/Doist/reactist/issues/939)) ([2bf931c](https://github.com/Doist/reactist/commit/2bf931ca5c4ba5b6614708c67525791fd4d88234))
 
 ## [28.5.0](https://github.com/Doist/reactist/compare/v28.4.0...v28.5.0) (2025-08-05)
 
-
 ### 🚀 Features
 
-* implement overlay scroll functionality in Box component with custom scrollbar styles ([#937](https://github.com/Doist/reactist/issues/937)) ([ace2ef0](https://github.com/Doist/reactist/commit/ace2ef0207ec25d9df2ee07091fe5fc7aec47130))
-
+- implement overlay scroll functionality in Box component with custom scrollbar styles ([#937](https://github.com/Doist/reactist/issues/937)) ([ace2ef0](https://github.com/Doist/reactist/commit/ace2ef0207ec25d9df2ee07091fe5fc7aec47130))
 
 ### 🧰 Maintenance
 
-* **deps:** bump pbkdf2 from 3.0.17 to 3.1.3 ([#934](https://github.com/Doist/reactist/issues/934)) ([fa43bc8](https://github.com/Doist/reactist/commit/fa43bc81c119995e7d851271a59ddea46425fc7c))
+- **deps:** bump pbkdf2 from 3.0.17 to 3.1.3 ([#934](https://github.com/Doist/reactist/issues/934)) ([fa43bc8](https://github.com/Doist/reactist/commit/fa43bc81c119995e7d851271a59ddea46425fc7c))
 
 ## [28.4.0](https://github.com/Doist/reactist/compare/v28.3.2...v28.4.0) (2025-06-23)
 
-
 ### 🚀 Features
 
-* Add `dividers` prop to `Modal` to customize the weight for all dividers ([#932](https://github.com/Doist/reactist/issues/932)) ([d684e8e](https://github.com/Doist/reactist/commit/d684e8ec3d679494ab9e33232c6968f1952152ed))
-
+- Add `dividers` prop to `Modal` to customize the weight for all dividers ([#932](https://github.com/Doist/reactist/issues/932)) ([d684e8e](https://github.com/Doist/reactist/commit/d684e8ec3d679494ab9e33232c6968f1952152ed))
 
 ### 🐛 Bug Fixes
 
-* Update `BaseField` styling to match the form field spec ([#931](https://github.com/Doist/reactist/issues/931)) ([54d734f](https://github.com/Doist/reactist/commit/54d734f58503e125d62c322c12588605615e1eed))
+- Update `BaseField` styling to match the form field spec ([#931](https://github.com/Doist/reactist/issues/931)) ([54d734f](https://github.com/Doist/reactist/commit/54d734f58503e125d62c322c12588605615e1eed))
 
 ## [28.3.2](https://github.com/Doist/reactist/compare/v28.3.1...v28.3.2) (2025-06-16)
 
-
 ### 🐛 Bug Fixes
 
-* **Box:** Inherit `font-size` to prevent unintended typography overrides ([#928](https://github.com/Doist/reactist/issues/928)) ([1c2ea7a](https://github.com/Doist/reactist/commit/1c2ea7a6d189f1134efe9c8a06cbe403b99b08b5))
+- **Box:** Inherit `font-size` to prevent unintended typography overrides ([#928](https://github.com/Doist/reactist/issues/928)) ([1c2ea7a](https://github.com/Doist/reactist/commit/1c2ea7a6d189f1134efe9c8a06cbe403b99b08b5))
 
 ## [28.3.1](https://github.com/Doist/reactist/compare/v28.3.0...v28.3.1) (2025-05-27)
 
-
 ### 🐛 Bug Fixes
 
-* **base-field:** Don't unnecessarily render container below BaseField children ([#926](https://github.com/Doist/reactist/issues/926)) ([5e5bf39](https://github.com/Doist/reactist/commit/5e5bf39ca994e6861c26e242928add2ff0c2a2f5))
+- **base-field:** Don't unnecessarily render container below BaseField children ([#926](https://github.com/Doist/reactist/issues/926)) ([5e5bf39](https://github.com/Doist/reactist/commit/5e5bf39ca994e6861c26e242928add2ff0c2a2f5))
 
 ## [28.3.0](https://github.com/Doist/reactist/compare/v28.2.2...v28.3.0) (2025-05-27)
 
-
 ### 🚀 Features
 
-* **base-field:** Add CSS props for customizing label line-height and padding-bottom ([#925](https://github.com/Doist/reactist/issues/925)) ([12e99fd](https://github.com/Doist/reactist/commit/12e99fd673107c390952a5d375f692226ff4b5d9))
-
+- **base-field:** Add CSS props for customizing label line-height and padding-bottom ([#925](https://github.com/Doist/reactist/issues/925)) ([12e99fd](https://github.com/Doist/reactist/commit/12e99fd673107c390952a5d375f692226ff4b5d9))
 
 ### 🧰 Maintenance
 
-* Use approved versions of actions ([#923](https://github.com/Doist/reactist/issues/923)) ([680cac1](https://github.com/Doist/reactist/commit/680cac104b2e71835387c629b539681acb1ce54d))
+- Use approved versions of actions ([#923](https://github.com/Doist/reactist/issues/923)) ([680cac1](https://github.com/Doist/reactist/commit/680cac104b2e71835387c629b539681acb1ce54d))
 
 ## [28.2.2](https://github.com/Doist/reactist/compare/v28.2.1...v28.2.2) (2025-05-20)
 
-
 ### 🧰 Maintenance
 
-* **deps:** bump terser from 4.7.0 to 4.8.1 ([#674](https://github.com/Doist/reactist/issues/674)) ([eb7797c](https://github.com/Doist/reactist/commit/eb7797c48aade80004af352945cf3f02d4078f91))
+- **deps:** bump terser from 4.7.0 to 4.8.1 ([#674](https://github.com/Doist/reactist/issues/674)) ([eb7797c](https://github.com/Doist/reactist/commit/eb7797c48aade80004af352945cf3f02d4078f91))
 
 ## [28.2.1](https://github.com/Doist/reactist/compare/v28.2.0...v28.2.1) (2025-05-09)
 
-
 ### 🐛 Bug Fixes
 
-* Toasts can be auto-dismissed when concurrent mode is enabled ([#918](https://github.com/Doist/reactist/issues/918)) ([e10ef2a](https://github.com/Doist/reactist/commit/e10ef2a07d6fb95c80388c15c2eff50abaf25a52))
+- Toasts can be auto-dismissed when concurrent mode is enabled ([#918](https://github.com/Doist/reactist/issues/918)) ([e10ef2a](https://github.com/Doist/reactist/commit/e10ef2a07d6fb95c80388c15c2eff50abaf25a52))
 
 ## [28.2.0](https://github.com/Doist/reactist/compare/v28.1.2...v28.2.0) (2025-05-05)
 
-
 ### 🚀 Features
 
-* Expose closeToast in useToasts hook action object ([#914](https://github.com/Doist/reactist/issues/914)) ([7dad313](https://github.com/Doist/reactist/commit/7dad31302e314a6c73ad85e50b2a8bb947b39f5a))
+- Expose closeToast in useToasts hook action object ([#914](https://github.com/Doist/reactist/issues/914)) ([7dad313](https://github.com/Doist/reactist/commit/7dad31302e314a6c73ad85e50b2a8bb947b39f5a))
 
 ## [28.1.2](https://github.com/Doist/reactist/compare/v28.1.1...v28.1.2) (2025-04-30)
 
-
 ### 🐛 Bug Fixes
 
-* fix text area auto-expand when controlled ([#912](https://github.com/Doist/reactist/issues/912)) ([7d33744](https://github.com/Doist/reactist/commit/7d33744f6f0d05a739bd8a98a01ff055f21d121c))
+- fix text area auto-expand when controlled ([#912](https://github.com/Doist/reactist/issues/912)) ([7d33744](https://github.com/Doist/reactist/commit/7d33744f6f0d05a739bd8a98a01ff055f21d121c))
 
 ## [28.1.1](https://github.com/Doist/reactist/compare/v28.1.0...v28.1.1) (2025-04-22)
 
-
 ### 🐛 Bug Fixes
 
-* **Tabs:** Add resize observer for dynamic tab selection adjustments ([#909](https://github.com/Doist/reactist/issues/909)) ([1c0e07c](https://github.com/Doist/reactist/commit/1c0e07c78d33faa442e44233ecc961533a9b1b25))
+- **Tabs:** Add resize observer for dynamic tab selection adjustments ([#909](https://github.com/Doist/reactist/issues/909)) ([1c0e07c](https://github.com/Doist/reactist/commit/1c0e07c78d33faa442e44233ecc961533a9b1b25))
 
 ## [28.1.0](https://github.com/Doist/reactist/compare/v28.0.0...v28.1.0) (2025-04-17)
 
-
 ### 🚀 Features
 
-* Support tab font customization and fix hover style on disabled tabs ([#907](https://github.com/Doist/reactist/issues/907)) ([dc50f5b](https://github.com/Doist/reactist/commit/dc50f5b268ee5b1c322c7fc0011e36bbffba2712))
+- Support tab font customization and fix hover style on disabled tabs ([#907](https://github.com/Doist/reactist/issues/907)) ([dc50f5b](https://github.com/Doist/reactist/commit/dc50f5b268ee5b1c322c7fc0011e36bbffba2712))
 
 ## [28.0.0](https://github.com/Doist/reactist/compare/v27.5.0...v28.0.0) (2025-04-17)
 
-
 ### ⚠ BREAKING CHANGES
 
-* **Tabs:** Add support for additional customization settings ([#903](https://github.com/Doist/reactist/issues/903))
+- **Tabs:** Add support for additional customization settings ([#903](https://github.com/Doist/reactist/issues/903))
 
 ### 🚀 Features
 
-* **Tabs:** Add support for additional customization settings ([#903](https://github.com/Doist/reactist/issues/903)) ([7f60d81](https://github.com/Doist/reactist/commit/7f60d81ed41b1b94a3f0d36501eb769258cfa775))
+- **Tabs:** Add support for additional customization settings ([#903](https://github.com/Doist/reactist/issues/903)) ([7f60d81](https://github.com/Doist/reactist/commit/7f60d81ed41b1b94a3f0d36501eb769258cfa775))
 
 ## [27.5.0](https://github.com/Doist/reactist/compare/v27.4.0...v27.5.0) (2025-03-12)
 
-
 ### 🚀 Features
 
-* Allow positional placement of `endSlot` in `TextField` ([#899](https://github.com/Doist/reactist/issues/899)) ([abb4520](https://github.com/Doist/reactist/commit/abb4520b0688cf462d556d30d49ef164fad20bf4))
+- Allow positional placement of `endSlot` in `TextField` ([#899](https://github.com/Doist/reactist/issues/899)) ([abb4520](https://github.com/Doist/reactist/commit/abb4520b0688cf462d556d30d49ef164fad20bf4))
 
 ## [27.4.0](https://github.com/Doist/reactist/compare/v27.3.6...v27.4.0) (2025-02-19)
 
-
 ### 🚀 Features
 
-* **TextLink:** Add color and underline styling options ([#897](https://github.com/Doist/reactist/issues/897)) ([03017a8](https://github.com/Doist/reactist/commit/03017a86c17e43fda2e5438a3a32a8cd87cc8ff6))
+- **TextLink:** Add color and underline styling options ([#897](https://github.com/Doist/reactist/issues/897)) ([03017a8](https://github.com/Doist/reactist/commit/03017a86c17e43fda2e5438a3a32a8cd87cc8ff6))
 
 ## [27.3.6](https://github.com/Doist/reactist/compare/v27.3.5...v27.3.6) (2025-02-05)
 
-
 ### 🧰 Maintenance
 
-* bump deploy-pages action to v4 ([#895](https://github.com/Doist/reactist/issues/895)) ([98e68f1](https://github.com/Doist/reactist/commit/98e68f1e03bdae3642ae19f606b4a8d3b597efef))
+- bump deploy-pages action to v4 ([#895](https://github.com/Doist/reactist/issues/895)) ([98e68f1](https://github.com/Doist/reactist/commit/98e68f1e03bdae3642ae19f606b4a8d3b597efef))
 
 ## [27.3.5](https://github.com/Doist/reactist/compare/v27.3.4...v27.3.5) (2025-02-05)
 
-
 ### 🧰 Maintenance
 
-* allow publish workflow to run from workflow_dispatch event ([#894](https://github.com/Doist/reactist/issues/894)) ([4204756](https://github.com/Doist/reactist/commit/4204756505e4f9c2e679e69b9f3872251a9077d7))
-* fix version of upload-pages-artifact action ([#892](https://github.com/Doist/reactist/issues/892)) ([d9dba34](https://github.com/Doist/reactist/commit/d9dba34f2d66ad283372880e7b957b3384bcf98e))
+- allow publish workflow to run from workflow_dispatch event ([#894](https://github.com/Doist/reactist/issues/894)) ([4204756](https://github.com/Doist/reactist/commit/4204756505e4f9c2e679e69b9f3872251a9077d7))
+- fix version of upload-pages-artifact action ([#892](https://github.com/Doist/reactist/issues/892)) ([d9dba34](https://github.com/Doist/reactist/commit/d9dba34f2d66ad283372880e7b957b3384bcf98e))
 
 ## [27.3.4](https://github.com/Doist/reactist/compare/v27.3.3...v27.3.4) (2025-02-05)
 
-
 ### 🧰 Maintenance
 
-* add permissions to dispatch workflows in release-please ([#890](https://github.com/Doist/reactist/issues/890)) ([6509b01](https://github.com/Doist/reactist/commit/6509b01fdb5262b30019be598569eb9e8a8b01cf))
+- add permissions to dispatch workflows in release-please ([#890](https://github.com/Doist/reactist/issues/890)) ([6509b01](https://github.com/Doist/reactist/commit/6509b01fdb5262b30019be598569eb9e8a8b01cf))
 
 ## [27.3.3](https://github.com/Doist/reactist/compare/v27.3.2...v27.3.3) (2025-02-05)
 
-
 ### 🧰 Maintenance
 
-* debug GH API 404 error ([#888](https://github.com/Doist/reactist/issues/888)) ([690676d](https://github.com/Doist/reactist/commit/690676d58db401f88ace4a4de8e1d8d67264355c))
+- debug GH API 404 error ([#888](https://github.com/Doist/reactist/issues/888)) ([690676d](https://github.com/Doist/reactist/commit/690676d58db401f88ace4a4de8e1d8d67264355c))
 
 ## [27.3.2](https://github.com/Doist/reactist/compare/v27.3.1...v27.3.2) (2025-02-05)
 
-
 ### 🧰 Maintenance
 
-* enhance release workflow with automatic deployment triggers ([#886](https://github.com/Doist/reactist/issues/886)) ([d32d336](https://github.com/Doist/reactist/commit/d32d336d3657553dc2defe140b0002acdcbcea6c))
+- enhance release workflow with automatic deployment triggers ([#886](https://github.com/Doist/reactist/issues/886)) ([d32d336](https://github.com/Doist/reactist/commit/d32d336d3657553dc2defe140b0002acdcbcea6c))
 
 ## [27.3.1](https://github.com/Doist/reactist/compare/v27.3.0...v27.3.1) (2025-02-05)
 
-
 ### 🧰 Maintenance
 
-* update Storybook deployment action to v4 ([#885](https://github.com/Doist/reactist/issues/885)) ([e8d57f3](https://github.com/Doist/reactist/commit/e8d57f3697c78e35f0304db69f10b42a7d5f5a4a))
+- update Storybook deployment action to v4 ([#885](https://github.com/Doist/reactist/issues/885)) ([e8d57f3](https://github.com/Doist/reactist/commit/e8d57f3697c78e35f0304db69f10b42a7d5f5a4a))
 
 ## [27.3.0](https://github.com/Doist/reactist/compare/v27.2.2...v27.3.0) (2025-01-31)
 
-
 ### 🚀 Features
 
-* **TextField:** add support for customizable character count position ([#883](https://github.com/Doist/reactist/issues/883)) ([7359aa4](https://github.com/Doist/reactist/commit/7359aa424d17d2a10ccd4d241e2e8ca53d3bab8d))
-
+- **TextField:** add support for customizable character count position ([#883](https://github.com/Doist/reactist/issues/883)) ([7359aa4](https://github.com/Doist/reactist/commit/7359aa424d17d2a10ccd4d241e2e8ca53d3bab8d))
 
 ### 🐛 Bug Fixes
 
-* **TextField:** adjust character count threshold to zero ([#882](https://github.com/Doist/reactist/issues/882)) ([6292d06](https://github.com/Doist/reactist/commit/6292d0677fdfb2c703613df24d73f01e96d21e6e))
-
+- **TextField:** adjust character count threshold to zero ([#882](https://github.com/Doist/reactist/issues/882)) ([6292d06](https://github.com/Doist/reactist/commit/6292d0677fdfb2c703613df24d73f01e96d21e6e))
 
 ### 🧰 Maintenance
 
-* deploy storybook only when publishing package ([#878](https://github.com/Doist/reactist/issues/878)) ([1668f8c](https://github.com/Doist/reactist/commit/1668f8c1797232998cc94b26d4435c95b6adda80))
-* fix dependabot config syntax ([#879](https://github.com/Doist/reactist/issues/879)) ([89ddb9a](https://github.com/Doist/reactist/commit/89ddb9ae01c4680add19574ebaa8f1e987c00a8d))
+- deploy storybook only when publishing package ([#878](https://github.com/Doist/reactist/issues/878)) ([1668f8c](https://github.com/Doist/reactist/commit/1668f8c1797232998cc94b26d4435c95b6adda80))
+- fix dependabot config syntax ([#879](https://github.com/Doist/reactist/issues/879)) ([89ddb9a](https://github.com/Doist/reactist/commit/89ddb9ae01c4680add19574ebaa8f1e987c00a8d))
 
 ## [27.2.2](https://github.com/Doist/reactist/compare/v27.2.1...v27.2.2) (2025-01-22)
 
-
 ### 🧰 Maintenance
 
-* change dependabot commit prefix ([#871](https://github.com/Doist/reactist/issues/871)) ([f2e786f](https://github.com/Doist/reactist/commit/f2e786f7255323395090ba4605b19b2c09e11942))
-* **deps:** bump decode-uri-component from 0.2.0 to 0.2.2 ([#721](https://github.com/Doist/reactist/issues/721)) ([e4e0c3f](https://github.com/Doist/reactist/commit/e4e0c3f3ef8eebc20160209c88958cd1d82ed7bd))
-* **deps:** bump loader-utils from 1.4.0 to 1.4.2 ([#713](https://github.com/Doist/reactist/issues/713)) ([c21c8a8](https://github.com/Doist/reactist/commit/c21c8a8adbfd514ebeaa304a081b336aff515efb))
-* **deps:** bump shelljs from 0.8.4 to 0.8.5 ([#627](https://github.com/Doist/reactist/issues/627)) ([436747f](https://github.com/Doist/reactist/commit/436747f08827aa4455c42482a9234ebb50d19914))
-* implement release-please to automate release creation ([#863](https://github.com/Doist/reactist/issues/863)) ([7f5f754](https://github.com/Doist/reactist/commit/7f5f7549cf6f0541f3317fb41db42d7df09d48aa))
-* include all changes in release creation ([#870](https://github.com/Doist/reactist/issues/870)) ([da74067](https://github.com/Doist/reactist/commit/da74067f954bfd6ea3fae8bd2ba236813b2682dd))
-* migrate to latest release-please action ([#874](https://github.com/Doist/reactist/issues/874)) ([7ab6aec](https://github.com/Doist/reactist/commit/7ab6aeca921832d76bf95551840ecba6b53d6681))
-* set target-branch to release-please action ([#872](https://github.com/Doist/reactist/issues/872)) ([dde0fff](https://github.com/Doist/reactist/commit/dde0fff1288d24f44edf82dd799419685de6a4c7))
-* unify existing changelog content format ([#876](https://github.com/Doist/reactist/issues/876)) ([9cc1be2](https://github.com/Doist/reactist/commit/9cc1be2c6e583834e62c6126f2b8a351a384f7db))
+- change dependabot commit prefix ([#871](https://github.com/Doist/reactist/issues/871)) ([f2e786f](https://github.com/Doist/reactist/commit/f2e786f7255323395090ba4605b19b2c09e11942))
+- **deps:** bump decode-uri-component from 0.2.0 to 0.2.2 ([#721](https://github.com/Doist/reactist/issues/721)) ([e4e0c3f](https://github.com/Doist/reactist/commit/e4e0c3f3ef8eebc20160209c88958cd1d82ed7bd))
+- **deps:** bump loader-utils from 1.4.0 to 1.4.2 ([#713](https://github.com/Doist/reactist/issues/713)) ([c21c8a8](https://github.com/Doist/reactist/commit/c21c8a8adbfd514ebeaa304a081b336aff515efb))
+- **deps:** bump shelljs from 0.8.4 to 0.8.5 ([#627](https://github.com/Doist/reactist/issues/627)) ([436747f](https://github.com/Doist/reactist/commit/436747f08827aa4455c42482a9234ebb50d19914))
+- implement release-please to automate release creation ([#863](https://github.com/Doist/reactist/issues/863)) ([7f5f754](https://github.com/Doist/reactist/commit/7f5f7549cf6f0541f3317fb41db42d7df09d48aa))
+- include all changes in release creation ([#870](https://github.com/Doist/reactist/issues/870)) ([da74067](https://github.com/Doist/reactist/commit/da74067f954bfd6ea3fae8bd2ba236813b2682dd))
+- migrate to latest release-please action ([#874](https://github.com/Doist/reactist/issues/874)) ([7ab6aec](https://github.com/Doist/reactist/commit/7ab6aeca921832d76bf95551840ecba6b53d6681))
+- set target-branch to release-please action ([#872](https://github.com/Doist/reactist/issues/872)) ([dde0fff](https://github.com/Doist/reactist/commit/dde0fff1288d24f44edf82dd799419685de6a4c7))
+- unify existing changelog content format ([#876](https://github.com/Doist/reactist/issues/876)) ([9cc1be2](https://github.com/Doist/reactist/commit/9cc1be2c6e583834e62c6126f2b8a351a384f7db))
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
 **27.2.1:**
 
--   [Fix] ensure TextLink styles are applied to nested elements [#860](https://github.com/Doist/reactist/pull/860)
+- [Fix] ensure TextLink styles are applied to nested elements [#860](https://github.com/Doist/reactist/pull/860)
 
 **27.2.0:**
 
--   [Feat] Document `TextLink` component in Storybook and change default styling.
+- [Feat] Document `TextLink` component in Storybook and change default styling.
 
 **27.1.0:**
 
--   [Feat] Expose CSS variables for customizng the icon color of the `Banner` component system types.
+- [Feat] Expose CSS variables for customizng the icon color of the `Banner` component system types.
 
 **27.0.1:**
 
--   [Docs] Document the `maxLength` prop for the `TextField` component.
+- [Docs] Document the `maxLength` prop for the `TextField` component.
 
 **27.0.0:**
 
--   [BREAKING] Remove `Alert` component.
--   [BREAKING] Update `Banner` UI, merging `Alert` use cases.
+- [BREAKING] Remove `Alert` component.
+- [BREAKING] Update `Banner` UI, merging `Alert` use cases.
 
 **26.2.5:**
 
--   [Fix] Add top and bottom paddings to the `Tab` component.
--   [Fix] `SubMenu` will only render at the bottom when there isn't enough space in either side of the parent menu.
+- [Fix] Add top and bottom paddings to the `Tab` component.
+- [Fix] `SubMenu` will only render at the bottom when there isn't enough space in either side of the parent menu.
 
 **26.2.4:**
 
--   [Fix] The `Prose` component's horizontal rule color is now properly set to the primary divider color.
+- [Fix] The `Prose` component's horizontal rule color is now properly set to the primary divider color.
 
 **26.2.3:**
 
--   [Fix] The `Tab` component's line height is now properly set to 21px.
+- [Fix] The `Tab` component's line height is now properly set to 21px.
 
 **26.2.2:**
 
--   [Fix] Vertically align the `Notice` component's icon with the first line of text
+- [Fix] Vertically align the `Notice` component's icon with the first line of text
 
 **26.2.1:**
 
--   [Fix] Export `TooltipProvider` as a component
+- [Fix] Export `TooltipProvider` as a component
 
 **26.2.0:**
 
--   [Feat] Add `TooltipContext` to allow `showTimeout` and `hideTimeout` to be set globally
+- [Feat] Add `TooltipContext` to allow `showTimeout` and `hideTimeout` to be set globally
 
 **v26.1.0:**
 
--   [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip`
--   [Fix] The center alignment between the `Alert` component's icon and message is now more accurate when the message is only one-line long.
--   [Fix] Render submenus at the bottom when there isn't enough space
+- [Feat] Expose `showTimeout` and `hideTimeout` props for `Tooltip`
+- [Fix] The center alignment between the `Alert` component's icon and message is now more accurate when the message is only one-line long.
+- [Fix] Render submenus at the bottom when there isn't enough space
 
 **v26.0.0:**
 
--   [BREAKING] Remove unused `secondaryLabel` from `TexTfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
--   [BREAKING] Remove `hint` from from `Textfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
-    -   Please use `message` instead.
--   [Feat] Update read only style for `TextField` and `TextArea` when `readOnly` is `true`.
--   [Feat] Add `disableResize` option to `TextArea` to disallow manual resizing.
--   [Feat] Add character count (with limit) to `TextField` and `TextArea`.
-    -   Will show a character count indicator below the field when `maxLength` is set.
--   [Feat] Add `endSlot` support to `PasswordField`.
--   [Chore] Deprecate `auxiliaryLabel` from `TexTfield`, `PasswordField`, `SelectField`, and `TextArea`.
+- [BREAKING] Remove unused `secondaryLabel` from `TexTfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
+- [BREAKING] Remove `hint` from from `Textfield`, `PasswordField`, `SelectField`, `TextArea`, and `SwitchField`.
+    - Please use `message` instead.
+- [Feat] Update read only style for `TextField` and `TextArea` when `readOnly` is `true`.
+- [Feat] Add `disableResize` option to `TextArea` to disallow manual resizing.
+- [Feat] Add character count (with limit) to `TextField` and `TextArea`.
+    - Will show a character count indicator below the field when `maxLength` is set.
+- [Feat] Add `endSlot` support to `PasswordField`.
+- [Chore] Deprecate `auxiliaryLabel` from `TexTfield`, `PasswordField`, `SelectField`, and `TextArea`.
 
 **v25.2.0:**
 
--   [Feat] Add `ref` support to `ModalBody` component
+- [Feat] Add `ref` support to `ModalBody` component
 
 **v25.1.1:**
 
--   [Fix] Restrict focus locking in the `Modal` component to its containing document/iframe.
+- [Fix] Restrict focus locking in the `Modal` component to its containing document/iframe.
 
 **v25.1.0:**
 
--   [Feat] Add `xsmall` size to the `Modal` component
+- [Feat] Add `xsmall` size to the `Modal` component
 
 **v25.0.0:**
 
--   [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
--   [BREAKING] Remove unsupported `onPointerEnterCapture` and `onPointerLeaveCapture` props from `heading`-, `input`-, and `textarea`-based components.
--   [BREAKING] Removed the `ButtonLink` component.
--   [BREAKING] `Button` no longer accepts props that render it as an icon-only button.
--   [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components).
--   [BREAKING] `TabPanel`'s prop `render` is renamed to `renderMode`.
--   [Feat] Introduce a new `IconButton` component.
--   [Feat] The `Button` and `IconButton` component can be rendered as a link using the `render={<Link to="…" />} prop.
+- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
+- [BREAKING] Remove unsupported `onPointerEnterCapture` and `onPointerLeaveCapture` props from `heading`-, `input`-, and `textarea`-based components.
+- [BREAKING] Removed the `ButtonLink` component.
+- [BREAKING] `Button` no longer accepts props that render it as an icon-only button.
+- [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components).
+- [BREAKING] `TabPanel`'s prop `render` is renamed to `renderMode`.
+- [Feat] Introduce a new `IconButton` component.
+- [Feat] The `Button` and `IconButton` component can be rendered as a link using the `render={<Link to="…" />} prop.
 
 **v25.0.0-beta.3:**
 
--   [Fix] Allow more props to be forwarded to the `Tab` component.
--   [Fix] Properly fix CSS build in tsdx config.
--   [Chore] Upgrade to `@ariakit/react@0.4.5`.
+- [Fix] Allow more props to be forwarded to the `Tab` component.
+- [Fix] Properly fix CSS build in tsdx config.
+- [Chore] Upgrade to `@ariakit/react@0.4.5`.
 
 **v25.0.0-beta.2:**
 
--   [Fix] Pass `onClick` to the `Tab` component.
+- [Fix] Pass `onClick` to the `Tab` component.
 
 **v25.0.0-beta.1:**
 
--   [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components).
--   [BREAKING] `TabPanel`'s prop `render` is renamed to `renderMode`.
+- [BREAKING] Use an explicit `render` prop for composition, instead of the `as` prop (in the menu, modal, tabs, toasts and tooltip components).
+- [BREAKING] `TabPanel`'s prop `render` is renamed to `renderMode`.
 
 **v25.0.0-beta:**
 
--   [BREAKING] Removed the `ButtonLink` component.
--   [BREAKING] `Button` no longer accepts props that render it as an icon-only button.
--   [Feat] Introduce a new `IconButton` component.
--   [Feat] The `Button` and `IconButton` component can be rendered as a link using the `render={<Link to="…" />} prop.
+- [BREAKING] Removed the `ButtonLink` component.
+- [BREAKING] `Button` no longer accepts props that render it as an icon-only button.
+- [Feat] Introduce a new `IconButton` component.
+- [Feat] The `Button` and `IconButton` component can be rendered as a link using the `render={<Link to="…" />} prop.
 
 **v24.2.0-beta:**
 
--   [Fix] Include changes from [v23.3.0](#v2330) in the beta release
+- [Fix] Include changes from [v23.3.0](#v2330) in the beta release
 
 **v24.1.5-beta:**
 
--   [Fix] Include changes from [v23.2.2](#v2322) in the beta release
+- [Fix] Include changes from [v23.2.2](#v2322) in the beta release
 
 **v24.1.4-beta:**
 
--   [Fix] Include changes from [v23.2.1](#v2321) in the beta release
+- [Fix] Include changes from [v23.2.1](#v2321) in the beta release
 
 **v24.1.3-beta:**
 
--   [Fix] Remove unsupported `onPointerEnterCapture` and `onPointerLeaveCapture` props from `heading`-, `input`-, and `textarea`-based components.
--   Normally, this would be considered a breaking change, but the v24 version is still pre-release and already contains breaking changes.
+- [Fix] Remove unsupported `onPointerEnterCapture` and `onPointerLeaveCapture` props from `heading`-, `input`-, and `textarea`-based components.
+- Normally, this would be considered a breaking change, but the v24 version is still pre-release and already contains breaking changes.
 
 **v24.1.2-beta:**
 
--   [Fix] Reset anchor rect after context menu is closed.
--   [Fix] Revert earlier attempt to auto-close menus when they lose focus.
+- [Fix] Reset anchor rect after context menu is closed.
+- [Fix] Revert earlier attempt to auto-close menus when they lose focus.
 
 **v24.1.1-beta:**
 
--   [Fix] It was possible to leave a tooltip in a state in which it remained visible all the time. This release fixes the issue.
--   [Fix] Auto-close menus when they lose focus to elements other than their own content or their sub-menus.
+- [Fix] It was possible to leave a tooltip in a state in which it remained visible all the time. This release fixes the issue.
+- [Fix] Auto-close menus when they lose focus to elements other than their own content or their sub-menus.
 
 **v24.1.0-beta:**
 
--   [Feat] Include changes from [v23.2.0](#v2320) in the beta release
+- [Feat] Include changes from [v23.2.0](#v2320) in the beta release
 
 **v24.0.0-beta:**
 
--   [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
+- [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react
 
 **v23.3.0:**
 
--   [Feat] Add `warning` as a `tone` option for `Badge`.
+- [Feat] Add `warning` as a `tone` option for `Badge`.
 
 **v23.2.2:**
 
--   [Fix] Revert "Adjust modal alignment to the middle of the viewport at `800px` breakpoint for improved UX". Turns out that this is not something that we want to do.
+- [Fix] Revert "Adjust modal alignment to the middle of the viewport at `800px` breakpoint for improved UX". Turns out that this is not something that we want to do.
 
 **v23.2.1:**
 
--   [Fix] Adjust modal alignment to the middle of the viewport at `800px` breakpoint for improved UX.
+- [Fix] Adjust modal alignment to the middle of the viewport at `800px` breakpoint for improved UX.
 
 **v23.2.0:**
 
--   [Feat] Add `medium` as a `weight` option for `Header`.
+- [Feat] Add `medium` as a `weight` option for `Header`.
 
 **v23.1.0:**
 
--   [Feat] Add `--reactist-font-family-monospace` with updated font family for monospace elements
+- [Feat] Add `--reactist-font-family-monospace` with updated font family for monospace elements
 
 **v23.0.0:**
 
--   [BREAKING] Remove unsupported `crossOrigin` attribute from `input`- and `textarea`-based components.
--   [BREAKING] Remove unsupported `placeholder` attribute from heading components.
+- [BREAKING] Remove unsupported `crossOrigin` attribute from `input`- and `textarea`-based components.
+- [BREAKING] Remove unsupported `placeholder` attribute from heading components.
 
 **v22.3.3:**
 
--   [Fix] Vertical alignment of inline code elements inside a `Prose` component
+- [Fix] Vertical alignment of inline code elements inside a `Prose` component
 
 **v22.3.2:**
 
--   [Fix] Text inside a `Badge` no longer wraps into multiple lines.
+- [Fix] Text inside a `Badge` no longer wraps into multiple lines.
 
 **v22.3.1:**
 
--   [Tweak] Increase showing tooltip delay to 1 second from 500ms
+- [Tweak] Increase showing tooltip delay to 1 second from 500ms
 
 **v22.3.0:**
 
--   [Build] Add support for Node v21
+- [Build] Add support for Node v21
 
 **v22.2.0:**
 
--   [Feat] The `Alert` component now has a new design. Input based components will now also expose a `--reactist-inputs-alert` CSS variable to customize their border colours when put into an error state
+- [Feat] The `Alert` component now has a new design. Input based components will now also expose a `--reactist-inputs-alert` CSS variable to customize their border colours when put into an error state
 
 **v22.1.0:**
 
--   [Build] Add support for Node v20 and npm v10
+- [Build] Add support for Node v20 and npm v10
 
 **v22.0.0:**
 
--   [BREAKING] Remove `DeprecatedModal`.
+- [BREAKING] Remove `DeprecatedModal`.
 
 **v21.3.0:**
 
--   [Feat] `ToastProvider` accepts an optional `containerClassName` property, which let's you to add your own class for the container of all toasts.
+- [Feat] `ToastProvider` accepts an optional `containerClassName` property, which let's you to add your own class for the container of all toasts.
 
 **v21.2.3:**
 
--   [Fix] Prevent horizontal expansion of `TextArea` with `autoExpand={true}`.
+- [Fix] Prevent horizontal expansion of `TextArea` with `autoExpand={true}`.
 
 **v21.2.2:**
 
--   [Docs] Fix links to Reactist components in storybook stories.
+- [Docs] Fix links to Reactist components in storybook stories.
 
 **v21.2.1:**
 
--   [Docs] Fix links to Reactist components in storybook stories.
+- [Docs] Fix links to Reactist components in storybook stories.
 
 **v21.2.0:**
 
--   [Feat] `Textfield`, `PasswordField`, `SelectField`, and `TextArea` will now use two new CSS variables to define their border colors: `--reactist-inputs-focus`, `--reactist-inputs-idle`. If they were previously set using `--reactist-divider-primary` and `--reactist-divider-secondary`, they will continue to work as well.
+- [Feat] `Textfield`, `PasswordField`, `SelectField`, and `TextArea` will now use two new CSS variables to define their border colors: `--reactist-inputs-focus`, `--reactist-inputs-idle`. If they were previously set using `--reactist-divider-primary` and `--reactist-divider-secondary`, they will continue to work as well.
 
 **v21.1.1:**
 
--   [Fix] Using a menu both triggered by a button and by right-click.
+- [Fix] Using a menu both triggered by a button and by right-click.
 
 **v21.1.0:**
 
--   [Feat] The `Prose` component now supports links applied to inline code.
+- [Feat] The `Prose` component now supports links applied to inline code.
 
 **v21.0.2:**
 
--   [Fix] `Tabslist`'s default space `space='xsmall'` is removed to get rid of unnecessary gap between tabs.
+- [Fix] `Tabslist`'s default space `space='xsmall'` is removed to get rid of unnecessary gap between tabs.
 
 **v21.0.1:**
 
--   [Fix] `TextArea` with `autoExpand={true}` applies it initially, acknowledging any initial value that the field may have.
--   [Fix] Avoid tooltip re-creating the anchor element when the tooltip content switches being present or not.
+- [Fix] `TextArea` with `autoExpand={true}` applies it initially, acknowledging any initial value that the field may have.
+- [Fix] Avoid tooltip re-creating the anchor element when the tooltip content switches being present or not.
 
 **v21.0.0:**
 
--   [BREAKING] `TextField`'s `startIcon` property is now renamed `startSlot`.
--   [Feat] New `startSlot` and `endSlot` props on the `TextField` component. These support rendering not only icons, but buttons too.
--   [Fix] `TextField`'s `startSlot` is now properly aligned when using `variant="bordered"`.
--   [Fix] `TextField` is now properly focused when clicking anywhere inside its bordered area.
--   [Tweak] `PasswordField`'s toggle visibility button is now implemented by using the `TextField`'s `endSlot` feature.
+- [BREAKING] `TextField`'s `startIcon` property is now renamed `startSlot`.
+- [Feat] New `startSlot` and `endSlot` props on the `TextField` component. These support rendering not only icons, but buttons too.
+- [Fix] `TextField`'s `startSlot` is now properly aligned when using `variant="bordered"`.
+- [Fix] `TextField` is now properly focused when clicking anywhere inside its bordered area.
+- [Tweak] `PasswordField`'s toggle visibility button is now implemented by using the `TextField`'s `endSlot` feature.
 
 **v20.3.0:**
 
--   [Feat] Toasts wrapped in `ToastsProvider` are now dismissed when their action `onClick` handler fires.
+- [Feat] Toasts wrapped in `ToastsProvider` are now dismissed when their action `onClick` handler fires.
 
 **v20.2.0:**
 
--   [Feat] Expose CSS variables for theming the `SwitchField` component.
+- [Feat] Expose CSS variables for theming the `SwitchField` component.
 
 **v20.1.0:**
 
--   [Feat] New `Prose` component to style free-form HTML content consistently.
+- [Feat] New `Prose` component to style free-form HTML content consistently.
 
 **v20.0.3:**
 
--   [Fix] Slightly tweak the height of the `Badge` component.
+- [Fix] Slightly tweak the height of the `Badge` component.
 
 **v20.0.2:**
 
--   [Fix] Slightly tweak the height of the `Badge` component.
+- [Fix] Slightly tweak the height of the `Badge` component.
 
 **v20.0.1:**
 
--   [Fix] `Badge` component content is now bold and the appropriate line-height is enforced.
+- [Fix] `Badge` component content is now bold and the appropriate line-height is enforced.
 
 **v20.0.0:**
 
--   [BREAKING] Remove `usePrevious` hook
--   [BREAKING] Remove `DeprecatedNotification` component
--   [BREAKING] The `Menu` component now uses Reactist CSS variables to style itself
+- [BREAKING] Remove `usePrevious` hook
+- [BREAKING] Remove `DeprecatedNotification` component
+- [BREAKING] The `Menu` component now uses Reactist CSS variables to style itself
 
 **v19.1.1:**
 
--   [Fix] Export new `Banner` component.
+- [Fix] Export new `Banner` component.
 
 **v19.1.0:**
 
--   [Feat] A new `Banner` component.
+- [Feat] A new `Banner` component.
 
 **v19.0.1:**
 
--   [Fix] `Tooltip`s can now have its z-index customized using the `--reactist-stacking-order-tooltip` custom property.
--   [Fix] `Tooltip`s now have a 300px max-width.
+- [Fix] `Tooltip`s can now have its z-index customized using the `--reactist-stacking-order-tooltip` custom property.
+- [Fix] `Tooltip`s now have a 300px max-width.
 
 **v19.0.0:**
 
--   [BREAKING] A new `Badge` component with various breaking changes
-    -   The prop `variant` has been renamed to `tone`
-    -   The new possible set of tones is different from the variants previously supported
-    -   New CSS custom properties to control the `Badge`'s component appearance (tones and font size)
-    -   The badge label is now provided via a `label` prop instead of via `children`
--   [BREAKING] Update `ariakit` to [next.43](https://github.com/ariakit/ariakit/blob/main/packages/ariakit/CHANGELOG.md#200-next43) and `ariakit-utils` to [next.27](https://github.com/ariakit/ariakit/blob/main/packages/ariakit-utils/CHANGELOG.md#0170-next27). Depending on your set up, `node_modules/ariakit*` dependencies may need to be transpiled.
--   [BREAKING] `Menu` will now render in modal mode by default. This can be turned off by passing `modal={false}` to `MenuList`.
+- [BREAKING] A new `Badge` component with various breaking changes
+    - The prop `variant` has been renamed to `tone`
+    - The new possible set of tones is different from the variants previously supported
+    - New CSS custom properties to control the `Badge`'s component appearance (tones and font size)
+    - The badge label is now provided via a `label` prop instead of via `children`
+- [BREAKING] Update `ariakit` to [next.43](https://github.com/ariakit/ariakit/blob/main/packages/ariakit/CHANGELOG.md#200-next43) and `ariakit-utils` to [next.27](https://github.com/ariakit/ariakit/blob/main/packages/ariakit-utils/CHANGELOG.md#0170-next27). Depending on your set up, `node_modules/ariakit*` dependencies may need to be transpiled.
+- [BREAKING] `Menu` will now render in modal mode by default. This can be turned off by passing `modal={false}` to `MenuList`.
 
 **v18.0.0:**
 
--   [BREAKING] Renames the CSS variable for primary text content inside toasts and tooltip. Previous name was `--reactist-content-toast`, now replaced with the new name `--reactist-toast-content-primary`.
--   [Feat] New CSS variable to control the color of secondary text inside toasts and tooltip: `--reactist-toast-content-secondary`.
--   [BREAKING] The `Tooltip` component no longer accepts generic props to be forwarded as generic HTML attributes to the tooltip content container. In particular, it no longer accepts a `className` to customize its appearance.
--   [Tweak] Modernizes the implementation of the tooltip, specifically by making it based on the new styling approach based on CSS variables.
--   [Feat] Adds the ability to render tooltips with an arrow-like element pointing to the trigger element.
--   [Fix] The tooltip content is set as the accessible description of the trigger element.
+- [BREAKING] Renames the CSS variable for primary text content inside toasts and tooltip. Previous name was `--reactist-content-toast`, now replaced with the new name `--reactist-toast-content-primary`.
+- [Feat] New CSS variable to control the color of secondary text inside toasts and tooltip: `--reactist-toast-content-secondary`.
+- [BREAKING] The `Tooltip` component no longer accepts generic props to be forwarded as generic HTML attributes to the tooltip content container. In particular, it no longer accepts a `className` to customize its appearance.
+- [Tweak] Modernizes the implementation of the tooltip, specifically by making it based on the new styling approach based on CSS variables.
+- [Feat] Adds the ability to render tooltips with an arrow-like element pointing to the trigger element.
+- [Fix] The tooltip content is set as the accessible description of the trigger element.
 
 **v17.10.1:**
 
--   [Fix] Ensure that any element inside a `Button` or `ButtonLink` is non-clickable, to facilitate event tracking with tools such as Google Analytics.
+- [Fix] Ensure that any element inside a `Button` or `ButtonLink` is non-clickable, to facilitate event tracking with tools such as Google Analytics.
 
 **v17.10.0:**
 
--   [Feat] Passing `autoExpand` to the `TextArea` component makes it auto-expand its height to fit the content as you type.
--   [Feat] The `TextArea` component now supports receiving a ref that's forwarded to the `textarea` element.
+- [Feat] Passing `autoExpand` to the `TextArea` component makes it auto-expand its height to fit the content as you type.
+- [Feat] The `TextArea` component now supports receiving a ref that's forwarded to the `textarea` element.
 
 **v17.9.1:**
 
--   [Fix] Tabs layout got broken after the `Inline` element switched to use `gap` for spacing.
+- [Fix] Tabs layout got broken after the `Inline` element switched to use `gap` for spacing.
 
 **v17.9.0:**
 
--   [Feat] New `gap` prop in the `Box` component, implementing support for the CSS `gap` property.
--   [Tweak] Use CSS `gap` for implementing spacing in the `Columns`, `Inline`, and `Stack` components.
+- [Feat] New `gap` prop in the `Box` component, implementing support for the CSS `gap` property.
+- [Tweak] Use CSS `gap` for implementing spacing in the `Columns`, `Inline`, and `Stack` components.
 
 **v17.8.1:**
 
--   [Fix] When clicking inside a modal, holding and releasing the click outside the modal no longer closes the modal
+- [Fix] When clicking inside a modal, holding and releasing the click outside the modal no longer closes the modal
 
 **v17.8.0:**
 
--   [Feat] New `Modal` prop `portalElement`, to enable consumers of the `Modal` component to have some control on where the modal portal is rendered.
--   [Feat] The `Badge` component now renders as an inline element, which makes it more versatile in common situations when it's needed. For instance, to render it inside other elements such as buttons, links, etc.
+- [Feat] New `Modal` prop `portalElement`, to enable consumers of the `Modal` component to have some control on where the modal portal is rendered.
+- [Feat] The `Badge` component now renders as an inline element, which makes it more versatile in common situations when it's needed. For instance, to render it inside other elements such as buttons, links, etc.
 
 **v17.7.0:**
 
--   [Feat] Add `startIcon` support to `TextField`
+- [Feat] Add `startIcon` support to `TextField`
 
 **v17.6.0:**
 
--   [Tweak] Upgrade Ariakit version to 2.0.0-next.30
+- [Tweak] Upgrade Ariakit version to 2.0.0-next.30
 
 **v17.5.0:**
 
--   [Feat] Add `variant` prop support to `SelectField` component.
+- [Feat] Add `variant` prop support to `SelectField` component.
 
 **v17.4.0:**
 
--   [Feat] Add support for controlling whether a `Modal` can be dismissed by pressing `Escape` or with a click event on the modal overlay.
+- [Feat] Add support for controlling whether a `Modal` can be dismissed by pressing `Escape` or with a click event on the modal overlay.
 
 **v17.3.0:**
 
--   [Fix] Enforce standard padding in the `CheckboxField` component and accept an `icon` attribute
+- [Fix] Enforce standard padding in the `CheckboxField` component and accept an `icon` attribute
 
 **v17.2.0:**
 
--   [Feat] Add support for providing a class to a `Modal` overlay
+- [Feat] Add support for providing a class to a `Modal` overlay
 
 **v17.1.0:**
 
--   [Feat] Add support for `Menu` as a context menu
--   [Fix] Allow `SubMenu`s to be rendered and support keyboard navigation
+- [Feat] Add support for `Menu` as a context menu
+- [Fix] Allow `SubMenu`s to be rendered and support keyboard navigation
 
 **v17.0.1:**
 
--   [Fix] Enforce minimum width for the checkbox icon in the `CheckboxField` component
+- [Fix] Enforce minimum width for the checkbox icon in the `CheckboxField` component
 
 **v17.0.0:**
 
--   [Breaking] Allow to customize the TextLink styles (color and text-decoration) via CSS variables
+- [Breaking] Allow to customize the TextLink styles (color and text-decoration) via CSS variables
 
 **v16.1.0:**
 
--   [Build] Add support for Node v18 and npm v9
+- [Build] Add support for Node v18 and npm v9
 
 **v16.0.0:**
 
--   [Breaking] The `Notification` component is renamed as `DeprecatedNotification`
--   [Feat] The `Box` component now supports a new `background="toast"`
--   [Feat] A new `Toast` component and `useToasts` hook
--   [Fix] Sets `Badge` to semibold
+- [Breaking] The `Notification` component is renamed as `DeprecatedNotification`
+- [Feat] The `Box` component now supports a new `background="toast"`
+- [Feat] A new `Toast` component and `useToasts` hook
+- [Fix] Sets `Badge` to semibold
 
 **v15.3.0:**
 
--   [Feat] Introduces a `Badge` component
+- [Feat] Introduces a `Badge` component
 
 **v15.2.0:**
 
--   [Feat] Enhance the `label` property in `CheckboxField` to be of type `React.ReactNode`
+- [Feat] Enhance the `label` property in `CheckboxField` to be of type `React.ReactNode`
 
 **v15.1.0:**
 
--   [Feat] Fields without label show no spacing above the field
--   [Fix] `TextArea` can now be hidden
--   [Fix] `TextArea` now properly support receiving an explicit alternative aria-describedby attribute
--   [Fix] TextArea is changed to only allow resizing vertically. This ensures that the consumer of the component can control the width via the maxWidth prop.
+- [Feat] Fields without label show no spacing above the field
+- [Fix] `TextArea` can now be hidden
+- [Fix] `TextArea` now properly support receiving an explicit alternative aria-describedby attribute
+- [Fix] TextArea is changed to only allow resizing vertically. This ensures that the consumer of the component can control the width via the maxWidth prop.
 
 **v15.0.0:**
 
--   [Breaking] The `Modal` has its internals replaced with Ariakit. This should not introduce any user-facing changes, but the old modal will be available as `DeprecatedModal` to help with the transition.
--   [Fix] Set `min-height` and `max-height` on `.reactist_menulist`.
+- [Breaking] The `Modal` has its internals replaced with Ariakit. This should not introduce any user-facing changes, but the old modal will be available as `DeprecatedModal` to help with the transition.
+- [Fix] Set `min-height` and `max-height` on `.reactist_menulist`.
 
 **v14.1.1:**
 
--   [Fix] Pins the ariakit dependencies.
+- [Fix] Pins the ariakit dependencies.
 
 **v14.1.0:**
 
--   [Feat] `Tabs` by default have a shorter height, but this can be customized by overriding an exposed css variable
+- [Feat] `Tabs` by default have a shorter height, but this can be customized by overriding an exposed css variable
 
 **v14.0.0:**
 
--   [Breaking] The `color` prop has been removed from `Tabs`, and `variant` now only supports `themed` and `neutral` as options.
--   [Fix] `Tooltip` will now correctly use an anchor component with an `as` prop
+- [Breaking] The `color` prop has been removed from `Tabs`, and `variant` now only supports `themed` and `neutral` as options.
+- [Fix] `Tooltip` will now correctly use an anchor component with an `as` prop
 
 **v13.0.0:**
 
--   [Breaking] Button's `tooltipGapSize` prop is no longer supported. When wanting to customize the tooltip appearance, consumers should take ownership of rendering the tooltip manually.
--   [Breaking] Icon-only buttons can have their implicit "aria-label as tooltip" behaviour suppressed by passing `tooltip={null}`. Useful when wanting to get full control over rendering the tooltip manually.
--   [Breaking] Remove deprecated components `Checkbox`, `DeprecatedLoading` and `DeprecatedModal`.
--   [Breaking] Remove `Popover`
--   [Breaking] The following components have been renamed and will be removed in a future major release:
-    -   `Dropdown` -> `DeprecatedDropdown`
-    -   `Input` -> `DeprecatedInput`, use `TextField` instead.
-    -   `Select` -> `DeprecatedSelect`, use `SelectField` instead.
--   [Feat] Allow buttons to have fully rounded/circular corners.
--   [Fix] Only apply full width labels when the button is full width
+- [Breaking] Button's `tooltipGapSize` prop is no longer supported. When wanting to customize the tooltip appearance, consumers should take ownership of rendering the tooltip manually.
+- [Breaking] Icon-only buttons can have their implicit "aria-label as tooltip" behaviour suppressed by passing `tooltip={null}`. Useful when wanting to get full control over rendering the tooltip manually.
+- [Breaking] Remove deprecated components `Checkbox`, `DeprecatedLoading` and `DeprecatedModal`.
+- [Breaking] Remove `Popover`
+- [Breaking] The following components have been renamed and will be removed in a future major release:
+    - `Dropdown` -> `DeprecatedDropdown`
+    - `Input` -> `DeprecatedInput`, use `TextField` instead.
+    - `Select` -> `DeprecatedSelect`, use `SelectField` instead.
+- [Feat] Allow buttons to have fully rounded/circular corners.
+- [Fix] Only apply full width labels when the button is full width
 
 **v12.1.1:**
 
--   [Fix] Reset input padding for `variant="bordered"` `TextField`.
+- [Fix] Reset input padding for `variant="bordered"` `TextField`.
 
 **v12.1.0:**
 
--   [Feat] New `message` and `tone` props that allow to associate a visual and semantic message to various field components. Supported in `TextField`, `PasswordField`, `TextArea` and `SelectField`.
--   [Feat] New `variant="bordered"` supported in `TextField`, `PasswordField` and `TextArea`. It renders the field and its labels enclosed in an outer border, rather than having a border around the editing area only.
+- [Feat] New `message` and `tone` props that allow to associate a visual and semantic message to various field components. Supported in `TextField`, `PasswordField`, `TextArea` and `SelectField`.
+- [Feat] New `variant="bordered"` supported in `TextField`, `PasswordField` and `TextArea`. It renders the field and its labels enclosed in an outer border, rather than having a border around the editing area only.
 
 **v12.0.4:**
 
--   [Fix] Better default alignment between the `MenuList` and the `MenuButton`
+- [Fix] Better default alignment between the `MenuList` and the `MenuButton`
 
 **v12.0.3:**
 
--   [Fix] Missing styling for `MenuList` in Safari
+- [Fix] Missing styling for `MenuList` in Safari
 
 **v12.0.2:**
 
--   [Fix] `Tooltip` was overriding its anchor's `ref`, preventing it from successfully forwarding its ref
+- [Fix] `Tooltip` was overriding its anchor's `ref`, preventing it from successfully forwarding its ref
 
 **v12.0.1:**
 
--   [Fix] Fix publishing flow
+- [Fix] Fix publishing flow
 
 **v12.0.0:**
 
--   [Breaking] Dropped support for React 16
-    -   Internally, Reactist will now use React 17 and TypeScript v4.6. Targets for `@babel/preset-env` have also been set, reducing the total build size by about 8-10%.
--   [Breaking] Replace Reakit with Ariakit
-    -   This includes a breaking change for `Tabs`, where if the `selectedId` prop is provided, it becomes a controlled component and will no longer switch tabs on its own. To retain the old behaviour, `defaultSelectedId` can be used instead.
+- [Breaking] Dropped support for React 16
+    - Internally, Reactist will now use React 17 and TypeScript v4.6. Targets for `@babel/preset-env` have also been set, reducing the total build size by about 8-10%.
+- [Breaking] Replace Reakit with Ariakit
+    - This includes a breaking change for `Tabs`, where if the `selectedId` prop is provided, it becomes a controlled component and will no longer switch tabs on its own. To retain the old behaviour, `defaultSelectedId` can be used instead.
 
 **v11.6.0:**
 
--   [Fix] Apply TextLink color through `--reactist-text-link-color`
--   [Feat] Add `positive` tone to `Text`
--   [Feat] Add `xsmall` size to `Loading`
+- [Fix] Apply TextLink color through `--reactist-text-link-color`
+- [Feat] Add `positive` tone to `Text`
+- [Feat] Add `xsmall` size to `Loading`
 
 **v11.5.1:**
 
--   [Fix] Modal header's min-height is now applied when header has no button
+- [Fix] Modal header's min-height is now applied when header has no button
 
 **v11.5.0:**
 
--   [Build] Update peer dependencies to include React v18
+- [Build] Update peer dependencies to include React v18
 
 **v11.4.0:**
 
--   [Feat] Button can now have a width set (except icon-only buttons). When having a width, the label aligment can also be customized
--   [Fix] Button focus styles should only be shown when interacting with the button via keyboard (using CSS's `:focus-visible`)
+- [Feat] Button can now have a width set (except icon-only buttons). When having a width, the label aligment can also be customized
+- [Fix] Button focus styles should only be shown when interacting with the button via keyboard (using CSS's `:focus-visible`)
 
 **v11.3.0:**
 
--   [Feat] Added `alignSelf` prop to `Box`
+- [Feat] Added `alignSelf` prop to `Box`
 
 **v11.2.0:**
 
--   [Fix] Hiding `ModalHeader` close button no longer renders the button wrapper column
--   [Fix] Using `start` as a value for `Box`'s `textAlign` now adds a class to properly set the `text-align` value
--   [Fix] `TextArea`'s `rows` prop is not added to the component's type definition
--   [Feat] Updates `Button` to support `gapSize` from `Tooltip` (as `tooltipGapSize`)
+- [Fix] Hiding `ModalHeader` close button no longer renders the button wrapper column
+- [Fix] Using `start` as a value for `Box`'s `textAlign` now adds a class to properly set the `text-align` value
+- [Fix] `TextArea`'s `rows` prop is not added to the component's type definition
+- [Feat] Updates `Button` to support `gapSize` from `Tooltip` (as `tooltipGapSize`)
 
 **v11.1.0:**
 
--   [Tweak] Tabs now are styled with medium font-weight
--   [Tweak] Updates the default medium font-weight from `500` to `600`
--   [Fix] `ModalActions` now ignores `null` child elements
--   [Fix] `ModalActions` no longer wraps each child element inside a wrapper `div`
--   [Fix] `ModalActions` flattens children inside React fragments
--   [Fix] `Inline` no longer adds an unneeded extra wrapper `div` around it
--   [Fix] Adds margin to Menu's viewport positioning
--   [Feat] Updates Avatar to support responsive patterns
+- [Tweak] Tabs now are styled with medium font-weight
+- [Tweak] Updates the default medium font-weight from `500` to `600`
+- [Fix] `ModalActions` now ignores `null` child elements
+- [Fix] `ModalActions` no longer wraps each child element inside a wrapper `div`
+- [Fix] `ModalActions` flattens children inside React fragments
+- [Fix] `Inline` no longer adds an unneeded extra wrapper `div` around it
+- [Fix] Adds margin to Menu's viewport positioning
+- [Feat] Updates Avatar to support responsive patterns
 
 **v11.0.0:**
 
--   [Feat] New approach to styling components based on CSS variables
--   [Feat] New approach to supporting rendering some components as another HTML element or as another component.
--   [Feat] New components for layout (`Box`, `Columns`, `Column`, `Inline`, `Stack`)
--   [Feat] New field components (`TextField`, `PasswordField`, `SelectField`, `CheckboxField`, `SwitchField`, `TextArea`)
--   [Feat] New tabs components (`Tabs`, `Tab`, `TabList`, `TabPanel`, `TabAwareSlot`)
--   [Feat] New components for typography (`Text`, `Heading`, `TextLink`)
--   [Feat] Various other new components (`Alert`, `Notice`, `Hidden`, `HiddenVisually`)
--   [Feat] New set of modal component (`Modal`, `ModalHeader`, `ModalBody`, `ModalFooter`, `ModalActions`) replacing the old set of `Modal.*` components.
--   [Feat] New `Button` and `ButtonLink` components, replacing the old `Button` component.
--   [Breaking] Old set of modal components are now exported as `DeprecatedModal` instead of as `Modal`.
--   [Breaking] Old `Button` component is now exported as `DeprecatedButton` instead of as `Button`.
--   [Breaking] Old `Loading` component is now exported as `DeprecatedLoading` instead of as `Loading`.
--   [Breaking] Removes the `RangeInput` component
--   [Breaking] Removes the `Tip` component
--   [Breaking] Removes the `Icon` component
--   [Breaking] Removes the `ErrorMessage` component
--   [Docs] Adds a11y badges to component stories
--   [Docs] Adds `jest-axe` package and automated a11y checks
--   [Tweak] Makes a11y improvements to `Menu`
--   [Tweak] Makes a11y improvements to `ProgressBar`
--   [Tweak] Makes a11y improvements to `Notification`
--   [Build] Updates peer deps to include React v17.0
+- [Feat] New approach to styling components based on CSS variables
+- [Feat] New approach to supporting rendering some components as another HTML element or as another component.
+- [Feat] New components for layout (`Box`, `Columns`, `Column`, `Inline`, `Stack`)
+- [Feat] New field components (`TextField`, `PasswordField`, `SelectField`, `CheckboxField`, `SwitchField`, `TextArea`)
+- [Feat] New tabs components (`Tabs`, `Tab`, `TabList`, `TabPanel`, `TabAwareSlot`)
+- [Feat] New components for typography (`Text`, `Heading`, `TextLink`)
+- [Feat] Various other new components (`Alert`, `Notice`, `Hidden`, `HiddenVisually`)
+- [Feat] New set of modal component (`Modal`, `ModalHeader`, `ModalBody`, `ModalFooter`, `ModalActions`) replacing the old set of `Modal.*` components.
+- [Feat] New `Button` and `ButtonLink` components, replacing the old `Button` component.
+- [Breaking] Old set of modal components are now exported as `DeprecatedModal` instead of as `Modal`.
+- [Breaking] Old `Button` component is now exported as `DeprecatedButton` instead of as `Button`.
+- [Breaking] Old `Loading` component is now exported as `DeprecatedLoading` instead of as `Loading`.
+- [Breaking] Removes the `RangeInput` component
+- [Breaking] Removes the `Tip` component
+- [Breaking] Removes the `Icon` component
+- [Breaking] Removes the `ErrorMessage` component
+- [Docs] Adds a11y badges to component stories
+- [Docs] Adds `jest-axe` package and automated a11y checks
+- [Tweak] Makes a11y improvements to `Menu`
+- [Tweak] Makes a11y improvements to `ProgressBar`
+- [Tweak] Makes a11y improvements to `Notification`
+- [Build] Updates peer deps to include React v17.0
 
 **v10.0.0-beta.12:**
 
--   [Tweak] Upgrade Storybook to version v6.3.10
--   [Tweak] Limit node version to <=16.10.0
+- [Tweak] Upgrade Storybook to version v6.3.10
+- [Tweak] Limit node version to <=16.10.0
 
 **v10.0.0-beta.11:**
 
--   [Feat] More modal widths:
-    -   Previous width `large` is now called `xlarge`
-    -   New width `large` sitting in between `medium` and `xlarge`
-    -   New width `full`, that always fill the entire viewport width (keeping the standard margin
-        around).
+- [Feat] More modal widths:
+    - Previous width `large` is now called `xlarge`
+    - New width `large` sitting in between `medium` and `xlarge`
+    - New width `full`, that always fill the entire viewport width (keeping the standard margin
+      around).
 
 **v10.0.0-beta.10:**
 
--   [Fix] Reduce specificity of the Tab component's CSS variables
+- [Fix] Reduce specificity of the Tab component's CSS variables
 
 **v10.0.0-beta.9:**
 
--   [Tweak] Divider weight now defaults to "tertiary"
--   [Fix] Modal dividers (in the header or footer) are tertiary dividers.
+- [Tweak] Divider weight now defaults to "tertiary"
+- [Fix] Modal dividers (in the header or footer) are tertiary dividers.
 
 **v10.0.0-beta.8:**
 
--   [Breaking] Standardize box borders and divider colors under a new primary/secondary/tertiary
-    system.
--   [Fix] Better adjust spacing inside buttons, so that the side with an icon has a similar padding
-    than the side with no icon.
--   [Tweak] Button hover styles are now also used when the button is focused, or it is expanded
-    (e.g. in the case of menu buttons).
--   [Tweak] Make button colors transition smoothly.
--   [Tweak] Adjust modal widths to the new design system defaults.
--   [Tweak] Buttons with a visual text label (i.e. buttons that are not icon-only buttons) now have
-    a minimum width set, so they don't get too small for extremely short labels.
+- [Breaking] Standardize box borders and divider colors under a new primary/secondary/tertiary
+  system.
+- [Fix] Better adjust spacing inside buttons, so that the side with an icon has a similar padding
+  than the side with no icon.
+- [Tweak] Button hover styles are now also used when the button is focused, or it is expanded
+  (e.g. in the case of menu buttons).
+- [Tweak] Make button colors transition smoothly.
+- [Tweak] Adjust modal widths to the new design system defaults.
+- [Tweak] Buttons with a visual text label (i.e. buttons that are not icon-only buttons) now have
+  a minimum width set, so they don't get too small for extremely short labels.
 
 **v10.0.0-beta.7:**
 
--   [Fix] Modals that fit their content's height now expand their height only downwards, and are not
-    kept vertically centered, but slightly towards the top of the screen.
--   [Fix] Modal close button alignment is no longer inconsistent.
--   [Breaking] Button icon size is no longer controlled based on the button size. It is your
-    responsibility to make sure your SVG icons have the proper size and alignment to fit in a button
-    depending on its size.
--   [Fix] Button labels are now clamped when they do not fit inside the button. Buttons will never
-    be wider than the width of their container.
+- [Fix] Modals that fit their content's height now expand their height only downwards, and are not
+  kept vertically centered, but slightly towards the top of the screen.
+- [Fix] Modal close button alignment is no longer inconsistent.
+- [Breaking] Button icon size is no longer controlled based on the button size. It is your
+  responsibility to make sure your SVG icons have the proper size and alignment to fit in a button
+  depending on its size.
+- [Fix] Button labels are now clamped when they do not fit inside the button. Buttons will never
+  be wider than the width of their container.
 
 **v10.0.0-beta.6:**
 
--   [Feature] Add a new `loading` prop for `Button` and `ButtonLink`, to set them as busy, and
-    visually show a loading indicator.
--   [Fix] Fully support secondary destructive buttons in a way that is customizable via CSS
-    variables.
--   [Fix] Use the `Button` component to power the default modal close button. This makes it possible
-    for consumer apps to have these buttons follow their customized button styles.
--   [Feature] Improves the ability to fully customize all sizing and spacing by apps via CSS
-    variables.
--   [Docs] New storybook examples showcasing how to customize buttons for dark mode.
+- [Feature] Add a new `loading` prop for `Button` and `ButtonLink`, to set them as busy, and
+  visually show a loading indicator.
+- [Fix] Fully support secondary destructive buttons in a way that is customizable via CSS
+  variables.
+- [Fix] Use the `Button` component to power the default modal close button. This makes it possible
+  for consumer apps to have these buttons follow their customized button styles.
+- [Feature] Improves the ability to fully customize all sizing and spacing by apps via CSS
+  variables.
+- [Docs] New storybook examples showcasing how to customize buttons for dark mode.
 
 **v10.0.0-beta.5:**
 
--   [Breaking] The various `Menu*` components props no longer consider `className` as a valid prop.
--   [Breaking] The `Stack` component's `align` prop type is now `'start' | 'center' | 'end'` instead
-    of `'left' | 'center' | 'right'`.
--   [Fix] Colour of quaternary button is now correct.
--   [Docs] Improvements to the storybook examples for the `Menu` components.
--   [Fix] Modal focus lock is now working correctly.
--   [Fix] Modals are now aligned to the top of the viewport.
--   [Fix] The labels of the `SwitchField` and `CheckboxField` components now follow the standard
-    `Text` styling.
+- [Breaking] The various `Menu*` components props no longer consider `className` as a valid prop.
+- [Breaking] The `Stack` component's `align` prop type is now `'start' | 'center' | 'end'` instead
+  of `'left' | 'center' | 'right'`.
+- [Fix] Colour of quaternary button is now correct.
+- [Docs] Improvements to the storybook examples for the `Menu` components.
+- [Fix] Modal focus lock is now working correctly.
+- [Fix] Modals are now aligned to the top of the viewport.
+- [Fix] The labels of the `SwitchField` and `CheckboxField` components now follow the standard
+  `Text` styling.
 
 **v10.0.0-beta.4:**
 
--   [Breaking] The new `Loading` component now supports `aria-label` or `aria-labelledby`, and it
-    also forwards all other props to the container element.
--   [Feature] Reintroduce the legacy `Loading` component as `DeprecatedLoading` to ease the
-    migration in apps using it.
+- [Breaking] The new `Loading` component now supports `aria-label` or `aria-labelledby`, and it
+  also forwards all other props to the container element.
+- [Feature] Reintroduce the legacy `Loading` component as `DeprecatedLoading` to ease the
+  migration in apps using it.
 
 **v10.0.0-beta.3:**
 
--   [Breaking] The `Loading` component has been reimplemented based on the beta `LoadingSpinner`.
--   [Breaking] The `LoadingSpinner` was renamed as `Loading`, and significantly changed.
--   [Breaking] The `Modal` has been renamed `DeprecatedModal`.
--   [Feature] A new `Modal` component is introduced, that replaces the old one, with much better
-    accessibility features and integrated into the new styling approach of the new design system
-    components.
--   [Breaking] Rename the `Button` as `DeprecatedButton`.
--   [Feature] New `Button` component following the latest standards of the design system.
--   [Docs] The storybook examples now open the "Docs" tab by default.
+- [Breaking] The `Loading` component has been reimplemented based on the beta `LoadingSpinner`.
+- [Breaking] The `LoadingSpinner` was renamed as `Loading`, and significantly changed.
+- [Breaking] The `Modal` has been renamed `DeprecatedModal`.
+- [Feature] A new `Modal` component is introduced, that replaces the old one, with much better
+  accessibility features and integrated into the new styling approach of the new design system
+  components.
+- [Breaking] Rename the `Button` as `DeprecatedButton`.
+- [Feature] New `Button` component following the latest standards of the design system.
+- [Docs] The storybook examples now open the "Docs" tab by default.
 
 **v10.0.0-beta.2:**
 
--   [Feature] All the tab components are now polymorphic (i.e. they can use the `as="element"` prop).
--   [Feature] The `Box` component now has a new `textAlign` prop to control its `text-align` style.
--   [Feature] The `Text` and `Heading` components now have a `align` prop to align its content horizontally.
+- [Feature] All the tab components are now polymorphic (i.e. they can use the `as="element"` prop).
+- [Feature] The `Box` component now has a new `textAlign` prop to control its `text-align` style.
+- [Feature] The `Text` and `Heading` components now have a `align` prop to align its content horizontally.
 
 **v10.0.0-beta.1:**
 
--   [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
+- [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
 
 **10.0.0:**
 
--   [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
+- [Build] The project now requires node v16.0.0+ and npm v7.0.0+ to install and run.
 
 **v9.2.0-beta.18:**
 
--   [Breaking] Component composition changed to use prop `as="…"` instead of `component="…"`.
--   [Breaking] Most design system components no longer support receiving a `className` attribute.
--   [Breaking] Some design system components now support a custom class name via a `exceptionallySetClassName` prop.
--   [Breaking] Responsive props are now provided via an object instead of an array.
--   [Feature] The `Box` component now has a various `margin*` props to provide its margins similar to paddings.
--   [Feature] The `Box` component now has a new `maxWidth` value `full` (i.e.`maxWidth="full"`).
--   [Feature] The `Stack` component now has a `align` prop to align its items horizontally.
--   [Feature] Add new component `Hidden` to hide content under certain media conditions.
--   [Feature] Add new component `HiddenVisually` to hide content visually while keeping it accessible.
--   [Feature] The `SwitchField` and `CheckboxField` components can now be controlled or uncontrolled.
--   [Fix] The `SwitchField` hover state is no longer flaky.
--   [Fix] The hint text in various field components (`TextField`, `PasswordField`, `SelectField`) now renders outside the max-width container.
+- [Breaking] Component composition changed to use prop `as="…"` instead of `component="…"`.
+- [Breaking] Most design system components no longer support receiving a `className` attribute.
+- [Breaking] Some design system components now support a custom class name via a `exceptionallySetClassName` prop.
+- [Breaking] Responsive props are now provided via an object instead of an array.
+- [Feature] The `Box` component now has a various `margin*` props to provide its margins similar to paddings.
+- [Feature] The `Box` component now has a new `maxWidth` value `full` (i.e.`maxWidth="full"`).
+- [Feature] The `Stack` component now has a `align` prop to align its items horizontally.
+- [Feature] Add new component `Hidden` to hide content under certain media conditions.
+- [Feature] Add new component `HiddenVisually` to hide content visually while keeping it accessible.
+- [Feature] The `SwitchField` and `CheckboxField` components can now be controlled or uncontrolled.
+- [Fix] The `SwitchField` hover state is no longer flaky.
+- [Fix] The hint text in various field components (`TextField`, `PasswordField`, `SelectField`) now renders outside the max-width container.
 
 **v9.2.0-beta.17:**
 
--   [Feature] Introduces a new `Tabs` component based on [Reakit/Tab](https://reakit.io/docs/tab/)
+- [Feature] Introduces a new `Tabs` component based on [Reakit/Tab](https://reakit.io/docs/tab/)
 
 Also included are changes from https://github.com/Doist/reactist/releases/tag/v9.1.6
 
 **v9.2.0-beta.16:**
 
--   [Fix] Allows classname to be passed through on ButtonLink.
+- [Fix] Allows classname to be passed through on ButtonLink.
 
 **v9.2.0-beta.15:**
 
--   [Fix] Add default padding to `Text` component when used with `lineClamp` prop, in order to prevent emojis from being cutoff
--   [Fix] Allow the `Column` component to leverage the `component` prop to render as another element other than the default `div`
+- [Fix] Add default padding to `Text` component when used with `lineClamp` prop, in order to prevent emojis from being cutoff
+- [Fix] Allow the `Column` component to leverage the `component` prop to render as another element other than the default `div`
 
 **v9.2.0-beta.14:**
 
--   [Fix] Add support for `baseline` alignment
+- [Fix] Add support for `baseline` alignment
 
 **v9.2.0-beta.13:**
 
--   [Fix] Allow nested `Columns` components to retain their own inner spacing
+- [Fix] Allow nested `Columns` components to retain their own inner spacing
 
 **v9.2.0-beta.12:**
 
--   New tag to include the fix from [`v9.1.5`](https://github.com/Doist/reactist/releases/tag/v9.1.5)
+- New tag to include the fix from [`v9.1.5`](https://github.com/Doist/reactist/releases/tag/v9.1.5)
 
 **v9.2.0-beta.11:**
 
--   [Fix] Incorrect styles in `Button` which affected dark mode themes
--   [Fix] Incorrect styles in `SelectField` which affected dark mode themes
+- [Fix] Incorrect styles in `Button` which affected dark mode themes
+- [Fix] Incorrect styles in `SelectField` which affected dark mode themes
 
 **v9.2.0-beta.10:**
 
--   [Breaking] `Text` component now has its `size` attribute changed to accept `caption`, `copy`, `body`, and `subtitle`.
--   [Fix] `Columns` component will now stretch within a flex container
+- [Breaking] `Text` component now has its `size` attribute changed to accept `caption`, `copy`, `body`, and `subtitle`.
+- [Fix] `Columns` component will now stretch within a flex container
 
 **v9.2.0-beta.9:**
 
--   [Docs] Upgraded all beta storybook docs to work with Storybook 6
+- [Docs] Upgraded all beta storybook docs to work with Storybook 6
 
 **9.1.6:**
 
--   [Feature] Change `KeyboardShortcut` to treat `Super` as a key to be translated
+- [Feature] Change `KeyboardShortcut` to treat `Super` as a key to be translated
 
 **9.1.5:**
 
--   [Fix] Prevent menu items with `aria-disabled` set to `false` from being disabled
+- [Fix] Prevent menu items with `aria-disabled` set to `false` from being disabled
 
 **9.1.4:**
 
--   [Perf] Make the disabled Button component visible to screen readers by swapping `disabled` for `aria-disabled`
+- [Perf] Make the disabled Button component visible to screen readers by swapping `disabled` for `aria-disabled`
 
 **9.1.3:**
 
--   [Tweak] Upgrade Storybook to version v6.2.1. Migrate stories to new version.
+- [Tweak] Upgrade Storybook to version v6.2.1. Migrate stories to new version.
 
 **v9.2.0-beta.8:**
 
--   Fix `Columns` styles, broken by the changes to `Stack` styling. This release now removes the interdependency of `Column's styles relying on `Stack` styles.
+- Fix `Columns` styles, broken by the changes to `Stack` styling. This release now removes the interdependency of `Column's styles relying on `Stack` styles.
 
 **v9.2.0-beta.7:**
 
 Various fixes to the new experimental components
 
--   Adds a right padding to the `SelectField` to make sure the chevron never appears on top of the `select` content.
--   Use for the checked `CheckboxField` the same colour variable we use for the `SwitchField`.
--   Add a wrapper `div` around what `Inline` renders, to avoid conflicts with margin applied from the outside by `Stack` (when `Inline` is nested in `Stack`).
--   Simplify the CSS for `Stack` leveraging the `:not(:first-child)` selector.
--   Add one more story to each of `Stack` and `Inline` to showcase that these new changes did not break their expected behaviour.
+- Adds a right padding to the `SelectField` to make sure the chevron never appears on top of the `select` content.
+- Use for the checked `CheckboxField` the same colour variable we use for the `SwitchField`.
+- Add a wrapper `div` around what `Inline` renders, to avoid conflicts with margin applied from the outside by `Stack` (when `Inline` is nested in `Stack`).
+- Simplify the CSS for `Stack` leveraging the `:not(:first-child)` selector.
+- Add one more story to each of `Stack` and `Inline` to showcase that these new changes did not break their expected behaviour.
 
 **v9.2.0-beta.6:**
 
 Various fixes to the new experimental components
 
--   Add explicit link styles to `TextLink`
--   `SwitchField` now properly animates the handle moving left or right.
--   Style fixes to the `PasswordField`.
--   Added ref forwarding to `TextField`, `PasswordField` and `Heading`.
+- Add explicit link styles to `TextLink`
+- `SwitchField` now properly animates the handle moving left or right.
+- Style fixes to the `PasswordField`.
+- Added ref forwarding to `TextField`, `PasswordField` and `Heading`.
 
 **v9.2.0-beta.5:**
 
--   Change Stack and Inline elements to not generate one container element per child element.
--   Fix ButtonLink styling
--   Adds a new `display="inlineFlex"` value to the `display` property of `Box`. This makes the `Box` use `display: inline-flex`.
+- Change Stack and Inline elements to not generate one container element per child element.
+- Fix ButtonLink styling
+- Adds a new `display="inlineFlex"` value to the `display` property of `Box`. This makes the `Box` use `display: inline-flex`.
 
 **v9.2.0-beta.4:**
 
 Various fixes to the new experimental components
 
--   The `SelectField` now has its native appearance reset (i.e. `appearance: none`).
--   Fixed a typo in an internal css variable in the `SelectField` that made it not have the proper height.
--   Text in `Alert` and `Notice` is now properly aligned vertically with the icon.
--   Fixed some css module classes that were incorrect in the JS code.
--   `Alert` colours did not have the transparency properly set.
--   The `SwitchField` now has a new dedicated css variable for theming its background when checked.
+- The `SelectField` now has its native appearance reset (i.e. `appearance: none`).
+- Fixed a typo in an internal css variable in the `SelectField` that made it not have the proper height.
+- Text in `Alert` and `Notice` is now properly aligned vertically with the icon.
+- Fixed some css module classes that were incorrect in the JS code.
+- `Alert` colours did not have the transparency properly set.
+- The `SwitchField` now has a new dedicated css variable for theming its background when checked.
 
 **v9.2.0-beta.3:**
 
--   [Fix] `Text` component was not receiving its ref correctly
+- [Fix] `Text` component was not receiving its ref correctly
 
 **v9.2.0-beta.2:**
 
--   [Feature] New components `Alert`, `LoadingSpinner`, `Notice`, `Heading`, `Text`, `ButtonLink`, `TextLink`, `CheckboxField`, `PasswordField`, `SelectField`, `SwitchField`, `TextArea`, `TextField`.
--   [Feature] New prop `tone` for component `Heading` (just like that for `Text`).
--   [Feature] New prop `position` for component `Box`.
--   [Feature] New props `flexShrink` and `flexGrow` for component `Box`.
--   [Feature] New props `border` and `borderRadius` for component `Box`.
--   [Feature] New `minWidth={0}` in component `Box`.
--   [Feature] `Text` now supports receiving a `ref`.
--   [Fix] Changed `Box` value for prop `background`. Former value `shade` is now called `aside`.
--   [Fix] `Column` with `width="content"` did not shrink entirely to zero if empty.
--   [Fix] Other fixes to columns so that it did not expand more than expected, so it allows truncated text to truncate.
--   [Fix] Correct font sizes for the various levels of `Heading`.
--   [Fix] `Stack` and `Inline` now generate `span` instead of `div` elements if the html element they use for the container does not allow to contain `div` elements.
+- [Feature] New components `Alert`, `LoadingSpinner`, `Notice`, `Heading`, `Text`, `ButtonLink`, `TextLink`, `CheckboxField`, `PasswordField`, `SelectField`, `SwitchField`, `TextArea`, `TextField`.
+- [Feature] New prop `tone` for component `Heading` (just like that for `Text`).
+- [Feature] New prop `position` for component `Box`.
+- [Feature] New props `flexShrink` and `flexGrow` for component `Box`.
+- [Feature] New props `border` and `borderRadius` for component `Box`.
+- [Feature] New `minWidth={0}` in component `Box`.
+- [Feature] `Text` now supports receiving a `ref`.
+- [Fix] Changed `Box` value for prop `background`. Former value `shade` is now called `aside`.
+- [Fix] `Column` with `width="content"` did not shrink entirely to zero if empty.
+- [Fix] Other fixes to columns so that it did not expand more than expected, so it allows truncated text to truncate.
+- [Fix] Correct font sizes for the various levels of `Heading`.
+- [Fix] `Stack` and `Inline` now generate `span` instead of `div` elements if the html element they use for the container does not allow to contain `div` elements.
 
 **9.1.2:**
 
--   [Fix] Call a MenuItem component's onClick handler if provided; ignore the select action if event.defaultPrevented.
+- [Fix] Call a MenuItem component's onClick handler if provided; ignore the select action if event.defaultPrevented.
 
 **v9.2.0-beta.1:**
 
--   [Feature] Add `xxlarge` option to various `padding` and `space` props for `Box`, `Columns`, `Inline`, and `Stack` components
+- [Feature] Add `xxlarge` option to various `padding` and `space` props for `Box`, `Columns`, `Inline`, and `Stack` components
 
 **v9.2.0-beta:**
 
--   [Feature] Add `largest` size increase support for `Heading` component
--   [Feature] Add `lineClamp` for text truncation to `Heading` and `Text` components
--   [Fix] Export the `Column` component in the main entry point
--   [Fix] Add missing colour variables
--   [Docs] Add Storybook demos for `Heading`, `Text`, and colour swatches
+- [Feature] Add `largest` size increase support for `Heading` component
+- [Feature] Add `lineClamp` for text truncation to `Heading` and `Text` components
+- [Fix] Export the `Column` component in the main entry point
+- [Fix] Add missing colour variables
+- [Docs] Add Storybook demos for `Heading`, `Text`, and colour swatches
 
 **v9.1.0-beta.2:**
 
--   [Fix] Move patch-package to dependencies to allow it to run (on nothing since we're patching a dev-dependency) after being installed as a package.
--   [Fix] Prevent emotion's `css` prop from polluting the exported type definitions
+- [Fix] Move patch-package to dependencies to allow it to run (on nothing since we're patching a dev-dependency) after being installed as a package.
+- [Fix] Prevent emotion's `css` prop from polluting the exported type definitions
 
 **v9.1.0-beta.1:**
 
--   [Fix] The previous beta release had an issue where all components' stylesheets were being treated as CSS modules. This will now build with the correct class name selectors again.
+- [Fix] The previous beta release had an issue where all components' stylesheets were being treated as CSS modules. This will now build with the correct class name selectors again.
 
 **v9.1.0-beta:**
 
--   [Feature] A set of base design system components have been added: `Box`, `Columns`, `Divider`, `Heading`, `Inline`, `Stack`, and `Text`. Since we're still experimenting with their API, they will be packaged under beta releases until they become more concrete.
+- [Feature] A set of base design system components have been added: `Box`, `Columns`, `Divider`, `Heading`, `Inline`, `Stack`, and `Text`. Since we're still experimenting with their API, they will be packaged under beta releases until they become more concrete.
 
 **9.1.1:**
 
--   [Fix] Prevent `Loading` component from spinning off-centre
+- [Fix] Prevent `Loading` component from spinning off-centre
 
 **9.1.0:**
 
--   [Feature] Adds support for `aria-label` to the `Loading` component
--   [Docs] This also fixes our gh-pages-hosted Storybook to load the proper stylesheets again
+- [Feature] Adds support for `aria-label` to the `Loading` component
+- [Docs] This also fixes our gh-pages-hosted Storybook to load the proper stylesheets again
 
 **9.0.0:**
 
--   [Build] The project now requires node v14.5.5+ and npm v6.14.11+ to install and run.
--   We're skipping right over v8.0.0 as its tag has already been created previously
+- [Build] The project now requires node v14.5.5+ and npm v6.14.11+ to install and run.
+- We're skipping right over v8.0.0 as its tag has already been created previously
 
 **v7.2.1:**
 
--   [Tweak] Adds `defaultValue` and ensures additional props are carried forward on the `Select` component.
+- [Tweak] Adds `defaultValue` and ensures additional props are carried forward on the `Select` component.
 
 **v7.2.0:**
 
--   [Feature] A new `Notification` component has been added.
+- [Feature] A new `Notification` component has been added.
 
 **v7.1.9:**
 
--   [Fix] We're only rendering menu lists into the DOM when the menu is opened. This should result in measurable performance gains if you're rendering a lot menus (e.g. as part of a list).
+- [Fix] We're only rendering menu lists into the DOM when the menu is opened. This should result in measurable performance gains if you're rendering a lot menus (e.g. as part of a list).
 
 **v7.1.8:**
 
--   [Tweak] Upgraded Reakit dependency
+- [Tweak] Upgraded Reakit dependency
 
 **v7.1.7:**
 
--   [Tweak] Separates `ButtonVariant` and `ButtonSize` as actual types.
+- [Tweak] Separates `ButtonVariant` and `ButtonSize` as actual types.
 
 **v7.1.6:**
 
--   [Tweak] Upgrade some dependencies.
+- [Tweak] Upgrade some dependencies.
 
 **v7.1.5:**
 
--   [Tweak] Adds a backdrop/overlay to dropdown menus.
--   [Fix] Removes the peer dependency on dayjs, adding it as a direct dependency instead.
+- [Tweak] Adds a backdrop/overlay to dropdown menus.
+- [Fix] Removes the peer dependency on dayjs, adding it as a direct dependency instead.
 
 **v7.1.4:**
 
--   [Tweak] Prevents the `Tooltip` component from getting triggered by keyboard interactions performed in other components
+- [Tweak] Prevents the `Tooltip` component from getting triggered by keyboard interactions performed in other components
 
 **v7.1.3:**
 
--   Dummy release created for publishing purposes
+- Dummy release created for publishing purposes
 
 **v7.1.2:**
 
--   [Tweak] Removes the arbitrary `max-width` value of the Tooltip component
--   [Tweak] Adds a `z-index` value for the Tooltip component so that it appears ontop of other content
+- [Tweak] Removes the arbitrary `max-width` value of the Tooltip component
+- [Tweak] Adds a `z-index` value for the Tooltip component so that it appears ontop of other content
 
 **v7.1.1:**
 
--   [Bugfix] Fixes an improperly configured `sideEffects` property in package.json that prevented importing CSS files from reactist.
+- [Bugfix] Fixes an improperly configured `sideEffects` property in package.json that prevented importing CSS files from reactist.
 
 **v7.1.0:**
 
--   [Feature] The tooltip content now can be provided as a function that will be called to generate its content. This function will only be called when the tooltip needs to be shown. This allows to have more control on tooltip content that is potentially expensive to generate, so that it only happens when needed.
--   [Fix] The tooltip content is now rendered to the DOM only when the tooltip is shown. This is regardless of wether the content is provided directly or via a function. The React tree won't be comitted to the DOM unless the tooltip needs to become visible.
--   [Tweak] The tooltip delay to appear is now extended from 100ms to 500ms which was our earlier standard with the previous implementation of the tooltip.
+- [Feature] The tooltip content now can be provided as a function that will be called to generate its content. This function will only be called when the tooltip needs to be shown. This allows to have more control on tooltip content that is potentially expensive to generate, so that it only happens when needed.
+- [Fix] The tooltip content is now rendered to the DOM only when the tooltip is shown. This is regardless of wether the content is provided directly or via a function. The React tree won't be comitted to the DOM unless the tooltip needs to become visible.
+- [Tweak] The tooltip delay to appear is now extended from 100ms to 500ms which was our earlier standard with the previous implementation of the tooltip.
 
 **v7.0.0:**
 
--   [BREAKING CHANGE] A new Tooltip component is introduced. It is keyboard and screen reader friendly, more compliant with accessibility recommendations about tooltips. It does not provide all the features of the previous Tooltip, and its props change quite a bit. Additionally, it now has a new restriction where it expects its children to consist of a single element. This element is the one used as a trigger for the tooltip. (#276)
--   [BREAKING CHANGE] The `Popover` component now has a new restriction where it expects its children to consist of a single element. (#276)
--   [BREAKING CHANGE] A new set of components for building menus is introduced. The new menus are keyboard and screen reader friendly, more compliant with accessibility recommendations about menus. The old `MenuButton` and `MenuButtonItem` components are no longer available. Moreover we now have a `MenuButton` that is nothing like the one before. Check their code and examples in storybook. (#278)
+- [BREAKING CHANGE] A new Tooltip component is introduced. It is keyboard and screen reader friendly, more compliant with accessibility recommendations about tooltips. It does not provide all the features of the previous Tooltip, and its props change quite a bit. Additionally, it now has a new restriction where it expects its children to consist of a single element. This element is the one used as a trigger for the tooltip. (#276)
+- [BREAKING CHANGE] The `Popover` component now has a new restriction where it expects its children to consist of a single element. (#276)
+- [BREAKING CHANGE] A new set of components for building menus is introduced. The new menus are keyboard and screen reader friendly, more compliant with accessibility recommendations about menus. The old `MenuButton` and `MenuButtonItem` components are no longer available. Moreover we now have a `MenuButton` that is nothing like the one before. Check their code and examples in storybook. (#278)
 
 **v6.0.1:**
 
--   [Fix] This fixes a bug in v6.0.0 where the lib/ directory was unbundled.
+- [Fix] This fixes a bug in v6.0.0 where the lib/ directory was unbundled.
 
 **v6.0.0:**
 
--   [BREAKING CHANGE] Reactist now generates a build more aligned to antd's best practices. It generates a clean ES6 build, a CommonJS build, as well as an unpkg build. It also adds built-in support for future CSS module integration. This is a breaking change because importing modules has changed slightly. See README.md.
--   [BREAKING CHANGE] The `Button` component's `close` prop, which was deprecated back in v5, is now no longer supported.
+- [BREAKING CHANGE] Reactist now generates a build more aligned to antd's best practices. It generates a clean ES6 build, a CommonJS build, as well as an unpkg build. It also adds built-in support for future CSS module integration. This is a breaking change because importing modules has changed slightly. See README.md.
+- [BREAKING CHANGE] The `Button` component's `close` prop, which was deprecated back in v5, is now no longer supported.
 
 **v5.2.0:**
 
--   [Feature] `Button` can now be unstyled if you omit the `variant` prop. This resets the styles to be even less than default styles of the web browser (e.g. removes all border, padding and background).
+- [Feature] `Button` can now be unstyled if you omit the `variant` prop. This resets the styles to be even less than default styles of the web browser (e.g. removes all border, padding and background).
 
 **v5.1.0:**
 
--   [New] A `KeyboardShortcut` component will take one or several keyboard shortcut specified as string, and will parse them and render them in a nice semantic markup using the `kbd` element. Each key part of a key combination gets its own container so you can style things nicely.
+- [New] A `KeyboardShortcut` component will take one or several keyboard shortcut specified as string, and will parse them and render them in a nice semantic markup using the `kbd` element. Each key part of a key combination gets its own container so you can style things nicely.
 
 **v5.0.0:**
 
 The `Button` component's big renovation.
 
--   [BREAKING CHANGE] The `Button` component changed its outer interface entirely.
-    -   Instead of individual boolean props for setting its visual style (`primary`, `secondary`, etc.) it has a single prop `variant` which receives the styling/variant as a string value.
-    -   This prop is now required so if you were not adding any of these boolean props, you now need to add `variant="primary"`.
-    -   The `white` prop now does not even exist as a `variant`. It is replaced by `variant="secondary"`.
-    -   Instead of individual boolean props for setting its size (`small`, `large`), `Button` now has a single prop `size` that can receive either `'small'` or `'large'` as its value. If omitted the button has its default size.
-    -   The `Button` now uses `children` as the prop in which it receives the content inside the button, as opposed to using the `name` prop. So now `<Button name="Hello" />` becomes `<Button>Hello</Button>`.
-    -   The `Button` prop `data_tip` is now called `tooltip`.
-    -   The css class names for the `Button` component are now all following a BEM-like naming convention. Instead of having classes such as `.loading`, `.secondary`, etc. it now has all of these prefixed by `.reactist_button--`. That is, `.secondary` is now `.reactist_button--secondary`.
--   [BREAKING CHANGE] The `LinkButton` component has been removed entirely. The main reason being it is not accessible to use a link as a button. You can achieve a visually similar button with a new possible `variant` prop on the regular `Button`. So now `<LinkButton name="Click me" />` becomes `<Button variant="link">Click me</Button>`. This new link-like button is semantically a button, as opposed to being a link posing as a button.
+- [BREAKING CHANGE] The `Button` component changed its outer interface entirely.
+    - Instead of individual boolean props for setting its visual style (`primary`, `secondary`, etc.) it has a single prop `variant` which receives the styling/variant as a string value.
+    - This prop is now required so if you were not adding any of these boolean props, you now need to add `variant="primary"`.
+    - The `white` prop now does not even exist as a `variant`. It is replaced by `variant="secondary"`.
+    - Instead of individual boolean props for setting its size (`small`, `large`), `Button` now has a single prop `size` that can receive either `'small'` or `'large'` as its value. If omitted the button has its default size.
+    - The `Button` now uses `children` as the prop in which it receives the content inside the button, as opposed to using the `name` prop. So now `<Button name="Hello" />` becomes `<Button>Hello</Button>`.
+    - The `Button` prop `data_tip` is now called `tooltip`.
+    - The css class names for the `Button` component are now all following a BEM-like naming convention. Instead of having classes such as `.loading`, `.secondary`, etc. it now has all of these prefixed by `.reactist_button--`. That is, `.secondary` is now `.reactist_button--secondary`.
+- [BREAKING CHANGE] The `LinkButton` component has been removed entirely. The main reason being it is not accessible to use a link as a button. You can achieve a visually similar button with a new possible `variant` prop on the regular `Button`. So now `<LinkButton name="Click me" />` becomes `<Button variant="link">Click me</Button>`. This new link-like button is semantically a button, as opposed to being a link posing as a button.
 
 **4.1.5:**
 
--   [Fix] Tightens up type definitions for the `KeyCapturer` props.
+- [Fix] Tightens up type definitions for the `KeyCapturer` props.
 
 **4.1.4:**
 
--   [Fix] Reinstalled @doist/prettier-config from the npm registry and removed the authentication needed when pulling down dependencies.
+- [Fix] Reinstalled @doist/prettier-config from the npm registry and removed the authentication needed when pulling down dependencies.
 
 **4.1.3:**
 
--   [Fix] We have a dev dependency being on the GiHub package registry and we had problems with our Github actions pulling it. This is hopefully all fixed. 🤞
+- [Fix] We have a dev dependency being on the GiHub package registry and we had problems with our Github actions pulling it. This is hopefully all fixed. 🤞
 
 **4.1.0:**
 
--   [New] The `event` object is now forwarded to the on\* handler in the `KeyCapturer` component. The `onEnter` event will also no longer fire when it's in the middle of an [IME composition session](https://developer.mozilla.org/en-US/docs/Glossary/input_method_editor).
+- [New] The `event` object is now forwarded to the on\* handler in the `KeyCapturer` component. The `onEnter` event will also no longer fire when it's in the middle of an [IME composition session](https://developer.mozilla.org/en-US/docs/Glossary/input_method_editor).
 
 **4.0.2:**
 
--   [New] Brings back individual JS and CSS files so that applications can do selective import in an ES6 build.
+- [New] Brings back individual JS and CSS files so that applications can do selective import in an ES6 build.
 
 **4.0.1:**
 
--   [Fix] Modal.Actions now can have empty or null children again
+- [Fix] Modal.Actions now can have empty or null children again
 
 **4.0.0:**
 
--   [New] The library is now fully Typescript, provides an ES6 module export, and provides native type bindings.
--   [Tweak] To support tree-shaking, we've switched to the Rollup bundler
--   [Breaking Change] All imports are now ES6 relative imports, change `import Loading from "@doist/reactist/lib/loading"` to `import { Loading } from "@doist/reactist"`
+- [New] The library is now fully Typescript, provides an ES6 module export, and provides native type bindings.
+- [Tweak] To support tree-shaking, we've switched to the Rollup bundler
+- [Breaking Change] All imports are now ES6 relative imports, change `import Loading from "@doist/reactist/lib/loading"` to `import { Loading } from "@doist/reactist"`
 
 **3.1.2:**
 
--   [Tweak] Removes unused (legacy) context from `<Time />` constructor
+- [Tweak] Removes unused (legacy) context from `<Time />` constructor
 
 **3.1.1:**
 
--   [Tweak] Better typing for the checkbox label
+- [Tweak] Better typing for the checkbox label
 
 **3.1.0:**
 
--   [Feature] Adds typings for all components and utilities
+- [Feature] Adds typings for all components and utilities
 
 **3.0.1:**
 
--   [Fix] Formatting in the `<Time />` component wasn't working as expected, this is now fixed.
+- [Fix] Formatting in the `<Time />` component wasn't working as expected, this is now fixed.
 
 **3.0.0:**
 
--   [Breaking] Changed namespacing from `.reactist.popover {}` to `.reactist_popover {}`. Customizing components' styling need to update accordingly.
+- [Breaking] Changed namespacing from `.reactist.popover {}` to `.reactist_popover {}`. Customizing components' styling need to update accordingly.
 
 **2.0.2:**
 
--   [Tweak] Changed time formatting from `yesterday` to `1d`
+- [Tweak] Changed time formatting from `yesterday` to `1d`
 
 **2.0.1:**
 
--   _Empty release_
+- _Empty release_
 
 **2.0.0:**
 
--   [Breaking] Styles are no longer included automatically but need to be loaded manually. See the readme for a detailed instruction on how to achieve that.
+- [Breaking] Styles are no longer included automatically but need to be loaded manually. See the readme for a detailed instruction on how to achieve that.
 
 **1.22.06:**
 
--   [New] Added a `refresh` prop to `<Time />` component in order to keep the information shown up-to-date when the component displays "time ago". By default, the component will re-render every 60 seconds.
+- [New] Added a `refresh` prop to `<Time />` component in order to keep the information shown up-to-date when the component displays "time ago". By default, the component will re-render every 60 seconds.
 
 **1.22.05:**
 
--   [Fix] Fixed the `display: intial` CSS rule for IE11 users (affects the `<Popover />` component)
+- [Fix] Fixed the `display: intial` CSS rule for IE11 users (affects the `<Popover />` component)
 
 **1.22.04:**
 
--   [Tweak] Fixed unsupported `display: initial` in IE11
+- [Tweak] Fixed unsupported `display: initial` in IE11
 
 **1.22.04:**
 
--   [Tweak] Fixed broken styles for `<Modal>` on small screens
+- [Tweak] Fixed broken styles for `<Modal>` on small screens
 
 **1.22.03:**
 
--   [Tweak] `<Popover />` content can now be a function which will only be lazily evaluated
+- [Tweak] `<Popover />` content can now be a function which will only be lazily evaluated
 
 **1.22.02:**
 
--   [Tweak] `<Popover />` content is now rendered lazily (i.e. only if `visible` is `true`)
+- [Tweak] `<Popover />` content is now rendered lazily (i.e. only if `visible` is `true`)
 
 **1.22.01:**
 
--   [Tweak] `<Modal.Body />` now starts to scroll instead of requiring the whole window to scroll.
+- [Tweak] `<Modal.Body />` now starts to scroll instead of requiring the whole window to scroll.
 
 **1.22.00:**
 
--   [Tweak] `<Dropdown.Body />` can now be a function which allows for lazy evaluation (i.e. content is only rendered when dropdown is opened).
+- [Tweak] `<Dropdown.Body />` can now be a function which allows for lazy evaluation (i.e. content is only rendered when dropdown is opened).
 
 **1.21.00:**
 
--   [Tweak] introduced `.npmignore` file to keep released package smaller and only include the essentials. This also fixes a bug in **v1.20.00** where parts of the `.git` directory ended up in the file package.
+- [Tweak] introduced `.npmignore` file to keep released package smaller and only include the essentials. This also fixes a bug in **v1.20.00** where parts of the `.git` directory ended up in the file package.
 
 **1.20.00:**
 
--   [Tweak] Replaced Moment with [Day.js](https://github.com/iamkun/dayjs)
+- [Tweak] Replaced Moment with [Day.js](https://github.com/iamkun/dayjs)
 
     🚨 This introduces a new peerDependency (`dayjs`) and removes the need for `moment`. If you're not using the `<Time />` nothing should change for you.
 
 **1.19.00:**
 
--   [Tweak] Changed the way the `<Time />` component formats it's time. You now have more control to influence the date and time format from the outside
+- [Tweak] Changed the way the `<Time />` component formats it's time. You now have more control to influence the date and time format from the outside
 
 **1.18.15:**
 
--   [Tweak] Using a 3px border-radius everywhere instead of a mixture of 3px and 4px
+- [Tweak] Using a 3px border-radius everywhere instead of a mixture of 3px and 4px
 
 **1.18.14:**
 
--   [Tweak] Updated the `<CloseIcon />` (used in `<Modal.Header>`) to new icon style
+- [Tweak] Updated the `<CloseIcon />` (used in `<Modal.Header>`) to new icon style
 
 **1.18.13:**
 
--   [Tweak] Decreased top and bottom margins of `<Modal />` to 40px
+- [Tweak] Decreased top and bottom margins of `<Modal />` to 40px
 
 **1.18.12:**
 
--   [Tweak] Increase left and right padding of `<Input />` to 10px to match `<Select />`
+- [Tweak] Increase left and right padding of `<Input />` to 10px to match `<Select />`
 
 **1.18.11:**
 
--   [Tweak] `<ColorPicker />` no longer shows the dropdown arrow and it's styling no longer includes margins
--   [New] `<ColorPicker />` now comes in a `small` version which is only 18px squared instead of 24px
+- [Tweak] `<ColorPicker />` no longer shows the dropdown arrow and it's styling no longer includes margins
+- [New] `<ColorPicker />` now comes in a `small` version which is only 18px squared instead of 24px
 
 **1.18.10:**
 
--   [Tweak] Switched separators (`<hr />`) in `<Dropdown />` to border gray to unify colors more
+- [Tweak] Switched separators (`<hr />`) in `<Dropdown />` to border gray to unify colors more
 
 **1.18.09:**
 
--   [Tweak] No longer force no text-decoration on `<LinkButton />`
+- [Tweak] No longer force no text-decoration on `<LinkButton />`
 
 **1.18.08:**
 
--   [New] When providing a className to `<Input />` it no longer overrides reactist' native styles
+- [New] When providing a className to `<Input />` it no longer overrides reactist' native styles
 
 **1.18.07:**
 
--   [New] Allowing to attach a ref to `<Input />`
+- [New] Allowing to attach a ref to `<Input />`
 
 **1.18.06:**
 
--   [Bug] Centering the text of `<Tooltip />`
+- [Bug] Centering the text of `<Tooltip />`
 
 **1.18.05:**
 
--   [Bug] Set visibility of `<Popover />` to `none` to avoid click jacking
+- [Bug] Set visibility of `<Popover />` to `none` to avoid click jacking
 
 **1.18.04:**
 
--   [New] Added `withArrow` property to `<Tooltip />` to support arrow-less tooltips
+- [New] Added `withArrow` property to `<Tooltip />` to support arrow-less tooltips
 
 **1.18.03:**
 
--   [Tweak] `allowVaguePositioning` now also takes the vertical positioning into account instead of only the horizontal one
+- [Tweak] `allowVaguePositioning` now also takes the vertical positioning into account instead of only the horizontal one
 
 **1.18.02:**
 
--   [Tweak] When clicking on the trigger of a `<Tooltip />` (i.e. its children) we will close the Tooltip. This is helpful so tooltips no longer overlap menu. In case you need more finegrained control over this consider using a `<Popover />` directly.
+- [Tweak] When clicking on the trigger of a `<Tooltip />` (i.e. its children) we will close the Tooltip. This is helpful so tooltips no longer overlap menu. In case you need more finegrained control over this consider using a `<Popover />` directly.
 
 **1.18.01:**
 
--   [Tweak] Reset margins on `<Input />` so it's visually aligned in Safari (and all other browsers) by default
+- [Tweak] Reset margins on `<Input />` so it's visually aligned in Safari (and all other browsers) by default
 
 **1.18.00:**
 
--   [New] Added the utility component `<KeyCapturer>`. Use it to wrap arbitrary elements and act on keyboard events happening while it is focussed
+- [New] Added the utility component `<KeyCapturer>`. Use it to wrap arbitrary elements and act on keyboard events happening while it is focussed
 
 **1.17.04:**
 
--   [Tweak] All additionally passed props to a `<Button />` are now applied to the underlying `<button>` element. This allows you to make better use of the platform (e.g `type='submit'`) or adhere to accessibility best practices
+- [Tweak] All additionally passed props to a `<Button />` are now applied to the underlying `<button>` element. This allows you to make better use of the platform (e.g `type='submit'`) or adhere to accessibility best practices
 
 **1.17.03:**
 
--   [Tweak] Moved some default styles from `<Tooltip />` to `<Popover />` which should make it easier to build nice experiences with it as you no longer need to provide all the styles
+- [Tweak] Moved some default styles from `<Tooltip />` to `<Popover />` which should make it easier to build nice experiences with it as you no longer need to provide all the styles
 
 **1.17.02:**
 
--   [New] Added `size`, `spinnerColor` and `bgColor` properties to `<Loading />` for a fully customizable loading experience
+- [New] Added `size`, `spinnerColor` and `bgColor` properties to `<Loading />` for a fully customizable loading experience
 
 **1.17.01:**
 
--   [Tweak] Unified all border colors across all components
+- [Tweak] Unified all border colors across all components
 
 **1.17.00:**
 
--   [New] Added new general purpose `<Popover />` component which also powers the `<Tooltip />` component. This allows for more flexible popovers than overriding the styles of a tooltip.
+- [New] Added new general purpose `<Popover />` component which also powers the `<Tooltip />` component. This allows for more flexible popovers than overriding the styles of a tooltip.
 
 **1.16.08:**
 
--   [New] Added support for `disabled` property to `<Checkbox />`
+- [New] Added support for `disabled` property to `<Checkbox />`
 
 **1.16.07:**
 
--   [Tweak] We now update the styles of `<Input />` when supplying the `disabled` property
+- [Tweak] We now update the styles of `<Input />` when supplying the `disabled` property
 
 **1.16.06:**
 
--   [New] Added `medium` property to `<Modal.Box />` as a new size constant. It will produce modals that are 680px wide
--   [New] Added `plain` property to `<Modal.Body />` which removes all styling from the body for custom modals
+- [New] Added `medium` property to `<Modal.Box />` as a new size constant. It will produce modals that are 680px wide
+- [New] Added `plain` property to `<Modal.Body />` which removes all styling from the body for custom modals
 
 **1.16.05:**
 
--   [Tweak] Darkened border color of `<Select />` to border color constant
+- [Tweak] Darkened border color of `<Select />` to border color constant
 
 **1.16.04:**
 
--   [Bug] Changed class name of loading `<Button />` from `loading` to `busy` to avoid clash with the `loading` class name of `<Loading />`
+- [Bug] Changed class name of loading `<Button />` from `loading` to `busy` to avoid clash with the `loading` class name of `<Loading />`
 
 **1.16.03:**
 
--   [Tweak] Darkened font and border color of secondary button to improve readability
+- [Tweak] Darkened font and border color of secondary button to improve readability
 
 **1.16.02:**
 
--   [Tweak] Relaxed prop types of most components which render strings to also accept component(s)
+- [Tweak] Relaxed prop types of most components which render strings to also accept component(s)
 
 **1.16.01:**
 
--   [Tweak] Updated icon of `<Select />` to fit our iconography
+- [Tweak] Updated icon of `<Select />` to fit our iconography
 
 **1.16.00:**
 
--   [Tooling] Updated to webpack 4, babel 7 and fixed some problems in our build process. `moment`, `classnames` and `prop-types` are now correctly treated as externals and are no longer included in our production bundle. This resulted in a reduced stat size from 703kb to 160kb ⚡️
+- [Tooling] Updated to webpack 4, babel 7 and fixed some problems in our build process. `moment`, `classnames` and `prop-types` are now correctly treated as externals and are no longer included in our production bundle. This resulted in a reduced stat size from 703kb to 160kb ⚡️
 
 **1.15.24:**
 
--   [Bug] When closing a modal by pressing esc we now prevent the browser's default behaviour (e.g. leaving fullscreen mode)
+- [Bug] When closing a modal by pressing esc we now prevent the browser's default behaviour (e.g. leaving fullscreen mode)
 
 **1.15.23:**
 
--   [Bug] Clicking on the inner overlay of `<Modal />` (aka left or right of the modal) when `closeOnOverlayClick` was set to `true` the modal wouldn't close
+- [Bug] Clicking on the inner overlay of `<Modal />` (aka left or right of the modal) when `closeOnOverlayClick` was set to `true` the modal wouldn't close
 
 **1.15.22:**
 
--   [Bug] Changing the `right` prop of `<Dropdown />` didn't have any effect as it was "cached" in internal state upon first construction
+- [Bug] Changing the `right` prop of `<Dropdown />` didn't have any effect as it was "cached" in internal state upon first construction
 
 **1.15.21:**
 
--   [Tweak] Added rounded corners to the blue line indicating an active tab
+- [Tweak] Added rounded corners to the blue line indicating an active tab
 
 **1.15.20:**
 
--   [Bug] Setting `useCapture` to `true` to catch scroll events of all elements of a page to correctly hide the tooltip
+- [Bug] Setting `useCapture` to `true` to catch scroll events of all elements of a page to correctly hide the tooltip
 
 **1.15.19:**
 
--   [New] Added `gapSize` to `<Tooltip />`
+- [New] Added `gapSize` to `<Tooltip />`
 
 **1.15.18:**
 
--   [Redesign] The `<Loading />` indicator is now a spinning circle instead of three bouncing dots
+- [Redesign] The `<Loading />` indicator is now a spinning circle instead of three bouncing dots
 
 **1.15.17:**
 
--   [Tweak] Inactive tabs use the secondary font color instead of custom gray
+- [Tweak] Inactive tabs use the secondary font color instead of custom gray
 
 **1.15.16:**
 
--   [Tweak] Darkened primary and secondary font colors for improved readability
+- [Tweak] Darkened primary and secondary font colors for improved readability
 
 **1.15.15:**
 
--   [New] Added support for the `style` property to `<Modal.Box />` and `<Modal.Body />` for when a className is not enough
+- [New] Added support for the `style` property to `<Modal.Box />` and `<Modal.Body />` for when a className is not enough
 
 **1.15.14:**
 
--   [Tweak] Sets the default value of the `delayShow` of the `<Tooltip />` component to 500ms (0.5s) instead of 1s
+- [Tweak] Sets the default value of the `delayShow` of the `<Tooltip />` component to 500ms (0.5s) instead of 1s
 
 **1.15.13:**
 
--   [Tweak] Set the margin of `<Select />` to 0 to avoid browser inconsistencies in Safari
+- [Tweak] Set the margin of `<Select />` to 0 to avoid browser inconsistencies in Safari
 
 **1.15.12:**
 
--   [Tweak] Instead of using the default delay of 1s (1000ms) for tooltips when hovering the `<Time />` component we now use 500ms (0.5s)
+- [Tweak] Instead of using the default delay of 1s (1000ms) for tooltips when hovering the `<Time />` component we now use 500ms (0.5s)
 
 **1.15.11:**
 
--   [Redesign] The `<ColorPicker />` can now show an optional active indicator on the selected color item.
-    -   Additionally, we no longer hide the active color from the selection. That means you might need to check in your code that an actual change occurred.
--   [Bug] When supplying an invalid `color` prop to the `<ColorPicker />` it would crash. Now it selects the first color in the `colorList`.
+- [Redesign] The `<ColorPicker />` can now show an optional active indicator on the selected color item.
+    - Additionally, we no longer hide the active color from the selection. That means you might need to check in your code that an actual change occurred.
+- [Bug] When supplying an invalid `color` prop to the `<ColorPicker />` it would crash. Now it selects the first color in the `colorList`.
 
 **1.15.10:**
 
--   [Tweak] Increased the size of the white inner ring that appears when hovering a color item of the `<ColorPicker />`
+- [Tweak] Increased the size of the white inner ring that appears when hovering a color item of the `<ColorPicker />`
 
 **1.15.9:**
 
--   [Redesign] New design for the `<ColorPicker />`
-    -   It now shows the color name on hover – when supplied through the `colorList` prop
--   [Bug] `<Tooltip />`s are now correctly displayed in absolutely positioned elements (esp. `<Dropdown />`s)
+- [Redesign] New design for the `<ColorPicker />`
+    - It now shows the color name on hover – when supplied through the `colorList` prop
+- [Bug] `<Tooltip />`s are now correctly displayed in absolutely positioned elements (esp. `<Dropdown />`s)
 
 ---
 
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 119cd313f..b675719b6 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -10,19 +10,19 @@ We pledge to act and interact in ways that contribute to an open, welcoming, div
 
 Examples of behavior that contributes to a positive environment for our community include:
 
--   Demonstrating empathy and kindness toward other people
--   Being respectful of differing opinions, viewpoints, and experiences
--   Giving and gracefully accepting constructive feedback
--   Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
--   Focusing on what is best not just for us as individuals, but for the overall community
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
 
 Examples of unacceptable behavior include:
 
--   The use of sexualized language or imagery, and sexual attention or advances of any kind
--   Trolling, insulting or derogatory comments, and personal or political attacks
--   Public or private harassment
--   Publishing others' private information, such as a physical or email address, without their explicit permission
--   Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Enforcement Responsibilities
 
diff --git a/README.md b/README.md
index 643a3ffe5..d5dcdba8d 100644
--- a/README.md
+++ b/README.md
@@ -197,9 +197,9 @@ We recommend you enable these tests on those Storybook stories that have several
 
 When you open a GitHub PR, you'll notice the "UI Review" and "UI Tests" CI steps.
 
--   Clicking on "Details" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).
--   Now you can review and accept your changes (or go back and change your code).
--   When you're happy with your changes, make sure to mark them as "Approved".
+- Clicking on "Details" will bring you to the Chromatic UI (if you don't already have a Chromatic account, please sign-up using your GitHub account).
+- Now you can review and accept your changes (or go back and change your code).
+- When you're happy with your changes, make sure to mark them as "Approved".
 
 # Releasing
 
@@ -208,7 +208,6 @@ This project uses [release-please](https://github.com/googleapis/release-please)
 ## How it works
 
 1. Make your changes using [Conventional Commits](https://www.conventionalcommits.org/):
-
     - `feat:` for new features (minor version bump)
     - `fix:` for bug fixes (patch version bump)
     - `style:` for code style changes
@@ -223,7 +222,6 @@ This project uses [release-please](https://github.com/googleapis/release-please)
     - `chore:` for maintenance tasks (NOTE: these are not included in the changelog)
 
 2. When commits are pushed to `main`:
-
     - Release-please automatically creates/updates a release PR
     - The PR includes version bump and changelog updates
     - Review the PR and merge when ready
diff --git a/babel.config.js b/babel.config.js
index 828f4ad78..802cd815d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -8,7 +8,12 @@ module.exports = {
                 targets: test ? { node: 'current' } : { browsers: 'defaults, not IE 11' },
             },
         ],
-        '@babel/preset-react',
+        [
+            '@babel/preset-react',
+            {
+                runtime: 'automatic',
+            },
+        ],
         '@babel/preset-typescript',
     ],
     plugins: ['@babel/proposal-object-rest-spread'],
diff --git a/package-lock.json b/package-lock.json
index d0b5c1e58..395030708 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,8 +33,8 @@
                 "@babel/preset-react": "^7.0.0",
                 "@babel/preset-typescript": "^7.10.1",
                 "@babel/register": "^7.0.0",
-                "@doist/eslint-config": "^7.1.2",
-                "@doist/prettier-config": "^3.0.5",
+                "@doist/eslint-config": "12.0.0",
+                "@doist/prettier-config": "4.0.0",
                 "@doist/tsconfig": "^1.0.0",
                 "@geometricpanda/storybook-addon-badges": "^0.2.2",
                 "@rollup/plugin-commonjs": "28.0.9",
@@ -63,8 +63,8 @@
                 "@types/marked": "^4.0.8",
                 "@types/react": "18.3.1",
                 "@types/react-dom": "18.3.0",
-                "@typescript-eslint/eslint-plugin": "^5.25.0",
-                "@typescript-eslint/parser": "^5.25.0",
+                "@typescript-eslint/eslint-plugin": "8.46.2",
+                "@typescript-eslint/parser": "8.46.2",
                 "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
                 "autoprefixer": "^9.8.0",
                 "babel-core": "^7.0.0-bridge.0",
@@ -73,13 +73,13 @@
                 "classnames": "^2.2.5",
                 "css-loader": "^4.2.2",
                 "cssnano": "^5.0.16",
-                "eslint": "^8.16.0",
+                "eslint": "8.57.1",
                 "eslint-config-prettier": "^8.5.0",
                 "eslint-formatter-codeframe": "^7.32.1",
-                "eslint-plugin-jest": "^26.2.2",
+                "eslint-plugin-jest": "28.14.0",
                 "eslint-plugin-jsx-a11y": "^6.5.1",
-                "eslint-plugin-prettier": "^4.0.0",
-                "eslint-plugin-react": "^7.30.0",
+                "eslint-plugin-prettier": "5.5.4",
+                "eslint-plugin-react": "7.37.5",
                 "husky": "^4.3.0",
                 "jest": "^28.1.0",
                 "jest-axe": "^5.0.1",
@@ -94,7 +94,7 @@
                 "optimize-css-assets-webpack-plugin": "^5.0.3",
                 "path": "^0.12.7",
                 "plop": "^3.1.1",
-                "prettier": "2.1.2",
+                "prettier": "3.6.2",
                 "raw-loader": "^4.0.1",
                 "react": "^17.0.2",
                 "react-docgen-typescript-loader": "^3.7.2",
@@ -2587,33 +2587,50 @@
             }
         },
         "node_modules/@doist/eslint-config": {
-            "version": "7.5.0",
-            "resolved": "https://registry.npmjs.org/@doist/eslint-config/-/eslint-config-7.5.0.tgz",
-            "integrity": "sha512-FAkL57zX5QSLYom3/VInhiLpxO5GQz3/mrpKsM92mM4yRE1rZ5/6Wtdq1zjOxpXXTMdWNqW/jWqZ3SIGxbqerA==",
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/@doist/eslint-config/-/eslint-config-12.0.0.tgz",
+            "integrity": "sha512-rItZqA/HAXAB6h/Zldw0AtnRKmOX187MmzEHh+D7Dj96gib8QWXKxh2wlO9sEj8Vtjp4LbB+IftEhtzNul+MLA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "eslint-config-prettier": "^8.5.0"
+                "@doist/eslint-plugin-doist": "1.0.0",
+                "eslint-config-prettier": "^8.8.0"
             },
             "peerDependencies": {
-                "@typescript-eslint/eslint-plugin": "^4.33.0 || ^5.16.0",
-                "@typescript-eslint/parser": "^4.33.0 || ^5.16.0",
-                "eslint": "^7.32.0 || ^8.11.0",
+                "@typescript-eslint/eslint-plugin": "^6.0.0 || ^7.0.0 || ^8.0.0",
+                "@typescript-eslint/parser": "^6.0.0 || ^7.0.0 || ^8.0.0",
+                "eslint": "^8.57.0",
                 "eslint-plugin-import": "^2.25.4",
-                "eslint-plugin-prettier": "^4.0.0",
+                "eslint-plugin-prettier": "^5.0.0",
                 "eslint-plugin-react": "^7.29.4",
-                "eslint-plugin-react-hooks": "^4.3.0",
-                "eslint-plugin-simple-import-sort": "^7.0.0 || ^8.0.0"
+                "eslint-plugin-react-hooks": "^7.0.1",
+                "eslint-plugin-simple-import-sort": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^12.0.0"
+            }
+        },
+        "node_modules/@doist/eslint-plugin-doist": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@doist/eslint-plugin-doist/-/eslint-plugin-doist-1.0.0.tgz",
+            "integrity": "sha512-WU4ktTRp5aJAF116mlZhDlDKPGeIO9mj3IFypbpVeDWOQ/Hw84QdHydJ/aef4Ovq4Z1u0RpKkMXcmL7YCRuvjw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "requireindex": "^1.2.0"
+            },
+            "engines": {
+                "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+            },
+            "peerDependencies": {
+                "eslint": ">=7"
             }
         },
         "node_modules/@doist/prettier-config": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/@doist/prettier-config/-/prettier-config-3.0.5.tgz",
-            "integrity": "sha512-QvMAKaXkg3Jib3VL/2yxFk7sHlUpHm3IsdaBEoDEvBGJL4Y8TtPl3Yvi3Cam9bV5yiuDJbA+Co3NDRMA4iAxog==",
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@doist/prettier-config/-/prettier-config-4.0.0.tgz",
+            "integrity": "sha512-wp3DL0qFciDk63O8jTKGX+xPwpliq+0532ODIXcsBVm65aJrzvPlrUM2BeOrSKiLEbWnTELRboVebBaDedLJuA==",
             "dev": true,
             "license": "MIT",
             "peerDependencies": {
-                "prettier": "^2.0.0"
+                "prettier": "^3.0.0"
             }
         },
         "node_modules/@doist/tsconfig": {
@@ -4359,6 +4376,19 @@
                 "node": ">=10"
             }
         },
+        "node_modules/@pkgr/core": {
+            "version": "0.2.9",
+            "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
+            "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/pkgr"
+            }
+        },
         "node_modules/@rollup/plugin-commonjs": {
             "version": "28.0.9",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.9.tgz",
@@ -7965,13 +7995,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/@types/semver": {
-            "version": "7.7.1",
-            "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
-            "integrity": "sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/@types/source-list-map": {
             "version": "0.1.6",
             "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.6.tgz",
@@ -8098,135 +8121,160 @@
             "license": "MIT"
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-            "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.2.tgz",
+            "integrity": "sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@eslint-community/regexpp": "^4.4.0",
-                "@typescript-eslint/scope-manager": "5.62.0",
-                "@typescript-eslint/type-utils": "5.62.0",
-                "@typescript-eslint/utils": "5.62.0",
-                "debug": "^4.3.4",
+                "@eslint-community/regexpp": "^4.10.0",
+                "@typescript-eslint/scope-manager": "8.46.2",
+                "@typescript-eslint/type-utils": "8.46.2",
+                "@typescript-eslint/utils": "8.46.2",
+                "@typescript-eslint/visitor-keys": "8.46.2",
                 "graphemer": "^1.4.0",
-                "ignore": "^5.2.0",
-                "natural-compare-lite": "^1.4.0",
-                "semver": "^7.3.7",
-                "tsutils": "^3.21.0"
+                "ignore": "^7.0.0",
+                "natural-compare": "^1.4.0",
+                "ts-api-utils": "^2.1.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "@typescript-eslint/parser": "^5.0.0",
-                "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-            },
-            "peerDependenciesMeta": {
-                "typescript": {
-                    "optional": true
-                }
+                "@typescript-eslint/parser": "^8.46.2",
+                "eslint": "^8.57.0 || ^9.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
             }
         },
-        "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-            "version": "7.7.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-            "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+        "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+            "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
             "dev": true,
-            "license": "ISC",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
+            "license": "MIT",
             "engines": {
-                "node": ">=10"
+                "node": ">= 4"
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-            "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.2.tgz",
+            "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
             "dev": true,
-            "license": "BSD-2-Clause",
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.62.0",
-                "@typescript-eslint/types": "5.62.0",
-                "@typescript-eslint/typescript-estree": "5.62.0",
+                "@typescript-eslint/scope-manager": "8.46.2",
+                "@typescript-eslint/types": "8.46.2",
+                "@typescript-eslint/typescript-estree": "8.46.2",
+                "@typescript-eslint/visitor-keys": "8.46.2",
                 "debug": "^4.3.4"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+                "eslint": "^8.57.0 || ^9.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/project-service": {
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
+            "integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/tsconfig-utils": "^8.46.2",
+                "@typescript-eslint/types": "^8.46.2",
+                "debug": "^4.3.4"
             },
-            "peerDependenciesMeta": {
-                "typescript": {
-                    "optional": true
-                }
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-            "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.2.tgz",
+            "integrity": "sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "5.62.0",
-                "@typescript-eslint/visitor-keys": "5.62.0"
+                "@typescript-eslint/types": "8.46.2",
+                "@typescript-eslint/visitor-keys": "8.46.2"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             }
         },
+        "node_modules/@typescript-eslint/tsconfig-utils": {
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
+            "integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-            "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.46.2.tgz",
+            "integrity": "sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "5.62.0",
-                "@typescript-eslint/utils": "5.62.0",
+                "@typescript-eslint/types": "8.46.2",
+                "@typescript-eslint/typescript-estree": "8.46.2",
+                "@typescript-eslint/utils": "8.46.2",
                 "debug": "^4.3.4",
-                "tsutils": "^3.21.0"
+                "ts-api-utils": "^2.1.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "*"
-            },
-            "peerDependenciesMeta": {
-                "typescript": {
-                    "optional": true
-                }
+                "eslint": "^8.57.0 || ^9.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-            "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+            "integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
@@ -8234,31 +8282,58 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-            "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
+            "integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
             "dev": true,
-            "license": "BSD-2-Clause",
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "5.62.0",
-                "@typescript-eslint/visitor-keys": "5.62.0",
+                "@typescript-eslint/project-service": "8.46.2",
+                "@typescript-eslint/tsconfig-utils": "8.46.2",
+                "@typescript-eslint/types": "8.46.2",
+                "@typescript-eslint/visitor-keys": "8.46.2",
                 "debug": "^4.3.4",
-                "globby": "^11.1.0",
+                "fast-glob": "^3.3.2",
                 "is-glob": "^4.0.3",
-                "semver": "^7.3.7",
-                "tsutils": "^3.21.0"
+                "minimatch": "^9.0.4",
+                "semver": "^7.6.0",
+                "ts-api-utils": "^2.1.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
-            "peerDependenciesMeta": {
-                "typescript": {
-                    "optional": true
-                }
+            "peerDependencies": {
+                "typescript": ">=4.8.4 <6.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+            "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+            "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
             }
         },
         "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
@@ -8275,63 +8350,60 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-            "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.2.tgz",
+            "integrity": "sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@eslint-community/eslint-utils": "^4.2.0",
-                "@types/json-schema": "^7.0.9",
-                "@types/semver": "^7.3.12",
-                "@typescript-eslint/scope-manager": "5.62.0",
-                "@typescript-eslint/types": "5.62.0",
-                "@typescript-eslint/typescript-estree": "5.62.0",
-                "eslint-scope": "^5.1.1",
-                "semver": "^7.3.7"
+                "@eslint-community/eslint-utils": "^4.7.0",
+                "@typescript-eslint/scope-manager": "8.46.2",
+                "@typescript-eslint/types": "8.46.2",
+                "@typescript-eslint/typescript-estree": "8.46.2"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             },
             "peerDependencies": {
-                "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-            }
-        },
-        "node_modules/@typescript-eslint/utils/node_modules/semver": {
-            "version": "7.7.3",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-            "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-            "dev": true,
-            "license": "ISC",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
+                "eslint": "^8.57.0 || ^9.0.0",
+                "typescript": ">=4.8.4 <6.0.0"
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "5.62.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-            "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
+            "version": "8.46.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
+            "integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "5.62.0",
-                "eslint-visitor-keys": "^3.3.0"
+                "@typescript-eslint/types": "8.46.2",
+                "eslint-visitor-keys": "^4.2.1"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/typescript-eslint"
             }
         },
+        "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+            "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
         "node_modules/@ungap/structured-clone": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -14760,20 +14832,21 @@
             }
         },
         "node_modules/eslint-plugin-jest": {
-            "version": "26.9.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.9.0.tgz",
-            "integrity": "sha512-TWJxWGp1J628gxh2KhaH1H1paEdgE2J61BBF1I59c6xWeL5+D1BzMxGDN/nXAfX+aSkR5u80K+XhskK6Gwq9ng==",
+            "version": "28.14.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.14.0.tgz",
+            "integrity": "sha512-P9s/qXSMTpRTerE2FQ0qJet2gKbcGyFTPAJipoKxmWqR6uuFqIqk8FuEfg5yBieOezVrEfAMZrEwJ6yEp+1MFQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/utils": "^5.10.0"
+                "@typescript-eslint/utils": "^6.0.0 || ^7.0.0 || ^8.0.0"
             },
             "engines": {
-                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+                "node": "^16.10.0 || ^18.12.0 || >=20.0.0"
             },
             "peerDependencies": {
-                "@typescript-eslint/eslint-plugin": "^5.0.0",
-                "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+                "@typescript-eslint/eslint-plugin": "^6.0.0 || ^7.0.0 || ^8.0.0",
+                "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
+                "jest": "*"
             },
             "peerDependenciesMeta": {
                 "@typescript-eslint/eslint-plugin": {
@@ -14835,22 +14908,31 @@
             }
         },
         "node_modules/eslint-plugin-prettier": {
-            "version": "4.2.5",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.5.tgz",
-            "integrity": "sha512-9Ni+xgemM2IWLq6aXEpP2+V/V30GeA/46Ar629vcMqVPodFFWC9skHu/D1phvuqtS8bJCFnNf01/qcmqYEwNfg==",
+            "version": "5.5.4",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.4.tgz",
+            "integrity": "sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "prettier-linter-helpers": "^1.0.0"
+                "prettier-linter-helpers": "^1.0.0",
+                "synckit": "^0.11.7"
             },
             "engines": {
-                "node": ">=12.0.0"
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-plugin-prettier"
             },
             "peerDependencies": {
-                "eslint": ">=7.28.0",
-                "prettier": ">=2.0.0"
+                "@types/eslint": ">=8.0.0",
+                "eslint": ">=8.0.0",
+                "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+                "prettier": ">=3.0.0"
             },
             "peerDependenciesMeta": {
+                "@types/eslint": {
+                    "optional": true
+                },
                 "eslint-config-prettier": {
                     "optional": true
                 }
@@ -14890,17 +14972,24 @@
             }
         },
         "node_modules/eslint-plugin-react-hooks": {
-            "version": "4.6.2",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-            "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+            "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
             "dev": true,
             "license": "MIT",
             "peer": true,
+            "dependencies": {
+                "@babel/core": "^7.24.4",
+                "@babel/parser": "^7.24.4",
+                "hermes-parser": "^0.25.1",
+                "zod": "^3.25.0 || ^4.0.0",
+                "zod-validation-error": "^3.5.0 || ^4.0.0"
+            },
             "engines": {
-                "node": ">=10"
+                "node": ">=18"
             },
             "peerDependencies": {
-                "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+                "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
             }
         },
         "node_modules/eslint-plugin-react/node_modules/doctrine": {
@@ -14945,30 +15034,6 @@
                 "eslint": ">=5.0.0"
             }
         },
-        "node_modules/eslint-scope": {
-            "version": "5.1.1",
-            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-            "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-            "dev": true,
-            "license": "BSD-2-Clause",
-            "dependencies": {
-                "esrecurse": "^4.3.0",
-                "estraverse": "^4.1.1"
-            },
-            "engines": {
-                "node": ">=8.0.0"
-            }
-        },
-        "node_modules/eslint-scope/node_modules/estraverse": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-            "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-            "dev": true,
-            "license": "BSD-2-Clause",
-            "engines": {
-                "node": ">=4.0"
-            }
-        },
         "node_modules/eslint-visitor-keys": {
             "version": "3.4.3",
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -17330,6 +17395,25 @@
                 "tslib": "^2.0.3"
             }
         },
+        "node_modules/hermes-estree": {
+            "version": "0.25.1",
+            "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+            "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/hermes-parser": {
+            "version": "0.25.1",
+            "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+            "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "hermes-estree": "0.25.1"
+            }
+        },
         "node_modules/hex-color-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -23778,13 +23862,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/natural-compare-lite": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-            "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/nearley": {
             "version": "2.20.1",
             "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
@@ -27368,16 +27445,19 @@
             }
         },
         "node_modules/prettier": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz",
-            "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==",
+            "version": "3.6.2",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+            "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
             "dev": true,
             "license": "MIT",
             "bin": {
-                "prettier": "bin-prettier.js"
+                "prettier": "bin/prettier.cjs"
             },
             "engines": {
-                "node": ">=10.13.0"
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
         "node_modules/prettier-linter-helpers": {
@@ -29245,6 +29325,16 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/requireindex": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+            "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.5"
+            }
+        },
         "node_modules/requires-port": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -31923,6 +32013,22 @@
             "dev": true,
             "license": "BSD-3-Clause"
         },
+        "node_modules/synckit": {
+            "version": "0.11.11",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.11.tgz",
+            "integrity": "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@pkgr/core": "^0.2.9"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/synckit"
+            }
+        },
         "node_modules/tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -32533,6 +32639,19 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/ts-api-utils": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+            "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.12"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.8.4"
+            }
+        },
         "node_modules/ts-dedent": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
@@ -32637,29 +32756,6 @@
             "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
             "license": "0BSD"
         },
-        "node_modules/tsutils": {
-            "version": "3.21.0",
-            "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-            "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "tslib": "^1.8.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            },
-            "peerDependencies": {
-                "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-            }
-        },
-        "node_modules/tsutils/node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-            "dev": true,
-            "license": "0BSD"
-        },
         "node_modules/tty-browserify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -35250,6 +35346,31 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/zod": {
+            "version": "4.1.12",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
+            "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "funding": {
+                "url": "https://github.com/sponsors/colinhacks"
+            }
+        },
+        "node_modules/zod-validation-error": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+            "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "peerDependencies": {
+                "zod": "^3.25.0 || ^4.0.0"
+            }
+        },
         "node_modules/zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index e928b7607..6bb2349b5 100644
--- a/package.json
+++ b/package.json
@@ -80,8 +80,8 @@
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.10.1",
         "@babel/register": "^7.0.0",
-        "@doist/eslint-config": "^7.1.2",
-        "@doist/prettier-config": "^3.0.5",
+        "@doist/eslint-config": "12.0.0",
+        "@doist/prettier-config": "4.0.0",
         "@doist/tsconfig": "^1.0.0",
         "@geometricpanda/storybook-addon-badges": "^0.2.2",
         "@rollup/plugin-commonjs": "28.0.9",
@@ -110,8 +110,8 @@
         "@types/marked": "^4.0.8",
         "@types/react": "18.3.1",
         "@types/react-dom": "18.3.0",
-        "@typescript-eslint/eslint-plugin": "^5.25.0",
-        "@typescript-eslint/parser": "^5.25.0",
+        "@typescript-eslint/eslint-plugin": "8.46.2",
+        "@typescript-eslint/parser": "8.46.2",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
         "autoprefixer": "^9.8.0",
         "babel-core": "^7.0.0-bridge.0",
@@ -120,13 +120,13 @@
         "classnames": "^2.2.5",
         "css-loader": "^4.2.2",
         "cssnano": "^5.0.16",
-        "eslint": "^8.16.0",
+        "eslint": "8.57.1",
         "eslint-config-prettier": "^8.5.0",
         "eslint-formatter-codeframe": "^7.32.1",
-        "eslint-plugin-jest": "^26.2.2",
+        "eslint-plugin-jest": "28.14.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-react": "^7.30.0",
+        "eslint-plugin-prettier": "5.5.4",
+        "eslint-plugin-react": "7.37.5",
         "husky": "^4.3.0",
         "jest": "^28.1.0",
         "jest-axe": "^5.0.1",
@@ -141,7 +141,7 @@
         "optimize-css-assets-webpack-plugin": "^5.0.3",
         "path": "^0.12.7",
         "plop": "^3.1.1",
-        "prettier": "2.1.2",
+        "prettier": "3.6.2",
         "raw-loader": "^4.0.1",
         "react": "^17.0.2",
         "react-docgen-typescript-loader": "^3.7.2",
diff --git a/src/avatar/avatar.test.tsx b/src/avatar/avatar.test.tsx
index 6561a4adc..f26414eed 100644
--- a/src/avatar/avatar.test.tsx
+++ b/src/avatar/avatar.test.tsx
@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/react'
-import * as React from 'react'
 
 import { Avatar } from './avatar'
 
+import type { ComponentProps } from 'react'
+
 describe('Avatar', () => {
     it('renders a background image when avatarUrl is supplied', () => {
         render(getAvatar({ avatarUrl: 'https://foo.bar/com.png' }))
@@ -47,7 +48,7 @@ describe('Avatar', () => {
 
     // Helpers ================================================================
     function getAvatar(
-        props?: Omit<React.ComponentProps<typeof Avatar>, 'user'> & {
+        props?: Omit<ComponentProps<typeof Avatar>, 'user'> & {
             user?: { name?: string; email: string }
         },
     ) {
diff --git a/src/avatar/avatar.tsx b/src/avatar/avatar.tsx
index c52f0a63f..48b98f3da 100644
--- a/src/avatar/avatar.tsx
+++ b/src/avatar/avatar.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
+import { Box } from '../box'
+import { getClassNames, ResponsiveProp } from '../utils/responsive-props'
 
-import { getInitials, emailToIndex } from './utils'
+import { emailToIndex, getInitials } from './utils'
 
-import { getClassNames, ResponsiveProp } from '../utils/responsive-props'
 import styles from './avatar.module.css'
-import { Box } from '../box'
+
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 const AVATAR_COLORS = [
diff --git a/src/avatar/utils.test.ts b/src/avatar/utils.test.ts
index 11164294b..4cb13c2f0 100644
--- a/src/avatar/utils.test.ts
+++ b/src/avatar/utils.test.ts
@@ -1,4 +1,4 @@
-import { getInitials, emailToIndex } from './utils'
+import { emailToIndex, getInitials } from './utils'
 
 describe('Utils', () => {
     describe('getInitials', () => {
diff --git a/src/avatar/utils.ts b/src/avatar/utils.ts
index a5c6d890b..633f9efe1 100644
--- a/src/avatar/utils.ts
+++ b/src/avatar/utils.ts
@@ -27,4 +27,4 @@ function emailToIndex(email: string, maxIndex: number) {
     return hash % maxIndex
 }
 
-export { getInitials, emailToIndex }
+export { emailToIndex, getInitials }
diff --git a/src/badge/badge.test.tsx b/src/badge/badge.test.tsx
index a5594a5ef..e4d71249e 100644
--- a/src/badge/badge.test.tsx
+++ b/src/badge/badge.test.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+
 import { Badge } from './badge'
 
 describe('Badge', () => {
diff --git a/src/badge/badge.tsx b/src/badge/badge.tsx
index faa44f810..1e74b476e 100644
--- a/src/badge/badge.tsx
+++ b/src/badge/badge.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { Box } from '../box'
 
 import styles from './badge.module.css'
diff --git a/src/banner/banner.test.tsx b/src/banner/banner.test.tsx
index b86daaf5b..14e45da68 100644
--- a/src/banner/banner.test.tsx
+++ b/src/banner/banner.test.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
+
 import { Banner, SystemBannerType } from './banner'
-import userEvent from '@testing-library/user-event'
 
 describe('Banner', () => {
     it('renders as a <div /> element', () => {
diff --git a/src/banner/banner.tsx b/src/banner/banner.tsx
index 25d1be370..4df31a66e 100644
--- a/src/banner/banner.tsx
+++ b/src/banner/banner.tsx
@@ -1,12 +1,21 @@
-import * as React from 'react'
-import { Box } from '../box'
-import { useId } from '../utils/common-helpers'
+import { forwardRef, Fragment } from 'react'
 
-import styles from './banner.module.css'
+import { Box } from '../box'
 import { Button, ButtonProps, IconButton } from '../button'
-import { CloseIcon } from '../icons/close-icon'
 import { BannerIcon } from '../icons/banner-icon'
+import { CloseIcon } from '../icons/close-icon'
 import { TextLink } from '../text-link'
+import { useId } from '../utils/common-helpers'
+
+import styles from './banner.module.css'
+
+import type {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    ComponentProps,
+    ReactElement,
+    ReactNode,
+} from 'react'
 
 /**
  * Represents the type of a banner.
@@ -26,11 +35,11 @@ type BaseAction = {
     label: string
 } & Pick<ButtonProps, 'loading' | 'disabled'>
 type ActionButton = BaseAction & { type: 'button' } & Omit<
-        React.ButtonHTMLAttributes<HTMLButtonElement>,
+        ButtonHTMLAttributes<HTMLButtonElement>,
         'className'
     >
 type ActionLink = BaseAction & { type: 'link' } & Omit<
-        React.AnchorHTMLAttributes<HTMLAnchorElement>,
+        AnchorHTMLAttributes<HTMLAnchorElement>,
         'className'
     >
 /**
@@ -43,7 +52,7 @@ type Action = ActionButton | ActionLink
  * Configuration for inline links within the banner description.
  * Extends TextLink component props with a required label.
  */
-type InlineLink = { label: string } & React.ComponentProps<typeof TextLink>
+type InlineLink = { label: string } & ComponentProps<typeof TextLink>
 
 type WithCloseButton = {
     closeLabel?: string
@@ -61,9 +70,9 @@ type CloseButton = WithCloseButton | WithoutCloseButton
 
 type BaseBanner = {
     id?: string
-    title?: React.ReactNode
-    description: Exclude<React.ReactNode, null | undefined | boolean>
-    action?: Action | React.ReactNode
+    title?: ReactNode
+    description: Exclude<ReactNode, null | undefined | boolean>
+    action?: Action | ReactNode
     inlineLinks?: InlineLink[]
 } & CloseButton
 
@@ -74,8 +83,8 @@ type BaseBanner = {
 type NeutralBanner = BaseBanner & {
     type: Extract<BannerType, 'neutral'>
 } & (
-        | { image: React.ReactElement; icon?: never }
-        | { icon: React.ReactElement; image?: never }
+        | { image: ReactElement; icon?: never }
+        | { icon: ReactElement; image?: never }
         | { image?: never; icon?: never }
     )
 
@@ -94,7 +103,7 @@ type BannerProps = NeutralBanner | SystemBanner
 /**
  * Type guard to check if the action is an Action object (button or link)
  */
-function isActionObject(action: Action | React.ReactNode): action is Action {
+function isActionObject(action: Action | ReactNode): action is Action {
     return (
         typeof action === 'object' &&
         action !== null &&
@@ -103,7 +112,7 @@ function isActionObject(action: Action | React.ReactNode): action is Action {
     )
 }
 
-const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
+const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
     {
         id,
         type,
@@ -170,7 +179,7 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
                             {description}
                             {inlineLinks?.map(({ label, ...props }, index) => {
                                 return (
-                                    <React.Fragment key={index}>
+                                    <Fragment key={index}>
                                         <TextLink
                                             {...props}
                                             exceptionallySetClassName={styles.inlineLink}
@@ -178,7 +187,7 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(function Banner(
                                             {label}
                                         </TextLink>
                                         {index < inlineLinks.length - 1 ? <span> · </span> : ''}
-                                    </React.Fragment>
+                                    </Fragment>
                                 )
                             })}
                         </Box>
diff --git a/src/banner/index.ts b/src/banner/index.ts
index d1d3623ab..4e86dcabb 100644
--- a/src/banner/index.ts
+++ b/src/banner/index.ts
@@ -1,2 +1,2 @@
-export { Banner } from './banner'
 export type { BannerProps } from './banner'
+export { Banner } from './banner'
diff --git a/src/banner/story-promo-image.tsx b/src/banner/story-promo-image.tsx
index 0c74b768d..5a2b0695e 100644
--- a/src/banner/story-promo-image.tsx
+++ b/src/banner/story-promo-image.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 export function PromoImage({ theme = 'light' }: { theme?: 'light' | 'dark' }) {
     if (theme === 'dark') {
         return (
diff --git a/src/base-field/base-field.tsx b/src/base-field/base-field.tsx
index 7a29ce121..8962070d9 100644
--- a/src/base-field/base-field.tsx
+++ b/src/base-field/base-field.tsx
@@ -1,13 +1,22 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { Box, BoxProps } from '../box'
-import { useId } from '../utils/common-helpers'
+import { Column, Columns } from '../columns'
+import { Spinner } from '../spinner'
+import { Stack } from '../stack'
 import { Text } from '../text'
+import { useId } from '../utils/common-helpers'
+
 import styles from './base-field.module.css'
-import { Stack } from '../stack'
 
+import type {
+    ChangeEventHandler,
+    DetailedHTMLProps,
+    InputHTMLAttributes,
+    ReactElement,
+    ReactNode,
+} from 'react'
 import type { WithEnhancedClassName } from '../utils/common-types'
-import { Spinner } from '../spinner'
-import { Column, Columns } from '../columns'
 
 // Define the remaining characters before the character count turns red
 // See: https://twist.com/a/1585/ch/765851/t/6664583/c/93631846 for latest spec
@@ -17,7 +26,7 @@ type FieldTone = 'neutral' | 'success' | 'error' | 'loading'
 
 type FieldMessageProps = {
     id: string
-    children: React.ReactNode
+    children: ReactNode
     tone: FieldTone
 }
 
@@ -44,7 +53,7 @@ function FieldMessage({ id, children, tone }: FieldMessageProps) {
 }
 
 type FieldCharacterCountProps = {
-    children: React.ReactNode
+    children: ReactNode
     tone: FieldTone
 }
 
@@ -57,7 +66,7 @@ function FieldCharacterCount({ children, tone }: FieldCharacterCountProps) {
 }
 
 type ValidateInputLengthProps = {
-    value?: React.InputHTMLAttributes<unknown>['value']
+    value?: InputHTMLAttributes<unknown>['value']
     maxLength?: number
 }
 
@@ -92,17 +101,14 @@ function validateInputLength({
 
 type ChildrenRenderProps = {
     id: string
-    value?: React.InputHTMLAttributes<unknown>['value']
+    value?: InputHTMLAttributes<unknown>['value']
     'aria-describedby'?: string
     'aria-invalid'?: true
-    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
-    characterCountElement?: React.ReactNode | null
+    onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+    characterCountElement?: ReactNode | null
 }
 
-type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<
-    React.InputHTMLAttributes<T>,
-    T
->
+type HtmlInputProps<T extends HTMLElement> = DetailedHTMLProps<InputHTMLAttributes<T>, T>
 
 type BaseFieldVariant = 'default' | 'bordered'
 type BaseFieldVariantProps = {
@@ -135,7 +141,7 @@ export type BaseFieldProps = WithEnhancedClassName &
          *
          * @see BaseFieldProps['auxiliaryLabel']
          */
-        label: React.ReactNode
+        label: ReactNode
 
         /**
          * The initial value for this field element.
@@ -143,7 +149,7 @@ export type BaseFieldProps = WithEnhancedClassName &
          * This prop is used to calculate the character count for the initial value, and is then
          * passed to the underlying child element.
          */
-        value?: React.InputHTMLAttributes<unknown>['value']
+        value?: InputHTMLAttributes<unknown>['value']
 
         /**
          * An optional extra element to be placed to the right of the main label.
@@ -156,7 +162,7 @@ export type BaseFieldProps = WithEnhancedClassName &
          * @deprecated The usage of this element is discouraged given that it was removed from the
          * latest form field spec revision.
          */
-        auxiliaryLabel?: React.ReactNode
+        auxiliaryLabel?: ReactNode
 
         /**
          * A message associated with the field. It is rendered below the field, and with an
@@ -172,7 +178,7 @@ export type BaseFieldProps = WithEnhancedClassName &
          * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage
          * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
          */
-        message?: React.ReactNode
+        message?: ReactNode
 
         /**
          * The tone with which the message, if any, is presented.
@@ -204,7 +210,7 @@ export type BaseFieldProps = WithEnhancedClassName &
          * Used internally by components composed using `BaseField`. It is not exposed as part of
          * the public props of such components.
          */
-        children: (props: ChildrenRenderProps) => React.ReactNode
+        children: (props: ChildrenRenderProps) => ReactNode
 
         /**
          * The position of the character count element.
@@ -221,7 +227,7 @@ export type BaseFieldProps = WithEnhancedClassName &
           }
         | {
               supportsStartAndEndSlots: true
-              endSlot?: React.ReactElement | string | number
+              endSlot?: ReactElement | string | number
               /**
                * This is solely for `bordered` variants of TextField. When set to `bottom` (the default),
                * the endSlot will be placed inline with the input field. When set to `fullHeight`, the endSlot
@@ -263,8 +269,11 @@ function BaseField({
 
     const inputLength = validateInputLength({ value, maxLength })
 
-    const [characterCount, setCharacterCount] = React.useState<string | null>(inputLength.count)
-    const [characterCountTone, setCharacterCountTone] = React.useState<FieldTone>(inputLength.tone)
+    const [previousValue, setPreviousValue] = useState<BaseFieldProps['value']>(value)
+    const [previousMaxLength, setPreviousMaxLength] =
+        useState<BaseFieldProps['maxLength']>(maxLength)
+    const [characterCount, setCharacterCount] = useState<string | null>(inputLength.count)
+    const [characterCountTone, setCharacterCountTone] = useState<FieldTone>(inputLength.tone)
 
     const ariaDescribedBy = originalAriaDescribedBy ?? (message ? messageId : null)
 
@@ -298,22 +307,12 @@ function BaseField({
         characterCountElement: renderCharacterCountInline ? renderCharacterCount() : null,
     }
 
-    React.useEffect(
-        function updateCharacterCountOnPropChange() {
-            if (!maxLength) {
-                return
-            }
-
-            const inputLength = validateInputLength({
-                value,
-                maxLength,
-            })
-
-            setCharacterCount(inputLength.count)
-            setCharacterCountTone(inputLength.tone)
-        },
-        [maxLength, value],
-    )
+    if (value !== previousValue || maxLength !== previousMaxLength) {
+        setPreviousValue(value)
+        setPreviousMaxLength(maxLength)
+        setCharacterCount(inputLength.count)
+        setCharacterCountTone(inputLength.tone)
+    }
 
     return (
         <Stack space="xsmall" hidden={hidden}>
diff --git a/src/box/box.stories.tsx b/src/box/box.stories.tsx
index 63f397b6a..2b83926fa 100644
--- a/src/box/box.stories.tsx
+++ b/src/box/box.stories.tsx
@@ -1,34 +1,33 @@
-import * as React from 'react'
-
+import { Heading } from '../heading'
+import { Inline } from '../inline'
+import { Stack } from '../stack'
+import { Text } from '../text'
 import {
-    select,
-    selectWithNone,
-    reusableBoxProps,
+    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
-    Wrapper,
-    PartialProps,
+    reusableBoxProps,
+    select,
     selectSize,
+    selectWithNone,
+    Wrapper,
 } from '../utils/storybook-helper'
 
 import { Box, BoxBorderRadius } from './box'
-import { Inline } from '../inline'
-import { Stack } from '../stack'
-import { Text } from '../text'
-import { Heading } from '../heading'
 
+import type { CSSProperties } from 'react'
+import type { Space, SpaceWithNegatives } from '../utils/common-types'
 import type {
+    BoxAlignItems,
+    BoxBackground,
     BoxDisplay,
     BoxFlexDirection,
     BoxFlexWrap,
-    BoxAlignItems,
     BoxJustifyContent,
     BoxMarginProps,
     BoxPaddingProps,
     BoxTextAlign,
-    BoxBackground,
 } from './'
-import type { Space, SpaceWithNegatives } from '../utils/common-types'
 
 export default {
     title: 'Design system/Box',
@@ -168,7 +167,7 @@ const marginToPadding: Record<keyof BoxMarginProps, keyof BoxPaddingProps> = {
     marginLeft: 'paddingLeft',
 }
 
-const marginBoxStyle: React.CSSProperties = { opacity: 0.5, minHeight: 100, minWidth: 100 }
+const marginBoxStyle: CSSProperties = { opacity: 0.5, minHeight: 100, minWidth: 100 }
 
 function MarginBox({ prop, value }: { prop: keyof BoxMarginProps; value: Space }) {
     const marginProp = { [prop]: value }
diff --git a/src/box/box.test.tsx b/src/box/box.test.tsx
index c58bbf040..a9bb8ca60 100644
--- a/src/box/box.test.tsx
+++ b/src/box/box.test.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Box, BoxProps } from './'
 import { axe } from 'jest-axe'
 
+import { Box, BoxProps } from './'
+
 describe('Box', () => {
     it('renders its children as its content', () => {
         render(
diff --git a/src/box/box.tsx b/src/box/box.tsx
index 679f128dc..e14968a1e 100644
--- a/src/box/box.tsx
+++ b/src/box/box.tsx
@@ -1,21 +1,23 @@
-import * as React from 'react'
+import { createElement } from 'react'
+
 import classNames from 'classnames'
+
 import { polymorphicComponent } from '../utils/polymorphism'
 import { getClassNames } from '../utils/responsive-props'
 
-import type { ResponsiveProp } from '../utils/responsive-props'
+import styles from './box.module.css'
+import gapStyles from './gap.module.css'
+import marginStyles from './margin.module.css'
+import paddingStyles from './padding.module.css'
+import widthStyles from './width.module.css'
+
 import type {
     DividerWeight,
     Space,
     SpaceWithNegatives,
     WithEnhancedClassName,
 } from '../utils/common-types'
-
-import styles from './box.module.css'
-import paddingStyles from './padding.module.css'
-import marginStyles from './margin.module.css'
-import widthStyles from './width.module.css'
-import gapStyles from './gap.module.css'
+import type { ResponsiveProp } from '../utils/responsive-props'
 
 interface BoxPaddingProps {
     padding?: ResponsiveProp<Space>
@@ -229,7 +231,7 @@ const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(
     },
     ref,
 ) {
-    return React.createElement(
+    return createElement(
         component,
         {
             ...props,
@@ -277,22 +279,22 @@ const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(
 })
 
 export type {
-    BoxProps,
-    BoxPaddingProps,
-    BoxMarginProps,
-    ReusableBoxProps,
-    BoxMinWidth,
-    BoxMaxWidth,
+    BoxAlignItems,
+    BoxBackground,
+    BoxBorderRadius,
     BoxDisplay,
-    BoxPosition,
     BoxFlexDirection,
     BoxFlexWrap,
-    BoxAlignItems,
     BoxJustifyContent,
+    BoxMarginProps,
+    BoxMaxWidth,
+    BoxMinWidth,
     BoxOverflow,
+    BoxPaddingProps,
+    BoxPosition,
+    BoxProps,
     BoxTextAlign,
-    BoxBackground,
-    BoxBorderRadius,
+    ReusableBoxProps,
 }
 
 export { Box, getBoxClassNames }
diff --git a/src/button/button.test.tsx b/src/button/button.test.tsx
index 7cebc4906..99de94fc7 100644
--- a/src/button/button.test.tsx
+++ b/src/button/button.test.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
 import { act, render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Button, IconButton } from './button'
 import { axe } from 'jest-axe'
 
+import { Button, IconButton } from './button'
+
+import type { MouseEvent, MouseEventHandler } from 'react'
+
 jest.mock('../spinner', () => ({
     Spinner() {
         return '⏳'
@@ -565,9 +567,9 @@ describe('<Button render={<a href="…" />} />', () => {
 
     it('ignore clicks when disabled', () => {
         let isNavigationPrevented = false
-        const clickSpy: React.MouseEventHandler<HTMLDivElement> = jest
+        const clickSpy: MouseEventHandler<HTMLDivElement> = jest
             .fn()
-            .mockImplementation((event: React.MouseEvent<HTMLDivElement>) => {
+            .mockImplementation((event: MouseEvent<HTMLDivElement>) => {
                 isNavigationPrevented = event.defaultPrevented
             })
 
@@ -635,9 +637,9 @@ describe('<IconButton render={<a href="…" />} />', () => {
 
     it('ignore clicks when disabled', () => {
         let isNavigationPrevented = false
-        const clickSpy: React.MouseEventHandler<HTMLDivElement> = jest
+        const clickSpy: MouseEventHandler<HTMLDivElement> = jest
             .fn()
-            .mockImplementation((event: React.MouseEvent<HTMLDivElement>) => {
+            .mockImplementation((event: MouseEvent<HTMLDivElement>) => {
                 isNavigationPrevented = event.defaultPrevented
             })
 
diff --git a/src/button/button.tsx b/src/button/button.tsx
index cb1039a8f..804ad1ff4 100644
--- a/src/button/button.tsx
+++ b/src/button/button.tsx
@@ -1,6 +1,7 @@
-import * as React from 'react'
-import classNames from 'classnames'
+import { forwardRef } from 'react'
+
 import { Role, RoleProps } from '@ariakit/react'
+import classNames from 'classnames'
 
 import { Box, getBoxClassNames } from '../box'
 import { Spinner } from '../spinner'
@@ -8,20 +9,21 @@ import { Tooltip, TooltipProps } from '../tooltip'
 
 import styles from './button.module.css'
 
+import type { ButtonHTMLAttributes, ReactElement, ReactNode, SyntheticEvent } from 'react'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
-function preventDefault(event: React.SyntheticEvent) {
+function preventDefault(event: SyntheticEvent) {
     event.preventDefault()
 }
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'
 type ButtonTone = 'normal' | 'destructive'
 type ButtonSize = 'small' | 'normal' | 'large'
-type IconElement = React.ReactElement | string
+type IconElement = ReactElement | string
 
 interface CommonButtonProps
     extends ObfuscatedClassName,
-        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,
+        Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>,
         Pick<RoleProps, 'render'> {
     /**
      * The button's variant.
@@ -98,7 +100,7 @@ interface ButtonProps extends CommonButtonProps {
     /**
      * The button label content.
      */
-    children?: React.ReactNode
+    children?: ReactNode
 
     /**
      * The icon to display at the start of the button (before the label).
@@ -132,7 +134,7 @@ interface ButtonProps extends CommonButtonProps {
  * A button element that displays a text label and optionally a start or end icon. It follows the
  * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     {
         variant,
         tone = 'normal',
@@ -225,7 +227,7 @@ interface IconButtonProps extends CommonButtonProps {
  * also makes sure to always show a tooltip with its label. It follows the
  * [WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
  */
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
     {
         variant,
         tone = 'normal',
@@ -276,5 +278,5 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function
     )
 })
 
-export type { ButtonProps, IconButtonProps, ButtonVariant, ButtonTone }
+export type { ButtonProps, ButtonTone, ButtonVariant, IconButtonProps }
 export { Button, IconButton }
diff --git a/src/checkbox-field/checkbox-field.test.tsx b/src/checkbox-field/checkbox-field.test.tsx
index e024752d5..e706fdac6 100644
--- a/src/checkbox-field/checkbox-field.test.tsx
+++ b/src/checkbox-field/checkbox-field.test.tsx
@@ -1,13 +1,16 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { render, screen } from '@testing-library/react'
-import { CheckboxField } from '.'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
+
 import { TestIcon } from '../utils/test-helpers'
 
+import { CheckboxField } from '.'
+
 describe('CheckboxField', () => {
     function IndeterminateTestCase({ initialState }: { initialState: boolean[] }) {
-        const [state, setState] = React.useState<boolean[]>(initialState)
+        const [state, setState] = useState<boolean[]>(initialState)
         const checkedCount = state.filter(Boolean).length
         const indeterminate = checkedCount > 0 && checkedCount < state.length
 
@@ -151,7 +154,7 @@ describe('CheckboxField', () => {
 
     it('can be a controlled input field', () => {
         function TestCase() {
-            const [checked, setChecked] = React.useState(false)
+            const [checked, setChecked] = useState(false)
             return (
                 <>
                     <CheckboxField
diff --git a/src/checkbox-field/checkbox-field.tsx b/src/checkbox-field/checkbox-field.tsx
index ce3dcce21..1577208f6 100644
--- a/src/checkbox-field/checkbox-field.tsx
+++ b/src/checkbox-field/checkbox-field.tsx
@@ -1,10 +1,14 @@
-import * as React from 'react'
+import { forwardRef, useEffect, useRef, useState } from 'react'
+
 import { Box } from '../box'
 import { Text } from '../text'
+
 import { CheckboxIcon } from './checkbox-icon'
+import { useForkRef } from './use-fork-ref'
 
 import styles from './checkbox-field.module.css'
-import { useForkRef } from './use-fork-ref'
+
+import type { ReactElement, ReactNode } from 'react'
 
 interface CheckboxFieldProps
     extends Omit<
@@ -47,12 +51,12 @@ interface CheckboxFieldProps
     /**
      * The label for the checkbox element.
      */
-    label?: React.ReactNode
+    label?: ReactNode
 
     /**
      * The icon that should be added to the checkbox label.
      */
-    icon?: React.ReactElement | string | number
+    icon?: ReactElement | string | number
 
     /**
      * Defines whether or not the checkbox can be of a `mixed` state.
@@ -60,7 +64,7 @@ interface CheckboxFieldProps
     indeterminate?: boolean
 }
 
-const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(
+const CheckboxField = forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(
     { label, icon, disabled, indeterminate, defaultChecked, onChange, ...props },
     ref,
 ) {
@@ -76,13 +80,13 @@ const CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(fun
         console.warn('A Checkbox needs a label')
     }
 
-    const [keyFocused, setKeyFocused] = React.useState(false)
-    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)
+    const [keyFocused, setKeyFocused] = useState(false)
+    const [checkedState, setChecked] = useState(props.checked ?? defaultChecked ?? false)
     const isChecked = props.checked ?? checkedState
 
-    const internalRef = React.useRef<HTMLInputElement>(null)
+    const internalRef = useRef<HTMLInputElement>(null)
     const combinedRef = useForkRef(internalRef, ref)
-    React.useEffect(
+    useEffect(
         function setIndeterminate() {
             if (internalRef.current && typeof indeterminate === 'boolean') {
                 internalRef.current.indeterminate = indeterminate
diff --git a/src/checkbox-field/checkbox-icon.tsx b/src/checkbox-field/checkbox-icon.tsx
index 115f90495..a1f1d9271 100644
--- a/src/checkbox-field/checkbox-icon.tsx
+++ b/src/checkbox-field/checkbox-icon.tsx
@@ -1,17 +1,15 @@
-import * as React from 'react'
+import type { SVGProps } from 'react'
 
 const svgPath = {
     checked:
         'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2.457 4.293l-5.293 5.293-1.793-1.793a1 1 0 1 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l6-6a1 1 0 1 0-1.414-1.414z',
     unchecked:
         'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm0 1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z',
-    mixed:
-        'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
-    filled:
-        'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',
+    mixed: 'M18 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm-2 7H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2z',
+    filled: 'M6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4Z',
 } as const
 
-type Props = React.SVGProps<SVGSVGElement> & {
+type Props = SVGProps<SVGSVGElement> & {
     checked?: boolean
     indeterminate?: boolean
     disabled?: boolean
diff --git a/src/checkbox-field/use-fork-ref.ts b/src/checkbox-field/use-fork-ref.ts
index e7f09f0f3..1389ddd58 100644
--- a/src/checkbox-field/use-fork-ref.ts
+++ b/src/checkbox-field/use-fork-ref.ts
@@ -1,12 +1,11 @@
 import { useMemo } from 'react'
 
+import type { MutableRefObject, Ref, RefCallback } from 'react'
+
 /**
  * Sets both a function and object React ref.
  */
-function setRef<T>(
-    ref: React.RefCallback<T> | React.MutableRefObject<T> | null | undefined,
-    value: T,
-) {
+function setRef<T>(ref: RefCallback<T> | MutableRefObject<T> | null | undefined, value: T) {
     if (typeof ref === 'function') {
         ref(value)
     } else if (ref) {
@@ -17,12 +16,12 @@ function setRef<T>(
 /**
  * Merges React Refs into a single memoized function ref so you can pass it to an element.
  * @example
- * const Component = React.forwardRef((props, ref) => {
- *   const internalRef = React.useRef();
+ * const Component = forwardRef((props, ref) => {
+ *   const internalRef = useRef();
  *   return <div {...props} ref={useForkRef(internalRef, ref)} />;
  * });
  */
-function useForkRef(...refs: Array<React.Ref<unknown> | undefined>) {
+function useForkRef(...refs: Array<Ref<unknown> | undefined>) {
     return useMemo(
         () => {
             if (!refs.some(Boolean)) return
diff --git a/src/columns/columns.stories.tsx b/src/columns/columns.stories.tsx
index 7cd54d028..e09e1c592 100644
--- a/src/columns/columns.stories.tsx
+++ b/src/columns/columns.stories.tsx
@@ -1,23 +1,23 @@
-import * as React from 'react'
+import { Box } from '../box'
+import { Stack } from '../stack'
 import {
-    selectSize,
-    times,
-    reusableBoxProps,
+    disableResponsiveProps,
+    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
-    Wrapper,
+    reusableBoxProps,
+    selectSize,
     selectWithNone,
-    PartialProps,
-    disableResponsiveProps,
+    times,
+    Wrapper,
 } from '../utils/storybook-helper'
-import { Stack } from '../stack'
-import { Box } from '../box'
-import { Columns, Column } from './columns'
+
+import { Column, Columns } from './columns'
 
 import type {
+    ColumnsCollapseBelow,
     ColumnsHorizontalAlignment,
     ColumnsVerticalAlignment,
-    ColumnsCollapseBelow,
 } from './columns'
 
 export default {
diff --git a/src/columns/columns.test.tsx b/src/columns/columns.test.tsx
index 5f579de48..07588e47e 100644
--- a/src/columns/columns.test.tsx
+++ b/src/columns/columns.test.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { runSpaceTests } from '../utils/test-helpers'
-import { Columns, Column, ColumnWidth } from './'
 import { axe } from 'jest-axe'
 
+import { runSpaceTests } from '../utils/test-helpers'
+
+import { Column, Columns, ColumnWidth } from './'
+
 const columnWidths: Array<ColumnWidth> = [
     '1/2',
     '1/3',
diff --git a/src/columns/columns.tsx b/src/columns/columns.tsx
index 00c71c350..43c6de6eb 100644
--- a/src/columns/columns.tsx
+++ b/src/columns/columns.tsx
@@ -1,14 +1,13 @@
-import * as React from 'react'
+import { Box } from '../box'
 import { polymorphicComponent } from '../utils/polymorphism'
 import { getClassNames, mapResponsiveProp } from '../utils/responsive-props'
-import { Box } from '../box'
-
-import type { ResponsiveProp, ResponsiveBreakpoints } from '../utils/responsive-props'
-import type { Space } from '../utils/common-types'
-import type { ReusableBoxProps } from '../box'
 
 import styles from './columns.module.css'
 
+import type { ReusableBoxProps } from '../box'
+import type { Space } from '../utils/common-types'
+import type { ResponsiveBreakpoints, ResponsiveProp } from '../utils/responsive-props'
+
 type ColumnWidth =
     | 'auto'
     | 'content'
@@ -85,8 +84,8 @@ const Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(
                 collapseBelow === 'desktop'
                     ? { mobile: 'column', tablet: 'column', desktop: 'row' }
                     : collapseBelow === 'tablet'
-                    ? { mobile: 'column', tablet: 'row' }
-                    : 'row'
+                      ? { mobile: 'column', tablet: 'row' }
+                      : 'row'
             }
             alignItems={mapResponsiveProp(alignY, (alignY) =>
                 alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : alignY,
@@ -103,11 +102,11 @@ const Columns = polymorphicComponent<'div', ColumnsProps>(function Columns(
 
 export type {
     ColumnProps,
-    ColumnsProps,
-    ColumnWidth,
     ColumnsCollapseBelow,
     ColumnsHorizontalAlignment,
+    ColumnsProps,
     ColumnsVerticalAlignment,
+    ColumnWidth,
 }
 
 export { Column, Columns }
diff --git a/src/components/color-picker/color-picker.test.tsx b/src/components/color-picker/color-picker.test.tsx
index 877a3bc2e..bf9e27c1a 100644
--- a/src/components/color-picker/color-picker.test.tsx
+++ b/src/components/color-picker/color-picker.test.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
-
-import { ColorPicker, ColorItem } from './color-picker'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { ColorItem, ColorPicker } from './color-picker'
+
 describe('ColorPicker', () => {
     it('renders without crashing', () => {
         const { container } = render(<ColorPicker />)
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index fe0303688..3335f4641 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -1,10 +1,11 @@
-import * as React from 'react'
+import './color-picker.less'
+
 import classnames from 'classnames'
 
-import DeprecatedDropdown from '../deprecated-dropdown'
 import { Tooltip } from '../../tooltip'
+import DeprecatedDropdown from '../deprecated-dropdown'
 
-import './color-picker.less'
+import type { ReactNode } from 'react'
 
 type NamedColor = { name: string; color: string }
 
@@ -62,7 +63,7 @@ function ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props)
             </DeprecatedDropdown.Trigger>
             <DeprecatedDropdown.Body>
                 <div className="color_options">
-                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {
+                    {colorList.reduce<ReactNode[]>((items, currentColor, currentIndex) => {
                         items.push(
                             <ColorItem
                                 isActive={
@@ -93,7 +94,7 @@ type ColorItemProps = {
     colorIndex: number
     isActive?: boolean
     onClick?: (colorIndex: number) => void
-    tooltip?: React.ReactNode
+    tooltip?: ReactNode
 }
 
 function ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {
@@ -112,4 +113,4 @@ function ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemP
 }
 ColorItem.displayName = 'ColorItem'
 
-export { ColorPicker, ColorItem, COLORS }
+export { ColorItem, ColorPicker, COLORS }
diff --git a/src/components/color-picker/index.ts b/src/components/color-picker/index.ts
index 0032fb058..92e4d6398 100644
--- a/src/components/color-picker/index.ts
+++ b/src/components/color-picker/index.ts
@@ -1,4 +1,4 @@
-import { ColorPicker, ColorItem, COLORS } from './color-picker'
+import { ColorItem, ColorPicker, COLORS } from './color-picker'
 
 export default ColorPicker
 export { ColorItem, COLORS }
diff --git a/src/components/deprecated-button/deprecated-button.test.tsx b/src/components/deprecated-button/deprecated-button.test.tsx
index a7c558066..80255aa61 100644
--- a/src/components/deprecated-button/deprecated-button.test.tsx
+++ b/src/components/deprecated-button/deprecated-button.test.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react'
-import userEvent from '@testing-library/user-event'
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { Button } from './deprecated-button'
 
diff --git a/src/components/deprecated-button/deprecated-button.tsx b/src/components/deprecated-button/deprecated-button.tsx
index 53c79f727..7fbb8297d 100644
--- a/src/components/deprecated-button/deprecated-button.tsx
+++ b/src/components/deprecated-button/deprecated-button.tsx
@@ -1,12 +1,15 @@
-import * as React from 'react'
+import './deprecated-button.less'
+
+import { forwardRef } from 'react'
+
 import classNames from 'classnames'
 
 import { Tooltip } from '../../tooltip'
 
-import './deprecated-button.less'
+import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from 'react'
 
-type NativeButtonProps = React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
+type NativeButtonProps = DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
 >
 
@@ -36,13 +39,13 @@ export type ButtonProps = Omit<NativeButtonProps, 'title' | 'ref'> & {
      *
      * This replaces `title` which is not supported for these buttons to avoid confusion.
      */
-    tooltip?: React.ReactNode
+    tooltip?: ReactNode
 }
 
 /**
  * @deprecated
  */
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     {
         type = 'button',
         variant,
diff --git a/src/components/deprecated-button/index.ts b/src/components/deprecated-button/index.ts
index 81b04f5b1..a2d30cbf7 100644
--- a/src/components/deprecated-button/index.ts
+++ b/src/components/deprecated-button/index.ts
@@ -1,4 +1,5 @@
 import { Button } from './deprecated-button'
+
 import type { ButtonProps, ButtonSize, ButtonVariant } from './deprecated-button'
 
 export type { ButtonProps, ButtonSize, ButtonVariant }
diff --git a/src/components/deprecated-dropdown/dropdown.test.tsx b/src/components/deprecated-dropdown/dropdown.test.tsx
index 217e4fef2..344ca91de 100644
--- a/src/components/deprecated-dropdown/dropdown.test.tsx
+++ b/src/components/deprecated-dropdown/dropdown.test.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
-
-import { Dropdown } from './dropdown'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { Dropdown } from './dropdown'
+
 describe('Dropdown', () => {
     describe('Dropdown.Box', () => {
         it('renders the Trigger component without crashing', () => {
diff --git a/src/components/deprecated-dropdown/dropdown.tsx b/src/components/deprecated-dropdown/dropdown.tsx
index 2b7c675e5..85fbcfc70 100644
--- a/src/components/deprecated-dropdown/dropdown.tsx
+++ b/src/components/deprecated-dropdown/dropdown.tsx
@@ -1,10 +1,22 @@
-import * as React from 'react'
+import './dropdown.less'
+
+import { cloneElement, Component, forwardRef } from 'react'
 import ReactDOM from 'react-dom'
+
 import classNames from 'classnames'
 
 import Button from '../deprecated-button'
 
-import './dropdown.less'
+import type {
+    ButtonHTMLAttributes,
+    Context,
+    CSSProperties,
+    DetailedHTMLProps,
+    MouseEvent as ReactMouseEvent,
+    ReactElement,
+    ReactNode,
+    Ref,
+} from 'react'
 
 type BoxProps = {
     onShowBody?: () => void
@@ -14,8 +26,8 @@ type BoxProps = {
     right?: boolean
     scrolling_parent?: string
     children?: [
-        React.ReactElement<TriggerProps>,
-        React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),
+        ReactElement<TriggerProps>,
+        ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),
     ]
     className?: string
 }
@@ -25,10 +37,10 @@ type BoxState = {
     showBody: boolean
 }
 
-class Box extends React.Component<BoxProps, BoxState> {
+class Box extends Component<BoxProps, BoxState> {
     public static displayName: string
 
-    constructor(props: BoxProps, context: React.Context<unknown>) {
+    constructor(props: BoxProps, context: Context<unknown>) {
         super(props, context)
         this.state = {
             showBody: false,
@@ -46,7 +58,7 @@ class Box extends React.Component<BoxProps, BoxState> {
     }
     _timeout?: ReturnType<typeof setTimeout>
 
-    _handleClickOutside = (event: MouseEvent) => {
+    _handleClickOutside = (event: globalThis.MouseEvent) => {
         const dropdownDOMNode = ReactDOM.findDOMNode(this)
 
         if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))
@@ -79,9 +91,7 @@ class Box extends React.Component<BoxProps, BoxState> {
 
     _getTriggerComponent() {
         const _trigger = this.props.children?.[0]
-        return _trigger
-            ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })
-            : undefined
+        return _trigger ? cloneElement(_trigger, { onClick: this._toggleShowBody }) : undefined
     }
 
     // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
@@ -141,11 +151,7 @@ class Box extends React.Component<BoxProps, BoxState> {
         const body = children?.[1]
 
         const contentMarkup =
-            typeof body === 'function'
-                ? body(props)
-                : body
-                ? React.cloneElement(body, props)
-                : undefined
+            typeof body === 'function' ? body(props) : body ? cloneElement(body, props) : undefined
         return (
             <div className={className} style={{ position: 'relative' }}>
                 {contentMarkup}
@@ -173,24 +179,24 @@ class Box extends React.Component<BoxProps, BoxState> {
 
 Box.displayName = 'Dropdown.Box'
 
-type NativeButtonProps = React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
+type NativeButtonProps = DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
 >
 
 type TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {
-    tooltip?: React.ReactNode
+    tooltip?: ReactNode
     /**
      * @private the onClick prop is not to be used externally
      */
     onClick?: NativeButtonProps['onClick']
 }
 
-const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(
+const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(
     { children, onClick, tooltip, className, ...props },
     ref,
 ) {
-    function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    function handleClick(event: ReactMouseEvent<HTMLButtonElement>) {
         event.preventDefault()
         event.stopPropagation()
         if (onClick) onClick(event)
@@ -212,14 +218,14 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigg
 Trigger.displayName = 'Dropdown.Trigger'
 
 type BodyProps = {
-    setPosition?: React.Ref<HTMLDivElement>
-    children?: React.ReactNode
+    setPosition?: Ref<HTMLDivElement>
+    children?: ReactNode
     top?: boolean
     right?: boolean
 }
 
 function Body({ top, right, children, setPosition }: BodyProps) {
-    const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }
+    const style: CSSProperties = { position: 'absolute', right: 0, top: 0 }
 
     if (top) {
         style.top = 'auto'
diff --git a/src/components/deprecated-input/input.test.tsx b/src/components/deprecated-input/input.test.tsx
index 3bc5e1b08..3ea4ca513 100644
--- a/src/components/deprecated-input/input.test.tsx
+++ b/src/components/deprecated-input/input.test.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
-
-import { Input } from './input'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { Input } from './input'
+
 describe('Input', () => {
     it('renders without crashing', () => {
         const { container } = render(<Input />)
diff --git a/src/components/deprecated-input/input.tsx b/src/components/deprecated-input/input.tsx
index 4b104bc1f..f956beab3 100644
--- a/src/components/deprecated-input/input.tsx
+++ b/src/components/deprecated-input/input.tsx
@@ -1,16 +1,19 @@
-import * as React from 'react'
+import './input.less'
+
+import { forwardRef } from 'react'
+
 import classNames from 'classnames'
 
-import './input.less'
+import type { InputHTMLAttributes } from 'react'
 
-interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
     className?: string
 }
 
 /**
  * @deprecated
  */
-const Input = React.forwardRef<HTMLInputElement, Props>(function Input(props, ref) {
+const Input = forwardRef<HTMLInputElement, Props>(function Input(props, ref) {
     const className = classNames('reactist_input', props.className)
     return <input {...props} className={className} ref={ref} />
 })
diff --git a/src/components/deprecated-select/select.test.tsx b/src/components/deprecated-select/select.test.tsx
index 11aeef069..52e194dce 100644
--- a/src/components/deprecated-select/select.test.tsx
+++ b/src/components/deprecated-select/select.test.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
-
-import { Select } from './select'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
+import { Select } from './select'
+
 describe('Select', () => {
     it('renders without crashing', () => {
         const { container } = render(
diff --git a/src/components/deprecated-select/select.tsx b/src/components/deprecated-select/select.tsx
index f9b027167..1ead898a7 100644
--- a/src/components/deprecated-select/select.tsx
+++ b/src/components/deprecated-select/select.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react'
-import classNames from 'classnames'
-
 import './select.less'
 
+import classNames from 'classnames'
+
 type Option = {
     /** Optional key for each option. If not provided `value` is used. */
     key?: string | number
diff --git a/src/components/icons/CloseIcon.svg.tsx b/src/components/icons/CloseIcon.svg.tsx
index 93daf9fc2..65880f382 100644
--- a/src/components/icons/CloseIcon.svg.tsx
+++ b/src/components/icons/CloseIcon.svg.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 const CloseIcon = () => (
     <svg width="24" height="24" viewBox="0 0 24 24">
         <path
diff --git a/src/components/icons/ThinQuestionMarkIcon.svg.tsx b/src/components/icons/ThinQuestionMarkIcon.svg.tsx
index 7c4ca4630..b322cdf99 100644
--- a/src/components/icons/ThinQuestionMarkIcon.svg.tsx
+++ b/src/components/icons/ThinQuestionMarkIcon.svg.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 const ThinQuestionMark = () => (
     <svg width="18px" height="18px" viewBox="0 0 18 18">
         <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
diff --git a/src/components/icons/ThreeDotsIcon.svg.tsx b/src/components/icons/ThreeDotsIcon.svg.tsx
index 6ad38341f..58600c5ae 100644
--- a/src/components/icons/ThreeDotsIcon.svg.tsx
+++ b/src/components/icons/ThreeDotsIcon.svg.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import PropTypes from 'prop-types'
 
 const ThreeDotsIcon = ({ color = '#A5A5A5' }) => (
diff --git a/src/components/icons/__tests__/CloseIcon.test.tsx b/src/components/icons/__tests__/CloseIcon.test.tsx
index a48a7a8a1..e0fd95069 100644
--- a/src/components/icons/__tests__/CloseIcon.test.tsx
+++ b/src/components/icons/__tests__/CloseIcon.test.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { render } from '@testing-library/react'
 
 import CloseIcon from '../CloseIcon.svg'
diff --git a/src/components/icons/__tests__/ThinQuestionMarkIcon.test.tsx b/src/components/icons/__tests__/ThinQuestionMarkIcon.test.tsx
index 9298e890c..0664c8a90 100644
--- a/src/components/icons/__tests__/ThinQuestionMarkIcon.test.tsx
+++ b/src/components/icons/__tests__/ThinQuestionMarkIcon.test.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { render } from '@testing-library/react'
 
 import ThinQuestionMarkIcon from '../ThinQuestionMarkIcon.svg'
diff --git a/src/components/icons/__tests__/ThreeDotsIcon.test.tsx b/src/components/icons/__tests__/ThreeDotsIcon.test.tsx
index 542ff4f73..831fd7072 100644
--- a/src/components/icons/__tests__/ThreeDotsIcon.test.tsx
+++ b/src/components/icons/__tests__/ThreeDotsIcon.test.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { render } from '@testing-library/react'
 
 import ThreeDotsIcon from '../ThreeDotsIcon.svg'
diff --git a/src/components/key-capturer/key-capturer.test.tsx b/src/components/key-capturer/key-capturer.test.tsx
index 85d614a3a..7b3c3b827 100644
--- a/src/components/key-capturer/key-capturer.test.tsx
+++ b/src/components/key-capturer/key-capturer.test.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react'
-import { screen, render, fireEvent } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { KeyCapturer, KeyCapturerResolver, SUPPORTED_KEYS } from './key-capturer'
-import userEvent from '@testing-library/user-event'
+
+import type { EventHandler, SyntheticEvent } from 'react'
 
 describe('KeyCapturer', () => {
     describe('Capturer', () => {
@@ -91,7 +92,7 @@ describe('KeyCapturer', () => {
         })
 
         it('forwards the event to the handler', () => {
-            const onEnter: jest.MockedFunction<React.EventHandler<React.SyntheticEvent>> = jest.fn()
+            const onEnter: jest.MockedFunction<EventHandler<SyntheticEvent>> = jest.fn()
 
             render(
                 <KeyCapturer eventName="onKeyDown" onEnter={onEnter}>
diff --git a/src/components/key-capturer/key-capturer.tsx b/src/components/key-capturer/key-capturer.tsx
index 24b6d609f..a0192739c 100644
--- a/src/components/key-capturer/key-capturer.tsx
+++ b/src/components/key-capturer/key-capturer.tsx
@@ -1,4 +1,6 @@
-import * as React from 'react'
+import { cloneElement, DOMAttributes, FunctionComponentElement, useMemo, useState } from 'react'
+
+import type { KeyboardEvent, ReactElement, SyntheticEvent } from 'react'
 
 type Key = 'ArrowUp' | 'ArrowRight' | 'ArrowDown' | 'ArrowLeft' | 'Enter' | 'Backspace' | 'Escape'
 
@@ -77,7 +79,7 @@ const KeyCapturerResolver = {
     },
 }
 
-type EventHandler = (event: React.SyntheticEvent) => void
+type EventHandler = (event: SyntheticEvent) => void
 
 type EventHandlerProps = {
     onArrowUp?: EventHandler
@@ -122,7 +124,7 @@ const keyPropagatePropMapping: Record<Key, keyof PropagateProps> = {
 type KeyCapturerProps = EventHandlerProps &
     PropagateProps & {
         eventName?: 'onKeyDown' | 'onKeyDownCapture' | 'onKeyUp' | 'onKeyUpCapture'
-        children: React.ReactElement<unknown>
+        children: ReactElement<unknown>
     }
 
 /**
@@ -135,54 +137,71 @@ type KeyCapturerProps = EventHandlerProps &
  */
 function KeyCapturer(props: KeyCapturerProps) {
     const { children, eventName = 'onKeyDown' } = props
-    const composingRef = React.useRef(false)
-    const composingEventHandlers = props.onEnter
-        ? {
-              onCompositionStart: () => {
-                  composingRef.current = true
-              },
-              onCompositionEnd: () => {
-                  composingRef.current = false
-              },
-          }
-        : undefined
-
-    function handleKeyEvent(event: React.KeyboardEvent<HTMLInputElement>) {
-        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
-        const key =
-            event.key !== undefined
-                ? KeyCapturerResolver.resolveByKey(event.key)
-                : KeyCapturerResolver.resolveByKeyCode(event.keyCode)
-
-        if (!key) return
-        const propagateEvent = props[keyPropagatePropMapping[key]] || false
-        const eventHandler = props[keyEventHandlerMapping[key]]
-
-        if (key === 'Enter' && eventHandler) {
-            if (
-                composingRef.current ||
-                // Safari fires the onCompositionEnd event before the keydown event, so we
-                // have to rely on the 229 keycode, which is Enter when fired from an IME
-                // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
-                (event.keyCode || event.which) === 229
-            ) {
-                return
-            }
-        }
-
-        if (eventHandler) {
-            eventHandler(event)
-            if (!propagateEvent) {
-                event.preventDefault()
-                event.stopPropagation()
-            }
-        }
-    }
-
-    return React.cloneElement(children, {
-        [eventName]: handleKeyEvent,
-        ...composingEventHandlers,
-    })
+    const [isComposing, setIsComposing] = useState(false)
+
+    const onCompositionStart = useMemo(
+        () =>
+            props.onEnter
+                ? () => {
+                      setIsComposing(true)
+                  }
+                : undefined,
+        [props.onEnter],
+    )
+    const onCompositionEnd = useMemo(
+        () =>
+            props.onEnter
+                ? () => {
+                      setIsComposing(false)
+                  }
+                : undefined,
+        [props.onEnter],
+    )
+
+    const handleKeyEvent = useMemo(
+        () =>
+            function handleKeyEvent(event: KeyboardEvent<HTMLInputElement>) {
+                // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+                const key =
+                    event.key !== undefined
+                        ? KeyCapturerResolver.resolveByKey(event.key)
+                        : KeyCapturerResolver.resolveByKeyCode(event.keyCode)
+
+                if (!key) return
+                const propagateEvent = props[keyPropagatePropMapping[key]] || false
+                const eventHandler = props[keyEventHandlerMapping[key]]
+
+                if (key === 'Enter' && eventHandler) {
+                    if (
+                        isComposing ||
+                        // Safari fires the onCompositionEnd event before the keydown event, so we
+                        // have to rely on the 229 keycode, which is Enter when fired from an IME
+                        // https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
+                        (event.keyCode || event.which) === 229
+                    ) {
+                        return
+                    }
+                }
+
+                if (eventHandler) {
+                    eventHandler(event)
+                    if (!propagateEvent) {
+                        event.preventDefault()
+                        event.stopPropagation()
+                    }
+                }
+            },
+        [props, isComposing],
+    )
+
+    return cloneElement<DOMAttributes<HTMLElement>>(
+        children as FunctionComponentElement<DOMAttributes<HTMLElement>>,
+        {
+            [eventName]: handleKeyEvent,
+            onCompositionStart,
+            onCompositionEnd,
+        },
+    )
 }
 
 export { KeyCapturer, KeyCapturerResolver, SUPPORTED_KEYS }
diff --git a/src/components/keyboard-shortcut/keyboard-shortcut.test.tsx b/src/components/keyboard-shortcut/keyboard-shortcut.test.tsx
index 2bded115c..2b071dc16 100644
--- a/src/components/keyboard-shortcut/keyboard-shortcut.test.tsx
+++ b/src/components/keyboard-shortcut/keyboard-shortcut.test.tsx
@@ -1,7 +1,9 @@
-import * as React from 'react'
 import { render } from '@testing-library/react'
+
 import { KeyboardShortcut } from './keyboard-shortcut'
 
+import type { ComponentProps } from 'react'
+
 /**
  * Renders the KeyboardShortcut component twice, once for macOS and non-macOS setting.
  * @param shortcut the keyboard shortcut string
@@ -9,7 +11,7 @@ import { KeyboardShortcut } from './keyboard-shortcut'
  */
 function renderKeyboardShortcut(
     shortcut: string | string[],
-    props: Omit<React.ComponentProps<typeof KeyboardShortcut>, 'children' | 'isMac'> = {},
+    props: Omit<ComponentProps<typeof KeyboardShortcut>, 'children' | 'isMac'> = {},
 ) {
     const { container } = render(
         <>
diff --git a/src/components/keyboard-shortcut/keyboard-shortcut.tsx b/src/components/keyboard-shortcut/keyboard-shortcut.tsx
index 76871c268..731e964de 100644
--- a/src/components/keyboard-shortcut/keyboard-shortcut.tsx
+++ b/src/components/keyboard-shortcut/keyboard-shortcut.tsx
@@ -1,6 +1,9 @@
-import * as React from 'react'
+import { Fragment } from 'react'
+
 import classNames from 'classnames'
 
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+
 //
 // Support for setting up how to translate modifiers globally.
 //
@@ -73,10 +76,7 @@ function parseKeys(shortcut: string, isMac: boolean, translateKey: TranslateKey)
 // The KeyboardShortcut component
 //
 
-type NativeSpanProps = React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLSpanElement>,
-    HTMLSpanElement
->
+type NativeSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
 
 type Props = Omit<NativeSpanProps, 'children'> & {
     /**
@@ -130,14 +130,14 @@ function KeyboardShortcut({
             {...props}
         >
             {shortcuts.map((shortcut, i) => (
-                <React.Fragment key={i}>
+                <Fragment key={i}>
                     {i === 0 ? null : ', '}
                     <kbd>
                         {parseKeys(shortcut, isMac, translateKey).map((key, j) => (
                             <kbd key={j}>{key}</kbd>
                         ))}
                     </kbd>
-                </React.Fragment>
+                </Fragment>
             ))}
         </span>
     )
diff --git a/src/components/progress-bar/progress-bar.test.tsx b/src/components/progress-bar/progress-bar.test.tsx
index 9d0beef48..c40a54c41 100644
--- a/src/components/progress-bar/progress-bar.test.tsx
+++ b/src/components/progress-bar/progress-bar.test.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
+
 import { ProgressBar } from './progress-bar'
 
 describe('ProgressBar', () => {
diff --git a/src/components/progress-bar/progress-bar.tsx b/src/components/progress-bar/progress-bar.tsx
index ca57e0b5e..2cbbac920 100644
--- a/src/components/progress-bar/progress-bar.tsx
+++ b/src/components/progress-bar/progress-bar.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
-import { HiddenVisually } from '../../hidden-visually'
 import classNames from 'classnames'
 
+import { HiddenVisually } from '../../hidden-visually'
+
 import styles from './progress-bar.module.css'
 
 type Props = {
diff --git a/src/components/time/time-utils.ts b/src/components/time/time-utils.ts
index 4cee895fc..1dfc65036 100644
--- a/src/components/time/time-utils.ts
+++ b/src/components/time/time-utils.ts
@@ -87,4 +87,4 @@ const TimeUtils = {
     },
 }
 
-export { TimeUtils, TimeConfig }
+export { TimeConfig, TimeUtils }
diff --git a/src/components/time/time.test.tsx b/src/components/time/time.test.tsx
index 9d6a1a158..d3b8a162c 100644
--- a/src/components/time/time.test.tsx
+++ b/src/components/time/time.test.tsx
@@ -1,10 +1,9 @@
-import dayjs from 'dayjs'
-import * as React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import dayjs from 'dayjs'
 import { axe } from 'jest-axe'
 
 import { Time } from './time'
-import userEvent from '@testing-library/user-event'
 
 describe('Time', () => {
     beforeAll(() => {
diff --git a/src/components/time/time.tsx b/src/components/time/time.tsx
index 734fb5189..fec7b842b 100644
--- a/src/components/time/time.tsx
+++ b/src/components/time/time.tsx
@@ -1,9 +1,12 @@
-import * as React from 'react'
+import './time.less'
+
+import { Component } from 'react'
 
 import { Tooltip } from '../../tooltip'
-import { TimeUtils, TimeConfig } from './time-utils'
 
-import './time.less'
+import { TimeConfig, TimeUtils } from './time-utils'
+
+import type { MouseEvent, ReactNode } from 'react'
 
 const DELAY = 60000
 
@@ -18,7 +21,7 @@ type Props = {
     /** Refresh the component every DELAY seconds. */
     refresh?: boolean
     /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */
-    tooltip?: React.ReactNode
+    tooltip?: ReactNode
     /** When hovering over time it expands to short absolute version. */
     expandOnHover?: boolean
     /** When hovering over time it expands to the full absolute version. */
@@ -31,7 +34,7 @@ type State = {
     mouseY?: number
 }
 
-class Time extends React.Component<Props, State> {
+class Time extends Component<Props, State> {
     public static displayName: string
     public static defaultProps: Props
 
@@ -72,7 +75,7 @@ class Time extends React.Component<Props, State> {
 
     refreshInterval?: ReturnType<typeof setTimeout>
 
-    _setHovered(hovered: boolean, event: React.MouseEvent) {
+    _setHovered(hovered: boolean, event: MouseEvent) {
         const { mouseX, mouseY } = this.state
         const { clientX, clientY } = event
         if (clientX !== mouseX || clientY !== mouseY) {
diff --git a/src/divider/divider.tsx b/src/divider/divider.tsx
index f7d0ca918..a65fb08e5 100644
--- a/src/divider/divider.tsx
+++ b/src/divider/divider.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-import { getClassNames } from '../utils/responsive-props'
 import { Box } from '../box'
-import type { DividerWeight } from '../utils/common-types'
+import { getClassNames } from '../utils/responsive-props'
 
 import styles from './divider.module.css'
 
+import type { DividerWeight } from '../utils/common-types'
+
 interface DividerProps {
     weight?: Exclude<DividerWeight, 'none'>
 }
diff --git a/src/heading/heading.stories.tsx b/src/heading/heading.stories.tsx
index 1dec4f5df..50e23eae4 100644
--- a/src/heading/heading.stories.tsx
+++ b/src/heading/heading.stories.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
-
 import { Stack } from '../stack'
-import { Heading } from './heading'
 import { ResponsiveWidthRef, select, selectWithNone } from '../utils/storybook-helper'
 
+import { Heading } from './heading'
+
+import type { ComponentProps } from 'react'
+
 export default {
     title: 'Design system/Heading',
     component: Heading,
@@ -95,7 +96,7 @@ TruncatedHeadingStory.parameters = {
     chromatic: { disableSnapshot: false },
 }
 
-export function ResponsiveHeadingStory(props: React.ComponentProps<typeof Heading>) {
+export function ResponsiveHeadingStory(props: ComponentProps<typeof Heading>) {
     return (
         <>
             <ResponsiveWidthRef />
@@ -117,7 +118,7 @@ ResponsiveHeadingStory.argTypes = {
     },
 }
 
-export function HeadingPlaygroundStory(props: React.ComponentProps<typeof Heading>) {
+export function HeadingPlaygroundStory(props: ComponentProps<typeof Heading>) {
     return (
         <section className="story playground">
             <Heading {...props} />
diff --git a/src/heading/heading.test.tsx b/src/heading/heading.test.tsx
index 1801127b1..86dcf1dac 100644
--- a/src/heading/heading.test.tsx
+++ b/src/heading/heading.test.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Heading } from './heading'
 import { axe } from 'jest-axe'
 
+import { Heading } from './heading'
+
 describe('Heading', () => {
     it('does not acknowledge the className prop, but exceptionallySetClassName instead', () => {
         render(
diff --git a/src/heading/heading.tsx b/src/heading/heading.tsx
index 3159e7065..cf8aa4117 100644
--- a/src/heading/heading.tsx
+++ b/src/heading/heading.tsx
@@ -1,15 +1,19 @@
-import * as React from 'react'
-import { getClassNames } from '../utils/responsive-props'
+import { forwardRef } from 'react'
+
 import { Box } from '../box'
+import { getClassNames } from '../utils/responsive-props'
+
 import styles from './heading.module.css'
-import type { ObfuscatedClassName, Tone } from '../utils/common-types'
+
+import type { HTMLAttributes, ReactNode } from 'react'
 import type { BoxProps } from '../box'
+import type { ObfuscatedClassName, Tone } from '../utils/common-types'
 
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
-type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {
-    children: React.ReactNode
+type HeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {
+    children: ReactNode
     /**
      * The semantic level of the heading.
      */
@@ -67,51 +71,49 @@ type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' |
     align?: BoxProps['textAlign']
 }
 
-const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(
-    function Heading(
-        {
-            level,
-            weight = 'regular',
-            size,
-            tone = 'normal',
-            children,
-            lineClamp,
-            align,
-            exceptionallySetClassName,
-            ...props
-        },
-        ref,
-    ) {
-        // In TypeScript v4.1, this would be properly recognized without needing the type assertion
-        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
-        const headingElementName = `h${level}` as HeadingElement
-        const lineClampMultipleLines =
-            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1
-
-        return (
-            <Box
-                {...props}
-                className={[
-                    exceptionallySetClassName,
-                    styles.heading,
-                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,
-                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,
-                    getClassNames(styles, 'size', size),
-                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,
-                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,
-                ]}
-                textAlign={align}
-                // Prevents emojis from being cut-off
-                // See https://github.com/Doist/reactist/pull/528
-                paddingRight={lineClamp ? 'xsmall' : undefined}
-                as={headingElementName}
-                ref={ref}
-            >
-                {children}
-            </Box>
-        )
+const Heading = forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(function Heading(
+    {
+        level,
+        weight = 'regular',
+        size,
+        tone = 'normal',
+        children,
+        lineClamp,
+        align,
+        exceptionallySetClassName,
+        ...props
     },
-)
+    ref,
+) {
+    // In TypeScript v4.1, this would be properly recognized without needing the type assertion
+    // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types
+    const headingElementName = `h${level}` as HeadingElement
+    const lineClampMultipleLines =
+        typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1
+
+    return (
+        <Box
+            {...props}
+            className={[
+                exceptionallySetClassName,
+                styles.heading,
+                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,
+                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,
+                getClassNames(styles, 'size', size),
+                lineClampMultipleLines ? styles.lineClampMultipleLines : null,
+                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,
+            ]}
+            textAlign={align}
+            // Prevents emojis from being cut-off
+            // See https://github.com/Doist/reactist/pull/528
+            paddingRight={lineClamp ? 'xsmall' : undefined}
+            as={headingElementName}
+            ref={ref}
+        >
+            {children}
+        </Box>
+    )
+})
 
-export type { HeadingProps, HeadingLevel }
+export type { HeadingLevel, HeadingProps }
 export { Heading }
diff --git a/src/hidden-visually/hidden-visually.test.tsx b/src/hidden-visually/hidden-visually.test.tsx
index 640b07a89..5ed1e3940 100644
--- a/src/hidden-visually/hidden-visually.test.tsx
+++ b/src/hidden-visually/hidden-visually.test.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+
 import { HiddenVisually } from './hidden-visually'
 
 describe('HiddenVisually', () => {
diff --git a/src/hidden-visually/hidden-visually.tsx b/src/hidden-visually/hidden-visually.tsx
index 17a734762..79d5033be 100644
--- a/src/hidden-visually/hidden-visually.tsx
+++ b/src/hidden-visually/hidden-visually.tsx
@@ -1,10 +1,12 @@
-import * as React from 'react'
-import { polymorphicComponent } from '../utils/polymorphism'
 import { Box } from '../box'
+import { polymorphicComponent } from '../utils/polymorphism'
+
 import styles from './hidden-visually.module.css'
 
+import type { ReactNode } from 'react'
+
 type Props = {
-    children: React.ReactNode
+    children: ReactNode
 }
 
 /**
@@ -12,19 +14,18 @@ type Props = {
  *
  * @see Hidden for fully hiding content, and only under certain conditions.
  */
-const HiddenVisually = polymorphicComponent<'div', Props, 'omitClassName'>(function HiddenVisually(
-    props,
-    ref,
-) {
-    return (
-        <Box
-            {...props}
-            ref={ref}
-            position="absolute"
-            overflow="hidden"
-            className={styles.hiddenVisually}
-        />
-    )
-})
+const HiddenVisually = polymorphicComponent<'div', Props, 'omitClassName'>(
+    function HiddenVisually(props, ref) {
+        return (
+            <Box
+                {...props}
+                ref={ref}
+                position="absolute"
+                overflow="hidden"
+                className={styles.hiddenVisually}
+            />
+        )
+    },
+)
 
 export { HiddenVisually }
diff --git a/src/hidden/hidden.stories.tsx b/src/hidden/hidden.stories.tsx
index aa78f6d94..894fcbbda 100644
--- a/src/hidden/hidden.stories.tsx
+++ b/src/hidden/hidden.stories.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
-import { Placeholder, ResponsiveWidthRef } from '../utils/storybook-helper'
 import { Stack } from '../stack'
+import { Placeholder, ResponsiveWidthRef } from '../utils/storybook-helper'
+
 import { Hidden } from './hidden'
 
 export default {
diff --git a/src/hidden/hidden.test.tsx b/src/hidden/hidden.test.tsx
index 1acf17572..cdc7d9bc5 100644
--- a/src/hidden/hidden.test.tsx
+++ b/src/hidden/hidden.test.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+
 import { Hidden } from './hidden'
 
 describe('Hidden', () => {
diff --git a/src/hidden/hidden.tsx b/src/hidden/hidden.tsx
index 16ad7a2e9..ba62e14dc 100644
--- a/src/hidden/hidden.tsx
+++ b/src/hidden/hidden.tsx
@@ -1,8 +1,10 @@
-import * as React from 'react'
 import { Box } from '../box'
+import { polymorphicComponent } from '../utils/polymorphism'
+
 import styles from './hidden.module.css'
+
+import type { ReactNode } from 'react'
 import type { ResponsiveBreakpoints } from '../utils/responsive-props'
-import { polymorphicComponent } from '../utils/polymorphism'
 
 type AboveProp = {
     /**
@@ -31,7 +33,7 @@ type BelowProp = {
 }
 
 type CommonProps = {
-    children: React.ReactNode
+    children: ReactNode
     /**
      * hides the element when on print media.
      */
diff --git a/src/hooks/use-previous/use-previous.ts b/src/hooks/use-previous/use-previous.ts
index 96ca0ef49..97fc2d81a 100644
--- a/src/hooks/use-previous/use-previous.ts
+++ b/src/hooks/use-previous/use-previous.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useRef } from 'react'
 
 /**
  * usePrevious tracks the change of the given value -
@@ -14,12 +14,16 @@ import * as React from 'react'
  * x = 2 and prevX = 1
  */
 function usePrevious<T>(value: T): T | null {
-    const ref = React.useRef<T | null>(null)
+    const ref = useRef<T | null>(null)
 
-    React.useEffect(() => {
+    useEffect(() => {
         ref.current = value
     }, [value])
 
+    // This is necessary for usePrevious to work in its current form, however, we are
+    // warned that it's possible for the ref to be stale
+    // See https://github.com/facebook/react/issues/31330
+    // eslint-disable-next-line react-hooks/refs
     return ref.current
 }
 
diff --git a/src/icons/alert-icon.tsx b/src/icons/alert-icon.tsx
index e188ada5d..e8ba4be2e 100644
--- a/src/icons/alert-icon.tsx
+++ b/src/icons/alert-icon.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import type { AlertTone } from '../utils/common-types'
 
 const alertIconForTone: Record<AlertTone, typeof AlertInfoIcon> = {
diff --git a/src/icons/banner-icon.tsx b/src/icons/banner-icon.tsx
index 0b55f6391..1aee938bb 100644
--- a/src/icons/banner-icon.tsx
+++ b/src/icons/banner-icon.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react'
-import type { SystemBannerType } from '../banner/banner'
-
 import styles from './banner-icon.module.css'
 
+import type { SystemBannerType } from '../banner/banner'
+
 const bannerIconForType: Record<SystemBannerType, typeof BannerInfoIcon> = {
     info: BannerInfoIcon,
     upgrade: BannerUpgradeIcon,
diff --git a/src/icons/close-icon.tsx b/src/icons/close-icon.tsx
index bd416e116..ec2ffc3e1 100644
--- a/src/icons/close-icon.tsx
+++ b/src/icons/close-icon.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 function CloseIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" {...props}>
diff --git a/src/icons/password-hidden-icon.tsx b/src/icons/password-hidden-icon.tsx
index 7651f3397..b4925966b 100644
--- a/src/icons/password-hidden-icon.tsx
+++ b/src/icons/password-hidden-icon.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 function PasswordHiddenIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" {...props}>
diff --git a/src/icons/password-visible-icon.tsx b/src/icons/password-visible-icon.tsx
index 93dce8294..9d98a281b 100644
--- a/src/icons/password-visible-icon.tsx
+++ b/src/icons/password-visible-icon.tsx
@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 function PasswordVisibleIcon(props: JSX.IntrinsicElements['svg']) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" {...props}>
diff --git a/src/index.ts b/src/index.ts
index 405ffec22..84aef992a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,10 +7,10 @@ import './styles/design-tokens.css'
 export * from './box'
 export * from './columns'
 export * from './divider'
-export * from './inline'
-export * from './stack'
 export * from './hidden'
 export * from './hidden-visually'
+export * from './inline'
+export * from './stack'
 
 // alerts, notifications, etc.
 export * from './banner'
@@ -20,8 +20,8 @@ export * from './toast'
 
 // text and typography
 export * from './heading'
-export * from './text'
 export * from './prose'
+export * from './text'
 
 // links
 export * from './button'
@@ -38,18 +38,18 @@ export * from './text-field'
 // other components
 export * from './avatar'
 export * from './badge'
+export * from './menu'
 export * from './modal'
 export * from './tabs'
 export * from './tooltip'
-export * from './menu'
 
 //
 // components not yet integrated with the design system
 //
 
 export { default as ColorPicker, COLORS } from './components/color-picker'
-export { default as KeyboardShortcut } from './components/keyboard-shortcut'
 export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer'
+export { default as KeyboardShortcut } from './components/keyboard-shortcut'
 export { default as ProgressBar } from './components/progress-bar'
 export { default as Time } from './components/time'
 
diff --git a/src/inline/inline.stories.tsx b/src/inline/inline.stories.tsx
index e60ab6fb3..f3f5923fb 100644
--- a/src/inline/inline.stories.tsx
+++ b/src/inline/inline.stories.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
+import { Heading } from '../heading'
+import { Stack } from '../stack'
 import {
-    selectSize,
-    reusableBoxProps,
+    disableResponsiveProps,
+    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
-    Wrapper,
+    reusableBoxProps,
+    selectSize,
     selectWithNone,
-    PartialProps,
-    disableResponsiveProps,
+    Wrapper,
 } from '../utils/storybook-helper'
-import { Stack } from '../stack'
-import { Heading } from '../heading'
+
 import { Inline, InlineAlign } from './inline'
 
 export default {
diff --git a/src/inline/inline.test.tsx b/src/inline/inline.test.tsx
index 5db511bca..f82acafcf 100644
--- a/src/inline/inline.test.tsx
+++ b/src/inline/inline.test.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+
 import { runSpaceTests } from '../utils/test-helpers'
+
 import { Inline } from './'
-import { axe } from 'jest-axe'
 
 describe('Inline', () => {
     it('does not acknowledge the className prop, but exceptionallySetClassName instead', () => {
diff --git a/src/inline/inline.tsx b/src/inline/inline.tsx
index de1dc2d48..9b9587031 100644
--- a/src/inline/inline.tsx
+++ b/src/inline/inline.tsx
@@ -1,11 +1,10 @@
-import * as React from 'react'
+import { Box } from '../box'
 import { polymorphicComponent } from '../utils/polymorphism'
 import { mapResponsiveProp } from '../utils/responsive-props'
-import { Box } from '../box'
 
-import type { ResponsiveProp } from '../utils/responsive-props'
-import type { Space } from '../utils/common-types'
 import type { ReusableBoxProps } from '../box'
+import type { Space } from '../utils/common-types'
+import type { ResponsiveProp } from '../utils/responsive-props'
 
 type InlineAlign = 'left' | 'center' | 'right'
 
@@ -40,5 +39,5 @@ const Inline = polymorphicComponent<'div', InlineProps>(function Inline(
     )
 })
 
-export type { InlineProps, InlineAlign }
+export type { InlineAlign, InlineProps }
 export { Inline }
diff --git a/src/loading/loading.test.tsx b/src/loading/loading.test.tsx
index 39c6df631..cf212270a 100644
--- a/src/loading/loading.test.tsx
+++ b/src/loading/loading.test.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Loading } from './loading'
 import { axe } from 'jest-axe'
 
+import { Loading } from './loading'
+
 function getSize() {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const svg = screen.getByRole('progressbar', { name: 'Loading…' }).firstElementChild!
diff --git a/src/loading/loading.tsx b/src/loading/loading.tsx
index e9abcb944..2e31e7951 100644
--- a/src/loading/loading.tsx
+++ b/src/loading/loading.tsx
@@ -1,12 +1,13 @@
-import * as React from 'react'
 import { Box } from '../box'
 import { Spinner } from '../spinner'
+
+import type { HTMLAttributes } from 'react'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 type Size = 'xsmall' | 'small' | 'medium' | 'large'
 
 type NativeProps = Omit<
-    React.HTMLAttributes<HTMLDivElement>,
+    HTMLAttributes<HTMLDivElement>,
     'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'
 >
 
@@ -47,8 +48,8 @@ function Loading({ size = 'small', exceptionallySetClassName, ...props }: Loadin
     const ariaLabel = props['aria-label']
         ? props['aria-label']
         : !props['aria-labelledby']
-        ? 'Loading…'
-        : undefined
+          ? 'Loading…'
+          : undefined
 
     return (
         <Box
diff --git a/src/menu/index.ts b/src/menu/index.ts
index cb527fb15..ca09bcfd8 100644
--- a/src/menu/index.ts
+++ b/src/menu/index.ts
@@ -1,10 +1,10 @@
+export type { MenuGroupProps, MenuItemProps } from './menu'
 export {
+    ContextMenuTrigger,
     Menu,
     MenuButton,
-    ContextMenuTrigger,
-    MenuList,
+    MenuGroup,
     MenuItem,
+    MenuList,
     SubMenu,
-    MenuGroup,
 } from './menu'
-export type { MenuItemProps, MenuGroupProps } from './menu'
diff --git a/src/menu/menu.test.tsx b/src/menu/menu.test.tsx
index 16c9a4d5e..ba13eb801 100644
--- a/src/menu/menu.test.tsx
+++ b/src/menu/menu.test.tsx
@@ -1,10 +1,13 @@
-import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu } from './menu'
 import { axe } from 'jest-axe'
+
 import { flushMicrotasks } from '../utils/test-helpers'
 
+import { ContextMenuTrigger, Menu, MenuButton, MenuItem, MenuList, SubMenu } from './menu'
+
+import type { MouseEvent } from 'react'
+
 function getFocusedElement() {
     if (!document.activeElement) {
         throw new Error('No element with focus was found')
@@ -185,7 +188,7 @@ describe('Menu', () => {
                 <MenuButton>Options menu</MenuButton>
                 <MenuList aria-label="Some options">
                     <MenuItem
-                        onClick={(event: React.MouseEvent) => event.preventDefault()}
+                        onClick={(event: MouseEvent) => event.preventDefault()}
                         onSelect={() => onSelect()}
                     >
                         Click me
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index 8394ff2b8..03da3a198 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -1,23 +1,34 @@
-import * as React from 'react'
-import classNames from 'classnames'
+import './menu.less'
+
+import {
+    Children,
+    createContext,
+    forwardRef,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
 
 import {
-    Portal,
-    MenuStore,
-    MenuStoreProps,
-    useMenuStore,
-    MenuProps as AriakitMenuProps,
     Menu as AriakitMenu,
+    MenuButton as AriakitMenuButton,
+    MenuButtonProps as AriakitMenuButtonProps,
     MenuGroup as AriakitMenuGroup,
     MenuItem as AriakitMenuItem,
     MenuItemProps as AriakitMenuItemProps,
-    MenuButton as AriakitMenuButton,
-    MenuButtonProps as AriakitMenuButtonProps,
+    MenuProps as AriakitMenuProps,
+    MenuStore,
+    MenuStoreProps,
+    Portal,
     Role,
     RoleProps,
+    useMenuStore,
 } from '@ariakit/react'
+import classNames from 'classnames'
 
-import './menu.less'
+import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 type MenuContextState = {
@@ -27,14 +38,14 @@ type MenuContextState = {
     setAnchorRect: (rect: { x: number; y: number } | null) => void
 }
 
-const MenuContext = React.createContext<MenuContextState>({
+const MenuContext = createContext<MenuContextState>({
     menuStore: null,
     handleItemSelect: () => undefined,
     getAnchorRect: null,
     setAnchorRect: () => undefined,
 })
 
-const SubMenuContext = React.createContext<{ isSubMenu: boolean }>({ isSubMenu: false })
+const SubMenuContext = createContext<{ isSubMenu: boolean }>({ isSubMenu: false })
 
 //
 // Menu
@@ -45,7 +56,7 @@ interface MenuProps extends Omit<MenuStoreProps, 'visible'> {
      * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a
      * `MenuButton` that triggers the menu to be opened or closed.
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * An optional callback that will be called back whenever a menu item is selected. It receives
@@ -62,11 +73,11 @@ interface MenuProps extends Omit<MenuStoreProps, 'visible'> {
  * management for the menu components inside it.
  */
 function Menu({ children, onItemSelect, ...props }: MenuProps) {
-    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)
-    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])
+    const [anchorRect, setAnchorRect] = useState<{ x: number; y: number } | null>(null)
+    const getAnchorRect = useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])
     const menuStore = useMenuStore({ focusLoop: true, ...props })
 
-    const value: MenuContextState = React.useMemo(
+    const value: MenuContextState = useMemo(
         () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),
         [menuStore, onItemSelect, getAnchorRect, setAnchorRect],
     )
@@ -85,11 +96,11 @@ interface MenuButtonProps
 /**
  * A button to toggle a dropdown menu open or closed.
  */
-const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(
+const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(
     { exceptionallySetClassName, ...props },
     ref,
 ) {
-    const { menuStore } = React.useContext(MenuContext)
+    const { menuStore } = useContext(MenuContext)
     if (!menuStore) {
         throw new Error('MenuButton must be wrapped in <Menu/>')
     }
@@ -109,18 +120,18 @@ const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function
 
 interface ContextMenuTriggerProps
     extends ObfuscatedClassName,
-        React.HTMLAttributes<HTMLDivElement>,
+        HTMLAttributes<HTMLDivElement>,
         Pick<RoleProps, 'render'> {}
 
-const ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(
+const ContextMenuTrigger = forwardRef<HTMLDivElement, ContextMenuTriggerProps>(
     function ContextMenuTrigger({ render, ...props }, ref) {
-        const { setAnchorRect, menuStore } = React.useContext(MenuContext)
+        const { setAnchorRect, menuStore } = useContext(MenuContext)
         if (!menuStore) {
             throw new Error('ContextMenuTrigger must be wrapped in <Menu/>')
         }
 
-        const handleContextMenu = React.useCallback(
-            function handleContextMenu(event: React.MouseEvent) {
+        const handleContextMenu = useCallback(
+            function handleContextMenu(event: MouseEvent) {
                 event.preventDefault()
                 setAnchorRect({ x: event.clientX, y: event.clientY })
                 menuStore.show()
@@ -129,7 +140,7 @@ const ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerPr
         )
 
         const isOpen = menuStore.useState('open')
-        React.useEffect(() => {
+        useEffect(() => {
             if (!isOpen) setAnchorRect(null)
         }, [isOpen, setAnchorRect])
 
@@ -148,16 +159,16 @@ interface MenuListProps
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
-const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(
+const MenuList = forwardRef<HTMLDivElement, MenuListProps>(function MenuList(
     { exceptionallySetClassName, modal = true, flip, ...props },
     ref,
 ) {
-    const { menuStore, getAnchorRect } = React.useContext(MenuContext)
+    const { menuStore, getAnchorRect } = useContext(MenuContext)
     if (!menuStore) {
         throw new Error('MenuList must be wrapped in <Menu/>')
     }
 
-    const { isSubMenu } = React.useContext(SubMenuContext)
+    const { isSubMenu } = useContext(SubMenuContext)
 
     const isOpen = menuStore.useState('open')
 
@@ -230,14 +241,14 @@ interface MenuItemProps extends AriakitMenuItemProps, ObfuscatedClassName {
      * this is useful in menu items that are links, and you want the click to not trigger navigation
      * under some circumstances.
      */
-    onClick?: (event: React.MouseEvent) => void
+    onClick?: (event: MouseEvent) => void
 }
 
 /**
  * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
  * callback.
  */
-const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(
+const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(
     {
         value,
         children,
@@ -249,14 +260,14 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
     },
     ref,
 ) {
-    const { handleItemSelect, menuStore } = React.useContext(MenuContext)
+    const { handleItemSelect, menuStore } = useContext(MenuContext)
     if (!menuStore) {
         throw new Error('MenuItem must be wrapped in <Menu/>')
     }
 
     const { hide } = menuStore
-    const handleClick = React.useCallback(
-        function handleClick(event: React.MouseEvent) {
+    const handleClick = useCallback(
+        function handleClick(event: MouseEvent) {
             onClick?.(event)
             const onSelectResult: unknown =
                 onSelect && !event.defaultPrevented ? onSelect() : undefined
@@ -308,17 +319,17 @@ type SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>
  * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
  * opening a sub-menu with the menu items list below it.
  */
-const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
+const SubMenu = forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
     { children, onItemSelect },
     ref,
 ) {
-    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)
+    const { handleItemSelect: parentMenuItemSelect, menuStore } = useContext(MenuContext)
     if (!menuStore) {
         throw new Error('SubMenu must be wrapped in <Menu/>')
     }
 
     const { hide: parentMenuHide } = menuStore
-    const handleSubItemSelect = React.useCallback(
+    const handleSubItemSelect = useCallback(
         function handleSubItemSelect(value: string | null | undefined) {
             onItemSelect?.(value)
             parentMenuItemSelect?.(value)
@@ -327,9 +338,9 @@ const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
         [parentMenuHide, parentMenuItemSelect, onItemSelect],
     )
 
-    const [button, list] = React.Children.toArray(children)
-    const buttonElement = button as React.ReactElement<MenuButtonProps>
-    const subMenuContextValue = React.useMemo(() => ({ isSubMenu: true }), [])
+    const [button, list] = Children.toArray(children)
+    const buttonElement = button as ReactElement<MenuButtonProps>
+    const subMenuContextValue = useMemo(() => ({ isSubMenu: true }), [])
 
     return (
         <Menu onItemSelect={handleSubItemSelect}>
@@ -346,7 +357,7 @@ const SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(
 //
 
 interface MenuGroupProps
-    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>,
+    extends Omit<HTMLAttributes<HTMLDivElement>, 'className'>,
         ObfuscatedClassName {
     /**
      * A label to be shown visually and also used to semantically label the group.
@@ -360,11 +371,11 @@ interface MenuGroupProps
  * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
  * before and/or after the group if you so wish.
  */
-const MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(
+const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(
     { label, children, exceptionallySetClassName, ...props },
     ref,
 ) {
-    const { menuStore } = React.useContext(MenuContext)
+    const { menuStore } = useContext(MenuContext)
     if (!menuStore) {
         throw new Error('MenuGroup must be wrapped in <Menu/>')
     }
@@ -386,5 +397,5 @@ const MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(function Menu
     )
 })
 
-export { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }
-export type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }
+export { ContextMenuTrigger, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu }
+export type { MenuButtonProps, MenuGroupProps, MenuItemProps, MenuListProps }
diff --git a/src/modal/modal-examples.stories.tsx b/src/modal/modal-examples.stories.tsx
index 23dd07d3c..0eb261c12 100644
--- a/src/modal/modal-examples.stories.tsx
+++ b/src/modal/modal-examples.stories.tsx
@@ -1,31 +1,29 @@
-import * as React from 'react'
 import { action } from '@storybook/addon-actions'
 
 import { Box } from '../box'
 import { IconButton } from '../button'
 import { Column, Columns } from '../columns'
+import ThreeDotsIcon from '../components/icons/ThreeDotsIcon.svg'
 import { Heading } from '../heading'
 import { Inline } from '../inline'
-import { Menu, MenuButton, MenuList, MenuItem } from '../menu'
+import { Menu, MenuButton, MenuItem, MenuList } from '../menu'
 import { Stack } from '../stack'
-import { Tabs, Tab, TabList, TabPanel } from '../tabs'
+import { Tab, TabList, TabPanel, Tabs } from '../tabs'
 import { Text } from '../text'
 import { TextField } from '../text-field'
-import ThreeDotsIcon from '../components/icons/ThreeDotsIcon.svg'
 
 import * as ModalComponents from './modal'
-
 import {
-    openModal,
-    ModalStoryStateProvider,
-    ModalOptionsForm,
+    Button,
+    Link,
     Modal,
-    ModalHeader,
+    ModalActions,
     ModalBody,
     ModalFooter,
-    ModalActions,
-    Button,
-    Link,
+    ModalHeader,
+    ModalOptionsForm,
+    ModalStoryStateProvider,
+    openModal,
     ScrollableContent,
 } from './modal-stories-components'
 
diff --git a/src/modal/modal-stories-components.tsx b/src/modal/modal-stories-components.tsx
index 58f7392e0..910be1005 100644
--- a/src/modal/modal-stories-components.tsx
+++ b/src/modal/modal-stories-components.tsx
@@ -1,17 +1,18 @@
-import * as React from 'react'
+import { createContext, useCallback, useContext, useMemo, useState } from 'react'
 
-import { within, userEvent } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
+import { userEvent, within } from '@storybook/testing-library'
 
-import { Placeholder, times } from '../utils/storybook-helper'
+import { Button } from '../button'
 import { SelectField } from '../select-field'
-import { SwitchField } from '../switch-field'
 import { Stack } from '../stack'
-import { Button } from '../button'
+import { SwitchField } from '../switch-field'
+import { Placeholder, times } from '../utils/storybook-helper'
 
 import * as ModalComponents from './modal'
 
-import type { ModalProps, ModalHeaderProps, ModalFooterProps } from './modal'
+import type { ChangeEvent, ChangeEventHandler, ReactNode } from 'react'
+import type { ModalFooterProps, ModalHeaderProps, ModalProps } from './modal'
 
 function Link({ children, ...props }: JSX.IntrinsicElements['a']) {
     return (
@@ -39,10 +40,10 @@ type ModalStoryContextValue = ModalStoryState & {
     isOpen: boolean
     openModal: () => void
     closeModal: () => void
-    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement>
+    onChange: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>
 }
 
-const ModalStoryContext = React.createContext<ModalStoryContextValue>({
+const ModalStoryContext = createContext<ModalStoryContextValue>({
     ...defaultInitialState,
     isOpen: false,
     openModal: () => undefined,
@@ -55,22 +56,22 @@ function ModalStoryStateProvider({
     children,
 }: {
     initialState?: Partial<ModalStoryState>
-    children: React.ReactNode
+    children: ReactNode
 }) {
-    const [isOpen, setOpen] = React.useState(false)
-    const openModal = React.useCallback(() => {
+    const [isOpen, setOpen] = useState(false)
+    const openModal = useCallback(() => {
         setOpen(true)
     }, [])
-    const closeModal = React.useCallback(() => {
+    const closeModal = useCallback(() => {
         setOpen(false)
     }, [])
-    const [props, setProps] = React.useState<ModalStoryState>({
+    const [props, setProps] = useState<ModalStoryState>({
         ...defaultInitialState,
         ...initialState,
     })
 
-    const onChange = React.useCallback(function onChange(
-        event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+    const onChange = useCallback(function onChange(
+        event: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
     ) {
         const element = event.currentTarget
         const name = element.name
@@ -79,10 +80,9 @@ function ModalStoryStateProvider({
                 ? element.checked
                 : element.value
         setProps((props) => ({ ...props, [name]: value }))
-    },
-    [])
+    }, [])
 
-    const value = React.useMemo(
+    const value = useMemo(
         () => ({
             isOpen,
             openModal,
@@ -106,10 +106,9 @@ function ScrollableContent({ label = 'Item', count = 20 }: { label?: string; cou
     )
 }
 
-function ModalOptionsForm({ title }: { title?: React.ReactNode }) {
-    const { button, width, height, hideOn, withScrollableContent, onChange } = React.useContext(
-        ModalStoryContext,
-    )
+function ModalOptionsForm({ title }: { title?: ReactNode }) {
+    const { button, width, height, hideOn, withScrollableContent, onChange } =
+        useContext(ModalStoryContext)
     return (
         <Stack space="large">
             {title}
@@ -173,9 +172,9 @@ function ModalButton({
     variant: 'primary' | 'secondary' | 'danger'
     action?: 'open' | 'close'
     size?: 'small'
-    children: NonNullable<React.ReactNode>
+    children: NonNullable<ReactNode>
 }) {
-    const { openModal, closeModal } = React.useContext(ModalStoryContext)
+    const { openModal, closeModal } = useContext(ModalStoryContext)
     return (
         <Button
             variant={variant === 'danger' ? 'primary' : variant}
@@ -194,13 +193,13 @@ ModalButton.displayName = 'Button'
 type WithOptionals<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>
 
 function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width' | 'height'>) {
-    const { isOpen, closeModal, width, height, hideOn } = React.useContext(ModalStoryContext)
+    const { isOpen, closeModal, width, height, hideOn } = useContext(ModalStoryContext)
 
     /**
      * Needed to make sure the modals are mounted inside the story's #root element
      * @see https://www.chromatic.com/docs/snapshots#why-isn%E2%80%99t-my-modal-or-dialog-captured
      */
-    const getPortalElement = React.useCallback(() => {
+    const getPortalElement = useCallback(() => {
         const div = document.createElement('div')
         const portalRoot = document.getElementById('root') ?? document.body
         portalRoot.appendChild(div)
@@ -222,7 +221,7 @@ function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width'
 }
 
 function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'button'>) {
-    const { button, withScrollableContent } = React.useContext(ModalStoryContext)
+    const { button, withScrollableContent } = useContext(ModalStoryContext)
     return (
         <ModalComponents.ModalHeader
             withDivider={withScrollableContent}
@@ -235,12 +234,12 @@ function ModalHeader(props: WithOptionals<ModalHeaderProps, 'withDivider' | 'but
 const ModalBody = ModalComponents.ModalBody
 
 function ModalFooter(props: WithOptionals<ModalFooterProps, 'withDivider'>) {
-    const { withScrollableContent } = React.useContext(ModalStoryContext)
+    const { withScrollableContent } = useContext(ModalStoryContext)
     return <ModalComponents.ModalFooter withDivider={withScrollableContent} {...props} />
 }
 
 function ModalActions(props: WithOptionals<ModalFooterProps, 'withDivider'>) {
-    const { withScrollableContent } = React.useContext(ModalStoryContext)
+    const { withScrollableContent } = useContext(ModalStoryContext)
     return <ModalComponents.ModalActions withDivider={withScrollableContent} {...props} />
 }
 
@@ -257,5 +256,5 @@ export async function openModal({ canvasElement }: { canvasElement: HTMLElement
     expect(await canvas.findByRole('dialog')).toBeInTheDocument()
 }
 
-export { Link, ModalStoryStateProvider, ModalOptionsForm, ModalButton as Button, ScrollableContent }
-export { Modal, ModalHeader, ModalBody, ModalFooter, ModalActions }
+export { ModalButton as Button, Link, ModalOptionsForm, ModalStoryStateProvider, ScrollableContent }
+export { Modal, ModalActions, ModalBody, ModalFooter, ModalHeader }
diff --git a/src/modal/modal.module.css b/src/modal/modal.module.css
index b6847a7c6..b0f4200ea 100644
--- a/src/modal/modal.module.css
+++ b/src/modal/modal.module.css
@@ -49,7 +49,9 @@
 
 .container {
     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
-    transition: width 0.2s ease-in-out, box-shadow 0.5s;
+    transition:
+        width 0.2s ease-in-out,
+        box-shadow 0.5s;
     max-width: 100%;
 }
 
diff --git a/src/modal/modal.test.tsx b/src/modal/modal.test.tsx
index fb08cf88b..ad1f776b7 100644
--- a/src/modal/modal.test.tsx
+++ b/src/modal/modal.test.tsx
@@ -1,11 +1,15 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { act, render, screen, within } from '@testing-library/react'
-import { Modal, ModalHeader, ModalFooter, ModalActions, ModalBody, ModalCloseButton } from './modal'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
+import { Modal, ModalActions, ModalBody, ModalCloseButton, ModalFooter, ModalHeader } from './modal'
+
+import type { ReactElement } from 'react'
+
 // Ariakit's dialog performs async updates and must be wrapped in an act to prevent warnings
-function renderModal(children: React.ReactElement) {
+function renderModal(children: ReactElement) {
     jest.useFakeTimers()
 
     const results = render(children)
@@ -38,7 +42,7 @@ describe('Modal', () => {
     afterEach(closeModal)
 
     function TestCaseWithState() {
-        const [isOpen, setOpen] = React.useState(false)
+        const [isOpen, setOpen] = useState(false)
         return (
             <>
                 <button type="button" onClick={() => setOpen(true)}>
diff --git a/src/modal/modal.tsx b/src/modal/modal.tsx
index 2eac07ed3..70fe95144 100644
--- a/src/modal/modal.tsx
+++ b/src/modal/modal.tsx
@@ -1,21 +1,36 @@
-import * as React from 'react'
-import classNames from 'classnames'
+import {
+    createContext,
+    forwardRef,
+    useCallback,
+    useContext,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+} from 'react'
 import FocusLock from 'react-focus-lock'
-import { hideOthers } from 'aria-hidden'
 
-import { Dialog, DialogOptions, useDialogStore, Portal, PortalOptions } from '@ariakit/react'
+import { Dialog, DialogOptions, Portal, PortalOptions, useDialogStore } from '@ariakit/react'
+import { hideOthers } from 'aria-hidden'
+import classNames from 'classnames'
 
-import { CloseIcon } from '../icons/close-icon'
+import { Box } from '../box'
+import { IconButton, IconButtonProps } from '../button'
 import { Column, Columns } from '../columns'
-import { Inline } from '../inline'
 import { Divider } from '../divider'
-import { Box } from '../box'
-import { IconButtonProps, IconButton } from '../button'
+import { CloseIcon } from '../icons/close-icon'
+import { Inline } from '../inline'
 
 import styles from './modal.module.css'
-import type { ObfuscatedClassName } from '../utils/common-types'
-import { forwardRef } from 'react'
+
+import type {
+    ButtonHTMLAttributes,
+    DetailedHTMLProps,
+    KeyboardEvent,
+    MouseEvent,
+    ReactNode,
+} from 'react'
 import type { DividerProps } from '../divider'
+import type { ObfuscatedClassName } from '../utils/common-types'
 
 type ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'
 type ModalHeightMode = 'expand' | 'fitContent'
@@ -30,7 +45,7 @@ type ModalContextValue = {
     dividers?: DividerProps['weight']
 }
 
-const ModalContext = React.createContext<ModalContextValue>({
+const ModalContext = createContext<ModalContextValue>({
     onDismiss: undefined,
     height: 'fitContent',
     dividers: undefined,
@@ -41,7 +56,7 @@ const ModalContext = React.createContext<ModalContextValue>({
 //
 
 type DivProps = Omit<
-    React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,
     'className' | 'children' | `aria-label` | `aria-labelledby`
 >
 
@@ -49,7 +64,7 @@ export interface ModalProps extends DivProps, ObfuscatedClassName {
     /**
      * The content of the modal.
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * Whether the modal is open and visible or not.
@@ -59,7 +74,7 @@ export interface ModalProps extends DivProps, ObfuscatedClassName {
     /**
      * Called when the user triggers closing the modal.
      */
-    onDismiss?(): void
+    onDismiss?(this: void): void
 
     /**
      * A descriptive setting for how wide the modal should aim to be, depending on how much space
@@ -174,7 +189,7 @@ export function Modal({
     className,
     ...props
 }: ModalProps) {
-    const setOpen = React.useCallback(
+    const setOpen = useCallback(
         (visible: boolean) => {
             if (!visible) {
                 onDismiss?.()
@@ -184,17 +199,16 @@ export function Modal({
     )
     const store = useDialogStore({ open: isOpen, setOpen })
 
-    const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height, dividers }), [
-        onDismiss,
-        height,
-        dividers,
-    ])
-
-    const portalRef = React.useRef<HTMLElement | null>(null)
-    const dialogRef = React.useRef<HTMLDivElement | null>(null)
-    const backdropRef = React.useRef<HTMLDivElement | null>(null)
-    const handleBackdropClick = React.useCallback(
-        (event: React.MouseEvent) => {
+    const contextValue: ModalContextValue = useMemo(
+        () => ({ onDismiss, height, dividers }),
+        [onDismiss, height, dividers],
+    )
+
+    const portalRef = useRef<HTMLElement | null>(null)
+    const dialogRef = useRef<HTMLDivElement | null>(null)
+    const backdropRef = useRef<HTMLDivElement | null>(null)
+    const handleBackdropClick = useCallback(
+        (event: MouseEvent) => {
             if (
                 // The focus lock element takes up the same space as the backdrop and is where the event bubbles up from,
                 // so instead of checking the backdrop as the event target, we need to make sure it's just above the dialog
@@ -209,7 +223,7 @@ export function Modal({
         [onDismiss],
     )
 
-    React.useLayoutEffect(
+    useLayoutEffect(
         function disableAccessibilityTreeOutside() {
             if (!isOpen || !portalRef.current) {
                 return
@@ -220,8 +234,8 @@ export function Modal({
         [isOpen],
     )
 
-    const handleKeyDown = React.useCallback(
-        function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    const handleKeyDown = useCallback(
+        function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
             if (
                 hideOnEscape &&
                 onDismiss != null &&
@@ -325,28 +339,33 @@ export interface ModalCloseButtonProps
  * @see ModalHeader
  */
 export function ModalCloseButton(props: ModalCloseButtonProps) {
-    const { onDismiss } = React.useContext(ModalContext)
-    const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)
-    const [isMounted, setIsMounted] = React.useState(false)
-
-    React.useEffect(
-        function skipAutoFocus() {
-            if (isMounted) {
-                setIncludeInTabOrder(true)
-            } else {
-                setIsMounted(true)
-            }
-        },
-        [isMounted],
-    )
+    const { onDismiss } = useContext(ModalContext)
+    const buttonRef = useRef<HTMLButtonElement>(null)
+
+    useLayoutEffect(function skipAutoFocus() {
+        const button = buttonRef.current
+        if (!button) {
+            return
+        }
+
+        button.tabIndex = -1
+
+        const rafId = requestAnimationFrame(() => {
+            button.tabIndex = 0
+        })
+
+        return () => {
+            cancelAnimationFrame(rafId)
+        }
+    }, [])
 
     return (
         <IconButton
             {...props}
+            ref={buttonRef}
             variant="quaternary"
             onClick={onDismiss}
             icon={<CloseIcon />}
-            tabIndex={includeInTabOrder ? 0 : -1}
         />
     )
 }
@@ -359,13 +378,13 @@ export interface ModalHeaderProps extends DivProps, ObfuscatedClassName {
     /**
      * The content of the header.
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * Allows to provide a custom button element, or to omit the close button if set to false.
      * @see ModalCloseButton
      */
-    button?: React.ReactNode | boolean
+    button?: ReactNode | boolean
 
     /**
      * Whether to render a divider line below the header.
@@ -388,7 +407,7 @@ export function ModalHeader({
     exceptionallySetClassName,
     ...props
 }: ModalHeaderProps) {
-    const { dividers } = React.useContext(ModalContext)
+    const { dividers } = useContext(ModalContext)
 
     return (
         <>
@@ -432,7 +451,7 @@ export interface ModalBodyProps extends DivProps, ObfuscatedClassName {
     /**
      * The content of the modal body.
      */
-    children: React.ReactNode
+    children: ReactNode
 }
 
 /**
@@ -451,7 +470,7 @@ export const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function Mod
     { exceptionallySetClassName, children, ...props },
     ref,
 ) {
-    const { height } = React.useContext(ModalContext)
+    const { height } = useContext(ModalContext)
     return (
         <Box
             {...props}
@@ -476,7 +495,7 @@ export interface ModalFooterProps extends DivProps, ObfuscatedClassName {
     /**
      * The contant of the modal footer.
      */
-    children: React.ReactNode
+    children: ReactNode
     /**
      * Whether to render a divider line below the footer.
      * @default false
@@ -496,7 +515,7 @@ export function ModalFooter({
     withDivider = false,
     ...props
 }: ModalFooterProps) {
-    const { dividers } = React.useContext(ModalContext)
+    const { dividers } = useContext(ModalContext)
 
     return (
         <>
diff --git a/src/notice/notice.test.tsx b/src/notice/notice.test.tsx
index f876a4b3c..5581cc2a6 100644
--- a/src/notice/notice.test.tsx
+++ b/src/notice/notice.test.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
+
 import { Notice } from './notice'
 
 describe('Alert', () => {
diff --git a/src/notice/notice.tsx b/src/notice/notice.tsx
index 644676ded..adee6f995 100644
--- a/src/notice/notice.tsx
+++ b/src/notice/notice.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
-import { getClassNames } from '../utils/responsive-props'
 import { Box } from '../box'
-import { Columns, Column } from '../columns'
+import { Column, Columns } from '../columns'
 import { AlertIcon } from '../icons/alert-icon'
-
-import type { AlertTone } from '../utils/common-types'
+import { getClassNames } from '../utils/responsive-props'
 
 import styles from './notice.module.css'
 
+import type { ReactNode } from 'react'
+import type { AlertTone } from '../utils/common-types'
+
 type NoticeProps = {
     id?: string
-    children: React.ReactNode
+    children: ReactNode
     tone: AlertTone
 }
 
diff --git a/src/password-field/password-field.test.tsx b/src/password-field/password-field.test.tsx
index df1d8e2cf..7e8e2d838 100644
--- a/src/password-field/password-field.test.tsx
+++ b/src/password-field/password-field.test.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { PasswordField } from './'
 import { axe } from 'jest-axe'
 
+import { PasswordField } from './'
+
 describe('PasswordField', () => {
     it('supports having an externally provided id attribute', () => {
         render(<PasswordField data-testid="password-field" id="custom-id" label="New Password" />)
@@ -277,7 +279,7 @@ describe('PasswordField', () => {
 
     it('can be a controlled input field', () => {
         function TestCase() {
-            const [value, setValue] = React.useState('')
+            const [value, setValue] = useState('')
             return (
                 <>
                     <PasswordField
diff --git a/src/password-field/password-field.tsx b/src/password-field/password-field.tsx
index 196a53477..0551b2da0 100644
--- a/src/password-field/password-field.tsx
+++ b/src/password-field/password-field.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react'
+import { forwardRef, useState } from 'react'
 
-import { PasswordVisibleIcon } from '../icons/password-visible-icon'
+import { IconButton } from '../button'
 import { PasswordHiddenIcon } from '../icons/password-hidden-icon'
-
+import { PasswordVisibleIcon } from '../icons/password-visible-icon'
 import { TextField, TextFieldProps } from '../text-field'
-import { IconButton } from '../button'
 
+import type { ReactElement } from 'react'
 import type { BaseFieldVariantProps } from '../base-field'
 
 interface PasswordFieldProps
     extends Omit<TextFieldProps, 'type' | 'startSlot' | 'endSlot'>,
         BaseFieldVariantProps {
     togglePasswordLabel?: string
-    endSlot?: React.ReactElement | string | number
+    endSlot?: ReactElement | string | number
 }
 
-const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(
+const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(function PasswordField(
     { togglePasswordLabel = 'Toggle password visibility', endSlot, ...props },
     ref,
 ) {
-    const [isPasswordVisible, setPasswordVisible] = React.useState(false)
+    const [isPasswordVisible, setPasswordVisible] = useState(false)
     const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon
     return (
         <TextField
diff --git a/src/prose/index.ts b/src/prose/index.ts
index 5b5a10f9c..e9946174e 100644
--- a/src/prose/index.ts
+++ b/src/prose/index.ts
@@ -1,2 +1,2 @@
-export { Prose } from './prose'
 export type { ProseProps } from './prose'
+export { Prose } from './prose'
diff --git a/src/prose/prose.stories.tsx b/src/prose/prose.stories.tsx
index 6a24d22b9..10499d23d 100644
--- a/src/prose/prose.stories.tsx
+++ b/src/prose/prose.stories.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Box } from '../box'
 
 import { Prose, ProseProps } from './prose'
diff --git a/src/prose/prose.test.tsx b/src/prose/prose.test.tsx
index 88114a754..989767eb0 100644
--- a/src/prose/prose.test.tsx
+++ b/src/prose/prose.test.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+
 import { Prose } from './prose'
 
 describe('Prose', () => {
diff --git a/src/prose/prose.tsx b/src/prose/prose.tsx
index 2da96c374..36e56b11a 100644
--- a/src/prose/prose.tsx
+++ b/src/prose/prose.tsx
@@ -1,6 +1,8 @@
-import * as React from 'react'
 import { Box } from '../box'
+
 import styles from './prose.module.css'
+
+import type { ReactNode } from 'react'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 interface ProseProps extends ObfuscatedClassName {
@@ -14,7 +16,7 @@ interface ProseProps extends ObfuscatedClassName {
      * Alternatively, you can use `<Prose dangerouslySetInnerHTML={{ __html: htmlString }}` />`
      * instead.
      */
-    children?: React.ReactNode
+    children?: ReactNode
 
     /**
      * Sets the prose content to be raw HTML stored in a string value.
diff --git a/src/select-field/select-field.module.css b/src/select-field/select-field.module.css
index 54912b649..11020ce5a 100644
--- a/src/select-field/select-field.module.css
+++ b/src/select-field/select-field.module.css
@@ -32,7 +32,8 @@
         (
                 var(--tmp-desired-height) - var(--reactist-font-size-body) -
                     var(--tmp-line-height-increase)
-            ) / 2
+            ) /
+            2
     );
     padding: var(--tmp-vertical-padding) 10px;
     padding-right: 30px; /* to make room for the absolutely positioned chevron icon */
diff --git a/src/select-field/select-field.test.tsx b/src/select-field/select-field.test.tsx
index 636edc381..3504e01f9 100644
--- a/src/select-field/select-field.test.tsx
+++ b/src/select-field/select-field.test.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { render, screen } from '@testing-library/react'
-import { SelectField } from './'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
+import { SelectField } from './'
+
 describe('SelectField', () => {
     it('supports having an externally provided id attribute', () => {
         render(<SelectField data-testid="select-field" id="custom-id" label="Province" />)
@@ -218,7 +220,7 @@ describe('SelectField', () => {
 
     it('can be a controlled select field', () => {
         function TestCase() {
-            const [theme, setTheme] = React.useState('dark')
+            const [theme, setTheme] = useState('dark')
             return (
                 <div data-testid="container" data-theme={theme}>
                     <SelectField
diff --git a/src/select-field/select-field.tsx b/src/select-field/select-field.tsx
index 5acdc8277..204c321c9 100644
--- a/src/select-field/select-field.tsx
+++ b/src/select-field/select-field.tsx
@@ -1,6 +1,8 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
+
 import { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'
 import { Box } from '../box'
+
 import styles from './select-field.module.css'
 
 interface SelectFieldProps
@@ -14,7 +16,7 @@ interface SelectFieldProps
         >,
         BaseFieldVariantProps {}
 
-const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(
+const SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(function SelectField(
     {
         variant = 'default',
         id,
diff --git a/src/spinner/spinner.tsx b/src/spinner/spinner.tsx
index 53a03e246..f580a2be0 100644
--- a/src/spinner/spinner.tsx
+++ b/src/spinner/spinner.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import styles from './spinner.module.css'
 
 function Spinner({ size = 18 }: { size?: number }) {
diff --git a/src/stack/stack.stories.tsx b/src/stack/stack.stories.tsx
index 932045752..ea5211a16 100644
--- a/src/stack/stack.stories.tsx
+++ b/src/stack/stack.stories.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react'
+import { Heading } from '../heading'
 import {
-    selectSize,
-    selectCount,
-    times,
-    reusableBoxProps,
     disableResponsiveProps,
+    PartialProps,
     Placeholder,
     ResponsiveWidthRef,
-    Wrapper,
+    reusableBoxProps,
+    selectCount,
+    selectSize,
     selectWithNone,
-    PartialProps,
+    times,
+    Wrapper,
 } from '../utils/storybook-helper'
-import { Heading } from '../heading'
+
 import { Stack } from './stack'
 
 import type { DividerWeight } from '../divider'
diff --git a/src/stack/stack.test.tsx b/src/stack/stack.test.tsx
index 5589a7229..78554fd32 100644
--- a/src/stack/stack.test.tsx
+++ b/src/stack/stack.test.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+
 import { runSpaceTests } from '../utils/test-helpers'
+
 import { Stack } from './'
-import { axe } from 'jest-axe'
 
 describe('Stack', () => {
     it('does not acknowledge the className prop, but exceptionallySetClassName instead', () => {
diff --git a/src/stack/stack.tsx b/src/stack/stack.tsx
index 60c1c3f64..2ed4afe74 100644
--- a/src/stack/stack.tsx
+++ b/src/stack/stack.tsx
@@ -1,13 +1,14 @@
-import * as React from 'react'
+import { Children } from 'react'
 import flattenChildren from 'react-keyed-flatten-children'
-import { polymorphicComponent } from '../utils/polymorphism'
-import { mapResponsiveProp } from '../utils/responsive-props'
+
 import { Box } from '../box'
 import { Divider } from '../divider'
+import { polymorphicComponent } from '../utils/polymorphism'
+import { mapResponsiveProp } from '../utils/responsive-props'
 
-import type { ResponsiveProp } from '../utils/responsive-props'
-import type { DividerWeight, Space } from '../utils/common-types'
 import type { BoxProps, ReusableBoxProps } from '../box'
+import type { DividerWeight, Space } from '../utils/common-types'
+import type { ResponsiveProp } from '../utils/responsive-props'
 
 type Align = 'start' | 'center' | 'end'
 
@@ -53,7 +54,7 @@ const Stack = polymorphicComponent<'div', StackProps>(function Stack(
             ref={ref}
         >
             {dividers !== 'none'
-                ? React.Children.map(flattenChildren(children), (child, index) =>
+                ? Children.map(flattenChildren(children), (child, index) =>
                       index > 0 ? (
                           <>
                               <Divider weight={dividers} />
diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css
index a8f509409..0954547d2 100644
--- a/src/styles/design-tokens.css
+++ b/src/styles/design-tokens.css
@@ -30,11 +30,12 @@
     --reactist-width-xlarge: 1280px;
 
     /* font family */
-    --reactist-font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Noto, Oxygen-Sans, Ubuntu,
-        Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol';
-    --reactist-font-family-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
-        'Cascadia Mono', Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --reactist-font-family:
+        -apple-system, system-ui, 'Segoe UI', Roboto, Noto, Oxygen-Sans, Ubuntu, Cantrell,
+        'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --reactist-font-family-monospace:
+        ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', Consolas,
+        'Liberation Mono', 'Courier New', monospace;
 
     /* font sizes */
     --reactist-font-size-caption: 12px;
diff --git a/src/switch-field/switch-field.test.tsx b/src/switch-field/switch-field.test.tsx
index d3d16c7da..56222e6d2 100644
--- a/src/switch-field/switch-field.test.tsx
+++ b/src/switch-field/switch-field.test.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { render, screen } from '@testing-library/react'
-import { SwitchField } from './'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
+import { SwitchField } from './'
+
 describe('SwitchField', () => {
     it('supports having an externally provided id attribute', () => {
         render(<SwitchField data-testid="switch-field" id="custom-id" label="Show unread badge" />)
@@ -114,7 +116,7 @@ describe('SwitchField', () => {
 
     it('can be a controlled input field', () => {
         function TestCase() {
-            const [checked, setChecked] = React.useState(false)
+            const [checked, setChecked] = useState(false)
             return (
                 <>
                     <SwitchField
diff --git a/src/switch-field/switch-field.tsx b/src/switch-field/switch-field.tsx
index f3d26421d..87bd6eb2d 100644
--- a/src/switch-field/switch-field.tsx
+++ b/src/switch-field/switch-field.tsx
@@ -1,10 +1,12 @@
-import * as React from 'react'
+import { forwardRef, useState } from 'react'
+
+import { FieldComponentProps, FieldMessage } from '../base-field'
 import { Box } from '../box'
+import { HiddenVisually } from '../hidden-visually'
 import { Stack } from '../stack'
 import { Text } from '../text'
-import { HiddenVisually } from '../hidden-visually'
-import { FieldComponentProps, FieldMessage } from '../base-field'
 import { useId } from '../utils/common-helpers'
+
 import styles from './switch-field.module.css'
 
 interface SwitchFieldProps
@@ -33,7 +35,7 @@ interface SwitchFieldProps
     'aria-labelledby'?: string
 }
 
-const SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(
+const SwitchField = forwardRef<HTMLInputElement, SwitchFieldProps>(function SwitchField(
     {
         label,
         message,
@@ -57,8 +59,8 @@ const SwitchField = React.forwardRef<HTMLInputElement, SwitchFieldProps>(functio
     const ariaLabel = originalAriaLabel ?? undefined
     const ariaLabelledBy = originalAriaLabelledby ?? undefined
 
-    const [keyFocused, setKeyFocused] = React.useState(false)
-    const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)
+    const [keyFocused, setKeyFocused] = useState(false)
+    const [checkedState, setChecked] = useState(props.checked ?? defaultChecked ?? false)
     const isChecked = props.checked ?? checkedState
 
     return (
diff --git a/src/tabs/tabs.test.tsx b/src/tabs/tabs.test.tsx
index d043ead19..42cd54161 100644
--- a/src/tabs/tabs.test.tsx
+++ b/src/tabs/tabs.test.tsx
@@ -1,9 +1,12 @@
-import * as React from 'react'
-import { screen, render, waitFor } from '@testing-library/react'
+import { forwardRef } from 'react'
+
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
-import { Tabs, Tab, TabList, TabPanel, TabAwareSlot } from './'
+import { Tab, TabAwareSlot, TabList, TabPanel, Tabs } from './'
+
+import type { AllHTMLAttributes } from 'react'
 
 describe('Tabs', () => {
     it("allows each TabPanel's visibility to be controlled by its corresponding tab", async () => {
@@ -211,16 +214,15 @@ describe('Tabs', () => {
     })
 
     it('allows different elements to be rendered in place of the TabPanel', async () => {
-        const CustomTabPanel = React.forwardRef<
-            HTMLDivElement,
-            React.AllHTMLAttributes<HTMLDivElement>
-        >(function CustomTabPanel({ children, ...props }, ref) {
-            return (
-                <div data-testid="custom-tab-panel" {...props} ref={ref}>
-                    {children}
-                </div>
-            )
-        })
+        const CustomTabPanel = forwardRef<HTMLDivElement, AllHTMLAttributes<HTMLDivElement>>(
+            function CustomTabPanel({ children, ...props }, ref) {
+                return (
+                    <div data-testid="custom-tab-panel" {...props} ref={ref}>
+                        {children}
+                    </div>
+                )
+            },
+        )
 
         render(
             <Tabs>
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
index d85047ca0..786594013 100644
--- a/src/tabs/tabs.tsx
+++ b/src/tabs/tabs.tsx
@@ -1,33 +1,45 @@
-import * as React from 'react'
-import classNames from 'classnames'
 import {
-    useTabStore,
+    createContext,
+    forwardRef,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+
+import {
     Tab as BaseTab,
-    TabProps as BaseTabProps,
     TabList as BaseTabList,
     TabPanel as BaseTabPanel,
     TabPanelProps as BaseTabPanelProps,
+    TabProps as BaseTabProps,
     TabStore,
+    useTabStore,
 } from '@ariakit/react'
+import classNames from 'classnames'
+
 import { Box, BoxJustifyContent } from '../box'
 import { Inline } from '../inline'
 
-import type { ObfuscatedClassName, Space } from '../utils/common-types'
-
 import styles from './tabs.module.css'
 
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from 'react'
+import type { ObfuscatedClassName, Space } from '../utils/common-types'
+
 type TabsContextValue = Required<Pick<TabsProps, 'variant'>> & {
     tabStore: TabStore
 }
 
-const TabsContext = React.createContext<TabsContextValue | null>(null)
+const TabsContext = createContext<TabsContextValue | null>(null)
 
 interface TabsProps {
     /**
      * The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>`
      * components
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * Determines the look and feel of the tabs
@@ -60,7 +72,7 @@ function Tabs({
     defaultSelectedId,
     variant = 'neutral',
     onSelectedIdChange,
-}: TabsProps): React.ReactElement {
+}: TabsProps): ReactElement {
     const tabStore = useTabStore({
         defaultSelectedId,
         selectedId,
@@ -68,7 +80,7 @@ function Tabs({
     })
     const actualSelectedId = tabStore.useState('selectedId')
 
-    const memoizedTabState = React.useMemo(
+    const memoizedTabState = useMemo(
         () => ({ tabStore, variant, selectedId: selectedId ?? actualSelectedId ?? null }),
         [variant, tabStore, selectedId, actualSelectedId],
     )
@@ -81,7 +93,7 @@ interface TabProps
     /**
      * The content to render inside of the tab button
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * The tab's identifier. This must match its corresponding `<TabPanel>`'s id
@@ -97,11 +109,11 @@ interface TabProps
 /**
  * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.
  */
-const Tab = React.forwardRef<HTMLButtonElement, TabProps>(function Tab(
+const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(
     { children, id, disabled, exceptionallySetClassName, render, onClick },
     ref,
-): React.ReactElement | null {
-    const tabContextValue = React.useContext(TabsContext)
+): ReactElement | null {
+    const tabContextValue = useContext(TabsContext)
     if (!tabContextValue) return null
 
     const { variant, tabStore } = tabContextValue
@@ -144,7 +156,7 @@ type TabListProps = (
     /**
      * A list of `<Tab>` elements
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * Controls the spacing between tabs
@@ -179,18 +191,18 @@ function TabList({
     align = 'start',
     exceptionallySetClassName,
     ...props
-}: TabListProps): React.ReactElement | null {
-    const tabListRef = React.useRef<HTMLDivElement | null>(null)
-    const tabListPrevWidthRef = React.useRef(0)
+}: TabListProps): ReactElement | null {
+    const tabListRef = useRef<HTMLDivElement | null>(null)
+    const tabListPrevWidthRef = useRef(0)
 
-    const tabContextValue = React.useContext(TabsContext)
+    const tabContextValue = useContext(TabsContext)
 
-    const [selectedTabElement, setSelectedTabElement] = React.useState<HTMLElement | null>(null)
-    const [selectedTabStyle, setSelectedTabStyle] = React.useState<React.CSSProperties>({})
+    const [selectedTabElement, setSelectedTabElement] = useState<HTMLElement | null>(null)
+    const [selectedTabStyle, setSelectedTabStyle] = useState<CSSProperties>({})
 
     const selectedId = tabContextValue?.tabStore.useState('selectedId')
 
-    const updateSelectedTabPosition = React.useCallback(
+    const updateSelectedTabPosition = useCallback(
         function updateSelectedTabPositionCallback() {
             if (!selectedId || !tabListRef.current) {
                 return
@@ -213,7 +225,7 @@ function TabList({
         [selectedId],
     )
 
-    React.useEffect(
+    useEffect(
         function updateSelectedTabPositionOnTabChange() {
             updateSelectedTabPosition()
         },
@@ -221,7 +233,7 @@ function TabList({
         [selectedId, updateSelectedTabPosition],
     )
 
-    React.useEffect(
+    useEffect(
         function observeTabListWidthChange() {
             let animationFrameId: number | null = null
 
@@ -305,11 +317,9 @@ function TabList({
     )
 }
 
-interface TabPanelProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        Pick<BaseTabPanelProps, 'render'> {
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement>, Pick<BaseTabPanelProps, 'render'> {
     /** The content to be rendered inside the tab */
-    children?: React.ReactNode
+    children?: ReactNode
 
     /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */
     id: string
@@ -327,16 +337,16 @@ interface TabPanelProps
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a
  * corresponding `<Tab>` component.
  */
-const TabPanel = React.forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(
+const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(
     { children, id, renderMode = 'always', ...props },
     ref,
-): React.ReactElement | null {
-    const tabContextValue = React.useContext(TabsContext)
-    const [tabRendered, setTabRendered] = React.useState(false)
+): ReactElement | null {
+    const tabContextValue = useContext(TabsContext)
+    const [tabRendered, setTabRendered] = useState(false)
     const selectedId = tabContextValue?.tabStore.useState('selectedId')
     const tabIsActive = selectedId === id
 
-    React.useEffect(
+    useEffect(
         function trackTabRenderedState() {
             if (!tabRendered && tabIsActive) {
                 setTabRendered(true)
@@ -367,17 +377,17 @@ type TabAwareSlotProps = {
      * Render prop used to provide the content to be rendered inside the slot. The render prop will
      * be called with the current `selectedId`
      */
-    children: (provided: { selectedId?: string | null }) => React.ReactElement | null
+    children: (provided: { selectedId?: string | null }) => ReactElement | null
 }
 
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the
  * TabPanel component. Can be placed freely within the main `<Tabs>` component.
  */
-function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {
-    const tabContextValue = React.useContext(TabsContext)
+function TabAwareSlot({ children }: TabAwareSlotProps): ReactElement | null {
+    const tabContextValue = useContext(TabsContext)
     const selectedId = tabContextValue?.tabStore.useState('selectedId')
     return tabContextValue ? children({ selectedId }) : null
 }
 
-export { Tab, Tabs, TabList, TabPanel, TabAwareSlot }
+export { Tab, TabAwareSlot, TabList, TabPanel, Tabs }
diff --git a/src/text-area/text-area.stories.mdx b/src/text-area/text-area.stories.mdx
index eabdaeb5d..a74d66718 100644
--- a/src/text-area/text-area.stories.mdx
+++ b/src/text-area/text-area.stories.mdx
@@ -1,4 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
+import { useState } from 'react'
 
 import { Box } from '../box'
 import { Stack } from '../stack'
@@ -198,7 +199,7 @@ Note that these variables are shared with other components such as `Textfield`,
 </Canvas>
 
 export function AutoExpandStory(props) {
-    const [value, setValue] = React.useState('')
+    const [value, setValue] = useState('')
     return (
         <Stack space="large" dividers="secondary" maxWidth="medium">
             <TextArea
diff --git a/src/text-area/text-area.test.tsx b/src/text-area/text-area.test.tsx
index 11b9f4695..17454ff43 100644
--- a/src/text-area/text-area.test.tsx
+++ b/src/text-area/text-area.test.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { render, screen } from '@testing-library/react'
-import { TextArea } from './'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
+import { TextArea } from './'
+
 describe('TextArea', () => {
     it('supports having an externally provided id attribute', () => {
         render(<TextArea data-testid="text-area" id="custom-id" label="Tell us a bit about you" />)
@@ -227,7 +229,7 @@ describe('TextArea', () => {
 
     it('can be a controlled field', () => {
         function TestCase() {
-            const [value, setValue] = React.useState('')
+            const [value, setValue] = useState('')
             return (
                 <>
                     <TextArea
diff --git a/src/text-area/text-area.tsx b/src/text-area/text-area.tsx
index 28c2c76e3..2e56ab062 100644
--- a/src/text-area/text-area.tsx
+++ b/src/text-area/text-area.tsx
@@ -1,10 +1,15 @@
-import * as React from 'react'
+import { forwardRef, useEffect, useRef } from 'react'
+
 import classNames from 'classnames'
 import { useMergeRefs } from 'use-callback-ref'
+
 import { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'
 import { Box } from '../box'
+
 import styles from './text-area.module.css'
 
+import type { RefObject } from 'react'
+
 interface TextAreaProps
     extends Omit<FieldComponentProps<HTMLTextAreaElement>, 'characterCountPosition'>,
         Omit<
@@ -48,7 +53,7 @@ interface TextAreaProps
     disableResize?: boolean
 }
 
-const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
     {
         variant = 'default',
         id,
@@ -69,8 +74,8 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(function T
     },
     ref,
 ) {
-    const containerRef = React.useRef<HTMLDivElement>(null)
-    const internalRef = React.useRef<HTMLTextAreaElement>(null)
+    const containerRef = useRef<HTMLDivElement>(null)
+    const internalRef = useRef<HTMLTextAreaElement>(null)
     const combinedRef = useMergeRefs([ref, internalRef])
 
     useAutoExpand({ value, autoExpand, containerRef, internalRef })
@@ -132,12 +137,12 @@ function useAutoExpand({
 }: {
     value: string | undefined
     autoExpand: boolean
-    containerRef: React.RefObject<HTMLDivElement>
-    internalRef: React.RefObject<HTMLTextAreaElement>
+    containerRef: RefObject<HTMLDivElement>
+    internalRef: RefObject<HTMLTextAreaElement>
 }) {
     const isControlled = value !== undefined
 
-    React.useEffect(
+    useEffect(
         function setupAutoExpandWhenUncontrolled() {
             const textAreaElement = internalRef.current
             if (!textAreaElement || !autoExpand || isControlled) {
@@ -164,7 +169,7 @@ function useAutoExpand({
         [autoExpand, containerRef, internalRef, isControlled],
     )
 
-    React.useEffect(
+    useEffect(
         function setupAutoExpandWhenControlled() {
             if (!isControlled || !autoExpand) {
                 return
diff --git a/src/text-field/text-field.module.css b/src/text-field/text-field.module.css
index c56ffbaf1..be6201c36 100644
--- a/src/text-field/text-field.module.css
+++ b/src/text-field/text-field.module.css
@@ -66,7 +66,8 @@
         (
                 var(--tmp-desired-height) - var(--reactist-font-size-body) -
                     var(--tmp-line-height-increase)
-            ) / 2
+            ) /
+            2
     );
 
     margin: 0;
diff --git a/src/text-field/text-field.stories.mdx b/src/text-field/text-field.stories.mdx
index 8ffb6fe64..d563bfa0f 100644
--- a/src/text-field/text-field.stories.mdx
+++ b/src/text-field/text-field.stories.mdx
@@ -1,4 +1,5 @@
 import { Meta, Story, Canvas, ArgsTable, Description } from '@storybook/addon-docs'
+import { useState } from 'react'
 
 import { TextField } from './'
 import { Box } from '../box'
@@ -264,7 +265,7 @@ export function ClearButtonIcon() {
 }
 
 export function ClearButtonExample({ slot }) {
-    const [value, setValue] = React.useState('')
+    const [value, setValue] = useState('')
     const clearButton = (
         <IconButton
             variant="quaternary"
@@ -300,7 +301,7 @@ export function ClearButtonExample({ slot }) {
 </Canvas>
 
 export function WithTooltipExample() {
-    const [value, setValue] = React.useState('')
+    const [value, setValue] = useState('')
     const isValidNumber = /^\s*(\d{1,3})?\s*$/.test(value)
     return (
         <Tooltip content={isValidNumber ? null : 'Invalid age'} position="top-end">
@@ -372,7 +373,7 @@ export function WithBorderedAndEndSlotExample({ endSlotPosition = 'fullHeight' }
 The `maxLength` prop is used to limit the number of characters that the user can input. When the user tries to input more characters than the maximum allowed, the field won't accept the input.
 
 export function WithMaxLengthExample() {
-    const [value, setValue] = React.useState('Doist')
+    const [value, setValue] = useState('Doist')
     return (
         <TextField
             label="Company name"
diff --git a/src/text-field/text-field.test.tsx b/src/text-field/text-field.test.tsx
index 268592dc9..bd55f5847 100644
--- a/src/text-field/text-field.test.tsx
+++ b/src/text-field/text-field.test.tsx
@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { useState } from 'react'
+
 import { render, screen } from '@testing-library/react'
-import { TextField, TextFieldProps } from './'
 import userEvent from '@testing-library/user-event'
 import { axe } from 'jest-axe'
 
+import { TextField, TextFieldProps } from './'
+
 describe('TextField', () => {
     it('supports having an externally provided id attribute', () => {
         render(<TextField data-testid="text-field" id="custom-id" label="Whatʼs your name?" />)
@@ -183,7 +185,7 @@ describe('TextField', () => {
 
     it('can be a controlled input field', () => {
         function TestCase() {
-            const [value, setValue] = React.useState('')
+            const [value, setValue] = useState('')
             return (
                 <>
                     <TextField
diff --git a/src/text-field/text-field.tsx b/src/text-field/text-field.tsx
index a2ee7f731..f8e1522a2 100644
--- a/src/text-field/text-field.tsx
+++ b/src/text-field/text-field.tsx
@@ -1,9 +1,14 @@
-import * as React from 'react'
+import { forwardRef, useRef } from 'react'
+
+import { useMergeRefs } from 'use-callback-ref'
+
 import { BaseField, BaseFieldVariantProps } from '../base-field'
 import { Box } from '../box'
+
 import styles from './text-field.module.css'
+
+import type { MouseEvent, ReactElement } from 'react'
 import type { BaseFieldProps, FieldComponentProps } from '../base-field'
-import { useMergeRefs } from 'use-callback-ref'
 
 type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'
 
@@ -12,8 +17,8 @@ interface TextFieldProps
         BaseFieldVariantProps,
         Pick<BaseFieldProps, 'characterCountPosition'> {
     type?: TextFieldType
-    startSlot?: React.ReactElement | string | number
-    endSlot?: React.ReactElement | string | number
+    startSlot?: ReactElement | string | number
+    endSlot?: ReactElement | string | number
     /**
      * The maximum number of characters that the input field can accept.
      * When this limit is reached, the input field will not accept any more characters.
@@ -22,7 +27,7 @@ interface TextFieldProps
     maxLength?: number
 }
 
-const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
     {
         variant = 'default',
         id,
@@ -45,10 +50,10 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function Te
     },
     ref,
 ) {
-    const internalRef = React.useRef<HTMLInputElement>(null)
+    const internalRef = useRef<HTMLInputElement>(null)
     const combinedRef = useMergeRefs([ref, internalRef])
 
-    function handleClick(event: React.MouseEvent) {
+    function handleClick(event: MouseEvent) {
         if (event.currentTarget === combinedRef.current) return
         internalRef.current?.focus()
     }
diff --git a/src/text-link/text-link.test.tsx b/src/text-link/text-link.test.tsx
index 62822f920..939ac170f 100644
--- a/src/text-link/text-link.test.tsx
+++ b/src/text-link/text-link.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import * as React from 'react'
+
 import { TextLink } from './text-link'
 
 describe('TextLink', () => {
diff --git a/src/text-link/text-link.tsx b/src/text-link/text-link.tsx
index 1ade816e8..e4d1a9577 100644
--- a/src/text-link/text-link.tsx
+++ b/src/text-link/text-link.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
 import { Box } from '../box'
 import { polymorphicComponent } from '../utils/polymorphism'
+
 import styles from './text-link.module.css'
+
 import type { OpenInNewTab } from '../utils/common-types'
 
 type TextLinkColors = 'default' | 'inherit'
diff --git a/src/text/text.stories.tsx b/src/text/text.stories.tsx
index fdf6a863e..4034c2608 100644
--- a/src/text/text.stories.tsx
+++ b/src/text/text.stories.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
-
 import { Stack } from '../stack'
-import { Text } from './text'
 import { ResponsiveWidthRef, select, selectWithNone } from '../utils/storybook-helper'
 
+import { Text } from './text'
+
+import type { ComponentProps } from 'react'
+
 export default {
     title: 'Design system/Text',
     component: Text,
@@ -138,7 +139,7 @@ TruncatedTextStory.parameters = {
     chromatic: { disableSnapshot: false },
 }
 
-export function ResponsiveTextStory(props: React.ComponentProps<typeof Text>) {
+export function ResponsiveTextStory(props: ComponentProps<typeof Text>) {
     return (
         <>
             <ResponsiveWidthRef />
@@ -159,7 +160,7 @@ ResponsiveTextStory.argTypes = {
     },
 }
 
-export function TextPlaygroundStory(props: React.ComponentProps<typeof Text>) {
+export function TextPlaygroundStory(props: ComponentProps<typeof Text>) {
     return (
         <section className="story playground">
             <Text {...props} />
diff --git a/src/text/text.test.tsx b/src/text/text.test.tsx
index e69a07962..fda038c03 100644
--- a/src/text/text.test.tsx
+++ b/src/text/text.test.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+
 import { Text } from './text'
 
 describe('Text', () => {
diff --git a/src/text/text.tsx b/src/text/text.tsx
index e82bed2a4..9b440ae3a 100644
--- a/src/text/text.tsx
+++ b/src/text/text.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react'
-import { getClassNames } from '../utils/responsive-props'
 import { Box } from '../box'
 import { polymorphicComponent } from '../utils/polymorphism'
-
-import type { Tone } from '../utils/common-types'
-import type { BoxProps } from '../box'
+import { getClassNames } from '../utils/responsive-props'
 
 import styles from './text.module.css'
 
+import type { ReactNode } from 'react'
+import type { BoxProps } from '../box'
+import type { Tone } from '../utils/common-types'
+
 type TextProps = {
-    children: React.ReactNode
+    children: ReactNode
     /**
      * The size of the text.
      *
diff --git a/src/toast/index.ts b/src/toast/index.ts
index b5c52dae1..b6e8ae5a1 100644
--- a/src/toast/index.ts
+++ b/src/toast/index.ts
@@ -1,5 +1,4 @@
-export { StaticToast } from './static-toast'
-export { Toast, ToastsProvider, useToasts } from './use-toasts'
-
 export type { StaticToastProps } from './static-toast'
+export { StaticToast } from './static-toast'
 export type { ToastProps, ToastsProviderProps } from './use-toasts'
+export { Toast, ToastsProvider, useToasts } from './use-toasts'
diff --git a/src/toast/static-toast.tsx b/src/toast/static-toast.tsx
index e1b2dc401..ecb230f3f 100644
--- a/src/toast/static-toast.tsx
+++ b/src/toast/static-toast.tsx
@@ -1,13 +1,15 @@
-import React from 'react'
+import { forwardRef } from 'react'
 
-import { CloseIcon } from '../icons/close-icon'
 import { Box } from '../box'
-import { IconButton, Button } from '../button'
+import { Button, IconButton } from '../button'
+import { CloseIcon } from '../icons/close-icon'
 import { Stack } from '../stack'
 import { Text } from '../text'
 
 import styles from './toast.module.css'
 
+import type { ReactElement, ReactNode } from 'react'
+
 type ToastActionObject = {
     label: string
     onClick: () => void
@@ -18,17 +20,17 @@ type StaticToastProps = {
     /**
      * The message shown in the toast.
      */
-    message: NonNullable<React.ReactNode>
+    message: NonNullable<ReactNode>
 
     /**
      * An optional extra description that complements the main message shown in the toast.
      */
-    description?: React.ReactNode
+    description?: ReactNode
 
     /**
      * An icon to be shown in front of the message.
      */
-    icon?: React.ReactNode
+    icon?: ReactNode
 
     /**
      * The action to call when the user clicks on the dismiss button. If omitted, the dismiss button
@@ -56,7 +58,7 @@ type StaticToastProps = {
      * are the ones that look better in the toast's dark background. And in all cases you should use
      * size `small`.
      */
-    action?: React.ReactElement | ToastActionObject
+    action?: ReactElement | ToastActionObject
 }
 
 /**
@@ -73,7 +75,7 @@ type StaticToastProps = {
  *
  * @see useToasts
  */
-const StaticToast = React.forwardRef<HTMLDivElement, StaticToastProps>(function Toast(
+const StaticToast = forwardRef<HTMLDivElement, StaticToastProps>(function Toast(
     { message, description, icon, action, onDismiss, dismissLabel = 'Close', ...props },
     ref,
 ) {
@@ -142,7 +144,7 @@ function isActionObject(action: StaticToastProps['action']): action is ToastActi
     )
 }
 
-function ToastContentSlot({ children }: { children: React.ReactNode }) {
+function ToastContentSlot({ children }: { children: ReactNode }) {
     return (
         <Box
             display="flex"
@@ -157,5 +159,5 @@ function ToastContentSlot({ children }: { children: React.ReactNode }) {
     )
 }
 
-export { StaticToast, isActionObject }
+export { isActionObject, StaticToast }
 export type { StaticToastProps }
diff --git a/src/toast/toast-animation.ts b/src/toast/toast-animation.ts
index fc1c55651..40559711c 100644
--- a/src/toast/toast-animation.ts
+++ b/src/toast/toast-animation.ts
@@ -24,7 +24,7 @@
  * SOFTWARE.
  */
 
-import { useMemo, useCallback, useLayoutEffect } from 'react'
+import { useCallback, useLayoutEffect, useMemo } from 'react'
 
 const ANIMATION_TIMEOUT = 400
 const ENTRANCE_TRANSITION = 'transform 0.3s ease, opacity 0.3s ease'
diff --git a/src/toast/toast.stories.tsx b/src/toast/toast.stories.tsx
index d86fb6077..4a3beec4e 100644
--- a/src/toast/toast.stories.tsx
+++ b/src/toast/toast.stories.tsx
@@ -1,22 +1,22 @@
-import * as React from 'react'
-import { action as storybookAction } from '@storybook/addon-actions'
+import { useRef, useState } from 'react'
 
-import { AlertIcon } from '../icons/alert-icon'
-import { PasswordVisibleIcon } from '../icons/password-visible-icon'
+import { action as storybookAction } from '@storybook/addon-actions'
 
 import { Box } from '../box'
 import { Button, ButtonVariant, IconButton } from '../button'
 import { CheckboxField } from '../checkbox-field'
 import { Heading } from '../heading'
+import { AlertIcon } from '../icons/alert-icon'
+import { PasswordVisibleIcon } from '../icons/password-visible-icon'
 import { Inline } from '../inline'
 import { SelectField } from '../select-field'
 import { Spinner } from '../spinner'
 import { Stack } from '../stack'
 import { SwitchField } from '../switch-field'
+import { Text } from '../text'
 
 import { StaticToast, StaticToastProps } from './static-toast'
 import { Toast, ToastsProvider, useToasts } from './use-toasts'
-import { Text } from '../text'
 
 export default {
     title: 'Design system/Toast',
@@ -52,8 +52,8 @@ function getRandom<T>(list: Array<T>): T {
 
 export function NotificationToastsStory() {
     const showToast = useToasts()
-    const count = React.useRef(0)
-    const [showSticky, setShowSticky] = React.useState(false)
+    const count = useRef(0)
+    const [showSticky, setShowSticky] = useState(false)
     return (
         <Box padding="large">
             <Stack space="xlarge">
@@ -130,9 +130,9 @@ export function NotificationToastsStory() {
 }
 
 export function StaticToastStory() {
-    const [showIcon, setShowIcon] = React.useState(false)
-    const [showDismiss, setShowDismiss] = React.useState(false)
-    const [actionVariant, setActionVariant] = React.useState<
+    const [showIcon, setShowIcon] = useState(false)
+    const [showDismiss, setShowDismiss] = useState(false)
+    const [actionVariant, setActionVariant] = useState<
         ButtonVariant | 'default' | 'loading' | 'icon-button' | 'none'
     >('none')
 
diff --git a/src/toast/toast.test.tsx b/src/toast/toast.test.tsx
index da7805e8d..72c4c878a 100644
--- a/src/toast/toast.test.tsx
+++ b/src/toast/toast.test.tsx
@@ -1,16 +1,17 @@
-import React from 'react'
-import { axe } from 'jest-axe'
+import { useState } from 'react'
+
 import { act, render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { axe } from 'jest-axe'
 
 import { TestIcon } from '../utils/test-helpers'
 
+import { StaticToast } from './static-toast'
 import { ANIMATION_TIMEOUT } from './toast-animation'
 import { Toast, ToastsProvider, useToasts } from './use-toasts'
-import { StaticToast } from './static-toast'
 
-import type { ToastProps, ToastsProviderProps } from './use-toasts'
 import type { StaticToastProps } from './static-toast'
+import type { ToastProps, ToastsProviderProps } from './use-toasts'
 
 function getToast(content: string | RegExp) {
     return screen.getByRole('alert', {
@@ -355,7 +356,7 @@ describe('Toast', () => {
 
     it('is removed when unmounted', async () => {
         function TestCase() {
-            const [show, setShow] = React.useState(false)
+            const [show, setShow] = useState(false)
             return (
                 <>
                     <button onClick={() => setShow((s) => !s)}>Toggle</button>
diff --git a/src/toast/use-toasts.tsx b/src/toast/use-toasts.tsx
index 696767199..dee14f294 100644
--- a/src/toast/use-toasts.tsx
+++ b/src/toast/use-toasts.tsx
@@ -1,15 +1,27 @@
-import React from 'react'
+import {
+    createContext,
+    forwardRef,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+
 import { Portal } from '@ariakit/react'
 
-import { generateElementId } from '../utils/common-helpers'
 import { Box } from '../box'
 import { Stack } from '../stack'
+import { generateElementId } from '../utils/common-helpers'
+
 import { isActionObject, StaticToast, StaticToastProps } from './static-toast'
+import { useToastsAnimation } from './toast-animation'
 
 import styles from './toast.module.css'
 
+import type { ReactNode } from 'react'
 import type { Space } from '../utils/common-types'
-import { useToastsAnimation } from './toast-animation'
 
 /**
  * The props needed to fire up a new notification toast.
@@ -52,7 +64,7 @@ type InternalToastProps = Omit<ToastProps, 'autoDismissDelay' | 'dismissLabel'>
     }
 
 /** @private */
-const InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(
+const InternalToast = forwardRef<HTMLDivElement, InternalToastProps>(function InternalToast(
     {
         message,
         description,
@@ -67,9 +79,9 @@ const InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(funct
     },
     ref,
 ) {
-    const timeoutRef = React.useRef<number | undefined>()
+    const timeoutRef = useRef<number | undefined>()
 
-    const removeToast = React.useCallback(
+    const removeToast = useCallback(
         function removeToast() {
             onRemoveToast(toastId)
             onDismiss?.()
@@ -77,7 +89,7 @@ const InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(funct
         [onDismiss, onRemoveToast, toastId],
     )
 
-    const startTimeout = React.useCallback(
+    const startTimeout = useCallback(
         function startTimeout() {
             if (!autoDismissDelay) return
             timeoutRef.current = window.setTimeout(removeToast, autoDismissDelay * 1000)
@@ -85,12 +97,12 @@ const InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(funct
         [autoDismissDelay, removeToast],
     )
 
-    const stopTimeout = React.useCallback(function stopTimeout() {
+    const stopTimeout = useCallback(function stopTimeout() {
         clearTimeout(timeoutRef.current)
         timeoutRef.current = undefined
     }, [])
 
-    React.useEffect(
+    useEffect(
         function setupAutoDismiss() {
             stopTimeout()
             startTimeout()
@@ -105,7 +117,7 @@ const InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(funct
      * the `onClick` property is wrapped in another handler responsible
      * for removing the toast when the action is triggered.
      */
-    const actionWithCustomActionHandler = React.useMemo(() => {
+    const actionWithCustomActionHandler = useMemo(() => {
         if (!isActionObject(action)) {
             return action
         }
@@ -151,7 +163,7 @@ type InternalToastEntry = Omit<InternalToastProps, 'onRemoveToast'>
 type ToastsList = readonly InternalToastEntry[]
 
 type ShowToastAction = (props: ToastProps) => () => void
-const ToastsContext = React.createContext<ShowToastAction>(() => () => undefined)
+const ToastsContext = createContext<ShowToastAction>(() => () => undefined)
 
 /**
  * The props needed by the ToastsProvider component.
@@ -192,7 +204,7 @@ type ToastsProviderProps = {
     /**
      * The app wrapped by the provider.
      */
-    children: NonNullable<React.ReactNode>
+    children: NonNullable<ReactNode>
 
     /**
      * Custom classname for the toasts container, if you need to fine-tune the position or other styles
@@ -214,10 +226,10 @@ function ToastsProvider({
     defaultDismissLabel = 'Close',
     containerClassName,
 }: ToastsProviderProps) {
-    const [toasts, setToasts] = React.useState<ToastsList>([])
+    const [toasts, setToasts] = useState<ToastsList>([])
     const { mappedRef, animateRemove } = useToastsAnimation()
 
-    const removeToast = React.useCallback(
+    const removeToast = useCallback(
         function onRemoveToast(toastId: string) {
             animateRemove(toastId, () => {
                 setToasts((list) => {
@@ -232,7 +244,7 @@ function ToastsProvider({
         [animateRemove],
     )
 
-    const showToast = React.useCallback(
+    const showToast = useCallback(
         function showToast(props: ToastProps) {
             const toastId = generateElementId('toast')
             const newToast: InternalToastEntry = {
@@ -297,7 +309,7 @@ function ToastsProvider({
  * @see ToastsProvider
  */
 function useToasts() {
-    return React.useContext(ToastsContext)
+    return useContext(ToastsContext)
 }
 
 /**
@@ -331,8 +343,8 @@ function useToasts() {
  */
 function Toast(props: ToastProps) {
     const showToast = useToasts()
-    const propsRef = React.useRef<ToastProps>(props)
-    React.useEffect(() => {
+    const propsRef = useRef<ToastProps>(props)
+    useEffect(() => {
         const dismissToast = showToast(propsRef.current)
         return dismissToast
     }, [showToast])
diff --git a/src/tooltip/index.ts b/src/tooltip/index.ts
index 821f11d20..c0126b6bb 100644
--- a/src/tooltip/index.ts
+++ b/src/tooltip/index.ts
@@ -1,2 +1,2 @@
-export { Tooltip, TooltipProvider } from './tooltip'
 export type { TooltipProps } from './tooltip'
+export { Tooltip, TooltipProvider } from './tooltip'
diff --git a/src/tooltip/tooltip.stories.tsx b/src/tooltip/tooltip.stories.tsx
index 1dcec6cd7..dec014acc 100644
--- a/src/tooltip/tooltip.stories.tsx
+++ b/src/tooltip/tooltip.stories.tsx
@@ -1,13 +1,16 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { createPortal } from 'react-dom'
 
-import { Tooltip, TooltipProps, TooltipProvider } from './tooltip'
+import { Box } from '../box'
 import { Button } from '../button'
 import { Stack } from '../stack'
-import { TextField } from '../text-field'
-import { Box } from '../box'
 import { Text } from '../text'
+import { TextField } from '../text-field'
+
+import { Tooltip, TooltipProps, TooltipProvider } from './tooltip'
+
 import type { TooltipStore } from '@ariakit/react'
+import type { PropsWithChildren } from 'react'
 
 //
 // Story setup
@@ -175,7 +178,7 @@ export function TooltipCustomZIndex() {
     )
 }
 
-function PortalToHead({ children }: React.PropsWithChildren<unknown>) {
+function PortalToHead({ children }: PropsWithChildren<unknown>) {
     return createPortal(children, document.head)
 }
 
@@ -219,7 +222,7 @@ TooltipGlobalContext.args = {
 //
 
 export function TooltipImperativeControl() {
-    const tooltipRef = React.useRef<TooltipStore>(null)
+    const tooltipRef = useRef<TooltipStore>(null)
 
     const handleForceHide = () => {
         tooltipRef.current?.hide()
diff --git a/src/tooltip/tooltip.test.tsx b/src/tooltip/tooltip.test.tsx
index 95cbaa4fe..fb8838eaf 100644
--- a/src/tooltip/tooltip.test.tsx
+++ b/src/tooltip/tooltip.test.tsx
@@ -1,11 +1,14 @@
-import * as React from 'react'
-import { render, screen, act } from '@testing-library/react'
-import { axe } from 'jest-axe'
+import { createRef } from 'react'
+
+import { act, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Tooltip } from './tooltip'
-import { flushMicrotasks } from '../utils/test-helpers'
+import { axe } from 'jest-axe'
+
 import { Box } from '../box'
 import { Button } from '../button'
+import { flushMicrotasks } from '../utils/test-helpers'
+
+import { Tooltip } from './tooltip'
 
 describe('Tooltip', () => {
     it('renders a tooltip when the button gets focus, hides it when blurred', async () => {
@@ -146,7 +149,7 @@ describe('Tooltip', () => {
     })
 
     it("does not interfere with the trigger element's ref forwarding", () => {
-        const buttonRef = React.createRef<HTMLButtonElement>()
+        const buttonRef = createRef<HTMLButtonElement>()
 
         render(
             <Tooltip content="tooltip content here">
diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx
index 32697374f..4b24dc806 100644
--- a/src/tooltip/tooltip.tsx
+++ b/src/tooltip/tooltip.tsx
@@ -1,16 +1,25 @@
-import * as React from 'react'
+import {
+    Children,
+    createContext,
+    forwardRef,
+    useContext,
+    useImperativeHandle,
+    useMemo,
+} from 'react'
 
 import {
-    useTooltipStore,
     Tooltip as AriakitTooltip,
     TooltipAnchor,
     TooltipArrow,
+    useTooltipStore,
 } from '@ariakit/react'
-import { Box } from '../box'
 
-import type { TooltipStoreState, TooltipStore } from '@ariakit/react'
+import { Box } from '../box'
 
 import styles from './tooltip.module.css'
+
+import type { TooltipStore, TooltipStoreState } from '@ariakit/react'
+import type { FunctionComponentElement, PropsWithChildren, ReactNode } from 'react'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
 const defaultShowTimeout = 500
@@ -21,7 +30,7 @@ type TooltipContextState = {
     hideTimeout: number
 }
 
-const TooltipContext = React.createContext<TooltipContextState>({
+const TooltipContext = createContext<TooltipContextState>({
     showTimeout: defaultShowTimeout,
     hideTimeout: defaultHideTimeout,
 })
@@ -30,11 +39,11 @@ function TooltipProvider({
     showTimeout = defaultShowTimeout,
     hideTimeout = defaultHideTimeout,
     children,
-}: React.PropsWithChildren<{
+}: PropsWithChildren<{
     showTimeout?: number
     hideTimeout?: number
 }>) {
-    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])
+    const value = useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])
     return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>
 }
 
@@ -44,7 +53,7 @@ interface TooltipProps extends ObfuscatedClassName {
      *
      * It should be an interactive element accessible both via mouse and keyboard interactions.
      */
-    children: React.ReactNode
+    children: ReactNode
 
     /**
      * The content to show in the tooltip.
@@ -61,7 +70,7 @@ interface TooltipProps extends ObfuscatedClassName {
      * that the tooltip content will be read by assistive technologies such as screen readers. It
      * will likely read this content right after reading the trigger element label.
      */
-    content: React.ReactNode | (() => React.ReactNode)
+    content: ReactNode | (() => ReactNode)
 
     /**
      * How to place the tooltip relative to its trigger element.
@@ -107,7 +116,7 @@ interface TooltipProps extends ObfuscatedClassName {
     hideTimeout?: number
 }
 
-const Tooltip = React.forwardRef<TooltipStore, TooltipProps>(
+const Tooltip = forwardRef<TooltipStore, TooltipProps>(
     (
         {
             children,
@@ -121,9 +130,8 @@ const Tooltip = React.forwardRef<TooltipStore, TooltipProps>(
         },
         ref,
     ) => {
-        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } = React.useContext(
-            TooltipContext,
-        )
+        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } =
+            useContext(TooltipContext)
 
         const tooltip = useTooltipStore({
             placement: position,
@@ -131,12 +139,12 @@ const Tooltip = React.forwardRef<TooltipStore, TooltipProps>(
             hideTimeout: hideTimeout ?? globalHideTimeout,
         })
 
-        React.useImperativeHandle(ref, () => tooltip, [tooltip])
+        useImperativeHandle(ref, () => tooltip, [tooltip])
 
         const isOpen = tooltip.useState('open')
 
-        const child = React.Children.only(
-            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,
+        const child = Children.only(
+            children as FunctionComponentElement<JSX.IntrinsicElements['div']> | null,
         )
 
         if (!child) {
diff --git a/src/utils/common-helpers.ts b/src/utils/common-helpers.ts
index 09bb91a95..8cd1a1a8e 100644
--- a/src/utils/common-helpers.ts
+++ b/src/utils/common-helpers.ts
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useRef } from 'react'
 
 let uid = 0
 function uniqueId() {
@@ -10,10 +10,15 @@ export function generateElementId(prefix: string): string {
     return `${prefix}-${num}`
 }
 
+/**
+ * @deprecated Use `useId` available from React 18 or above instead.
+ */
 export function useId(providedId?: string): string {
-    const ref = React.useRef<string | null>(providedId ?? null)
+    const ref = useRef<string | null>(providedId ?? null)
+    // eslint-disable-next-line react-hooks/refs
     if (!ref.current) {
         ref.current = generateElementId('element')
     }
+    // eslint-disable-next-line react-hooks/refs
     return ref.current
 }
diff --git a/src/utils/common-types.ts b/src/utils/common-types.ts
index da26e98f4..11ee21b1d 100644
--- a/src/utils/common-types.ts
+++ b/src/utils/common-types.ts
@@ -24,8 +24,8 @@ type ClassValue = Parameters<typeof classNames>[number]
 export type WithEnhancedClassName<T = unknown> = T extends HTMLElement
     ? Omit<HTMLAttributes<T>, 'className'> & { className?: ClassValue }
     : T extends { className?: unknown }
-    ? Omit<T, 'className'> & { className?: ClassValue }
-    : T & { className?: ClassValue }
+      ? Omit<T, 'className'> & { className?: ClassValue }
+      : T & { className?: ClassValue }
 
 export interface OpenInNewTab {
     openInNewTab?: boolean
diff --git a/src/utils/polymorphism.ts b/src/utils/polymorphism.ts
index e3957f0a6..9b5c5fa6c 100644
--- a/src/utils/polymorphism.ts
+++ b/src/utils/polymorphism.ts
@@ -1,6 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import * as React from 'react'
+import { forwardRef } from 'react'
+
+import type {
+    ComponentProps,
+    ElementType,
+    MutableRefObject,
+    ReactElement,
+    WeakValidationMap,
+} from 'react'
 import type { ObfuscatedClassName } from './common-types'
 
 type Merge<P1, P2> = Omit<P1, keyof P2> & P2
@@ -24,18 +32,18 @@ type ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClas
  */
 type WithObfuscatedClassName<
     Props,
-    ShouldObfuscateClassName extends ObfuscateClassNameMode
+    ShouldObfuscateClassName extends ObfuscateClassNameMode,
 > = 'className' extends keyof Props
     ? ShouldObfuscateClassName extends 'obfuscateClassName'
         ? Omit<Props, 'className'> & ObfuscatedClassName
         : ShouldObfuscateClassName extends 'omitClassName'
-        ? Omit<Props, 'className'>
-        : ShouldObfuscateClassName extends 'keepClassName'
-        ? Props
-        : never
+          ? Omit<Props, 'className'>
+          : ShouldObfuscateClassName extends 'keepClassName'
+            ? Props
+            : never
     : Props
 
-type PolymorphicProp<ComponentType extends React.ElementType> = {
+type PolymorphicProp<ComponentType extends ElementType> = {
     /**
      * Used to instruct this component what React element to render as. It can be both a string
      * representing a HTML tag name, or a React component.
@@ -74,11 +82,11 @@ type PolymorphicProp<ComponentType extends React.ElementType> = {
  * @see WithObfuscatedClassName
  */
 type PolymorphicComponentProps<
-    ComponentType extends React.ElementType,
+    ComponentType extends ElementType,
     OwnProps,
-    ShouldObfuscateClassName extends ObfuscateClassNameMode
+    ShouldObfuscateClassName extends ObfuscateClassNameMode,
 > = Merge<
-    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,
+    WithObfuscatedClassName<ComponentProps<ComponentType>, ShouldObfuscateClassName>,
     OwnProps & PolymorphicProp<ComponentType>
 >
 
@@ -87,29 +95,28 @@ type ElementTagNameMap = HTMLElementTagNameMap &
 
 type ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]
 
-type ElementByTagOrAny<
-    ComponentType extends React.ElementType
-> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any
+type ElementByTagOrAny<ComponentType extends ElementType> =
+    ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any
 
 /**
- * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via
+ * The function passed to forwardRef, but typed in a way that's prepared for polymorphism via
  * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.
  *
  * @see PolymorphicComponentProps
  * @see WithObfuscatedClassName
  */
 interface ForwardRefFunction<
-    ComponentType extends React.ElementType,
+    ComponentType extends ElementType,
     OwnProps,
-    ShouldObfuscateClassName extends ObfuscateClassNameMode
+    ShouldObfuscateClassName extends ObfuscateClassNameMode,
 > {
     (
         props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,
         ref:
             | ((instance: ElementByTagOrAny<ComponentType> | null) => void)
-            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>
+            | MutableRefObject<ElementByTagOrAny<ComponentType> | null>
             | null,
-    ): React.ReactElement | null
+    ): ReactElement | null
     displayName?: string
 }
 
@@ -161,36 +168,36 @@ interface ForwardRefFunction<
  * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 interface PolymorphicComponent<
-    ComponentType extends React.ElementType,
+    ComponentType extends ElementType,
     OwnProps,
-    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'
+    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',
 > {
-    <TT extends React.ElementType = ComponentType>(
+    <TT extends ElementType = ComponentType>(
         props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,
-    ): React.ReactElement | null
+    ): ReactElement | null
     readonly $$typeof: symbol
     defaultProps?: Partial<
         PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>
     >
-    propTypes?: React.WeakValidationMap<
+    propTypes?: WeakValidationMap<
         PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>
     >
     displayName?: string
 }
 
 /**
- * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
- * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
+ * A wrapper to use forwardRef with polymorphic components in a type-safe manner. This is a
+ * convenience over merely using forwardRef directly, and then manually forcing the resulting
  * value to be typed using `as PolymorphicComponent<…>`.
  *
  * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)
  */
 function polymorphicComponent<
-    ComponentType extends React.ElementType = 'div',
+    ComponentType extends ElementType = 'div',
     OwnProps = EmptyObject,
-    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'
+    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',
 >(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {
-    return React.forwardRef(render) as PolymorphicComponent<
+    return forwardRef(render) as PolymorphicComponent<
         ComponentType,
         OwnProps,
         ShouldObfuscateClassName
diff --git a/src/utils/responsive-props.ts b/src/utils/responsive-props.ts
index 39ea31e11..6584c21a4 100644
--- a/src/utils/responsive-props.ts
+++ b/src/utils/responsive-props.ts
@@ -89,5 +89,5 @@ function mapResponsiveProp<From extends Atom, To extends Atom>(
     }
 }
 
-export type { ResponsiveProp, ResponsiveBreakpoints }
+export type { ResponsiveBreakpoints, ResponsiveProp }
 export { getClassNames, mapResponsiveProp }
diff --git a/src/utils/storybook-helper.tsx b/src/utils/storybook-helper.tsx
index a5d11bc78..d59fc8300 100644
--- a/src/utils/storybook-helper.tsx
+++ b/src/utils/storybook-helper.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
+import '../styles/design-tokens.css'
+
 import { Box } from '../box'
 import { Heading } from '../heading'
 import { Stack } from '../stack'
 
-import '../styles/design-tokens.css'
-
+import type { ComponentProps, CSSProperties, JSXElementConstructor, ReactNode } from 'react'
 import type { BoxProps } from '../box'
 import type { Space } from './common-types'
 
@@ -94,8 +94,8 @@ function Wrapper({
     children,
     border = false,
 }: {
-    title?: React.ReactNode
-    children: React.ReactNode
+    title?: ReactNode
+    children: ReactNode
     border?: boolean
 }) {
     return (
@@ -128,7 +128,7 @@ function Placeholder({
     label,
     width = '100%',
     height = '30px',
-}: { label?: React.ReactNode } & Pick<React.CSSProperties, 'width' | 'height'>) {
+}: { label?: ReactNode } & Pick<CSSProperties, 'width' | 'height'>) {
     return (
         <Box
             style={{
@@ -147,22 +147,22 @@ function Placeholder({
 }
 
 type PartialProps<
-    // Parent type of T is the same as React.ComponentProps<T>
+    // Parent type of T is the same as ComponentProps<T>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
-> = Partial<React.ComponentProps<T>>
+    T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+> = Partial<ComponentProps<T>>
 
 export {
+    disableResponsiveProps,
+    Placeholder,
+    ResponsiveWidthRef,
+    reusableBoxProps,
     select,
-    selectWithNone,
-    selectSize,
     selectCount,
+    selectSize,
+    selectWithNone,
     times,
-    reusableBoxProps,
-    disableResponsiveProps,
     Wrapper,
-    ResponsiveWidthRef,
-    Placeholder,
 }
 
 export type { PartialProps }
diff --git a/src/utils/test-helpers.tsx b/src/utils/test-helpers.tsx
index 753fa04d8..90aaf1d1a 100644
--- a/src/utils/test-helpers.tsx
+++ b/src/utils/test-helpers.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable jest/no-export */
 /* eslint-disable jest/valid-title */
-import * as React from 'react'
 import { act, render, screen } from '@testing-library/react'
-import type { ResponsiveProp } from './responsive-props'
+
+import type { ComponentType } from 'react'
 import type { Space } from './common-types'
+import type { ResponsiveProp } from './responsive-props'
 
 type PropsWithSpace = { space?: ResponsiveProp<Space>; 'data-testid'?: string }
 
@@ -14,7 +15,7 @@ function getSpaceClassNames(element: HTMLElement) {
     return Array.from(element.classList).filter((className) => className.includes('gap-'))
 }
 
-function runSpaceTests<Props extends PropsWithSpace>(Component: React.ComponentType<Props>) {
+function runSpaceTests<Props extends PropsWithSpace>(Component: ComponentType<Props>) {
     function renderTestCase(space: ResponsiveProp<Space>) {
         // @ts-expect-error not sure how to properly type the Component argument above
         render(<Component data-testid="subject" space={space} />)
@@ -73,4 +74,4 @@ function TestIcon() {
     )
 }
 
-export { runSpaceTests, flushMicrotasks, TestIcon }
+export { flushMicrotasks, runSpaceTests, TestIcon }
diff --git a/stories/components/Avatar.stories.tsx b/stories/components/Avatar.stories.tsx
index 6dfc8387a..fa288b23b 100644
--- a/stories/components/Avatar.stories.tsx
+++ b/stories/components/Avatar.stories.tsx
@@ -1,6 +1,5 @@
 import './styles/avatar_story.less'
 
-import * as React from 'react'
 import { withKnobs } from '@storybook/addon-knobs'
 
 import { Avatar, Box, Inline } from '../../src'
diff --git a/stories/components/ColorPicker.stories.tsx b/stories/components/ColorPicker.stories.tsx
index 944c6381b..1067bc28e 100644
--- a/stories/components/ColorPicker.stories.tsx
+++ b/stories/components/ColorPicker.stories.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 
 import ColorPicker from '../../src/components/color-picker'
 
@@ -15,7 +15,7 @@ export default {
 // Story Definitions ==========================================================
 
 export function ColorPickersStory() {
-    const [color, setColor] = React.useState<number>(0)
+    const [color, setColor] = useState<number>(0)
 
     return (
         <section className="story">
@@ -26,7 +26,7 @@ export function ColorPickersStory() {
 }
 
 export function CustomColorPickersStory() {
-    const [color, setColor] = React.useState<number>(0)
+    const [color, setColor] = useState<number>(0)
 
     return (
         <section className="story">
@@ -41,7 +41,7 @@ export function CustomColorPickersStory() {
 }
 
 export function NamedColorPickersStory() {
-    const [color, setColor] = React.useState<number>(0)
+    const [color, setColor] = useState<number>(0)
 
     return (
         <section className="story">
@@ -62,7 +62,7 @@ export function NamedColorPickersStory() {
 }
 
 export function SmallColorPickerStory() {
-    const [color, setColor] = React.useState<number>(0)
+    const [color, setColor] = useState<number>(0)
 
     return (
         <section className="story">
diff --git a/stories/components/Dropdown.stories.tsx b/stories/components/Dropdown.stories.tsx
index 70040de42..e655e3493 100644
--- a/stories/components/Dropdown.stories.tsx
+++ b/stories/components/Dropdown.stories.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react'
+import LinkTo from '@storybook/addon-links/react'
 
+import { Banner } from '../../src/banner'
 import Button from '../../src/components/deprecated-button'
 import Dropdown from '../../src/components/deprecated-dropdown'
-import { Banner } from '../../src/banner'
 import { Stack } from '../../src/stack'
-import LinkTo from '@storybook/addon-links/react'
 
 export default {
     title: 'Components/Dropdown',
diff --git a/stories/components/Input.stories.tsx b/stories/components/Input.stories.tsx
index 2964450df..2ee93d766 100644
--- a/stories/components/Input.stories.tsx
+++ b/stories/components/Input.stories.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
-
-import Input from '../../src/components/deprecated-input'
-import { Banner } from '../../src/banner'
 import './styles/input_story.less'
+
 import LinkTo from '@storybook/addon-links/react'
 
+import { Banner } from '../../src/banner'
+import Input from '../../src/components/deprecated-input'
+
 // Story setup ================================================================
 
 export default {
diff --git a/stories/components/KeyCapturer.stories.mdx b/stories/components/KeyCapturer.stories.mdx
index 14e5eddd4..429b6e589 100644
--- a/stories/components/KeyCapturer.stories.mdx
+++ b/stories/components/KeyCapturer.stories.mdx
@@ -1,10 +1,11 @@
 import { Story, Meta } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
 
-<Meta title="Components/KeyCapturer" />
+import KeyCapturer from '../../src/components/key-capturer'
 
-# Component Documentation
+<Meta title="Components/KeyCapturer" />
 
-## Documentation
+# KeyCapturer
 
 Use this component to wrap anything you want to handle key events for (e.g. an input).
 
@@ -25,3 +26,44 @@ Example of an **`<input>`** handling normal keystrokes by acting on **onChange**
     <input value={ value } onChange={ this._handleChange } />
 </KeyCapturer>
 ```
+
+## Example
+
+The `actions` tab will log each key event as it is captured from the `<input>` element:
+
+<Canvas>
+    <Story
+        name="Playground"
+        parameters={{
+            docs: { source: { type: 'code' } },
+        }}
+    >
+        <KeyCapturerStory />
+    </Story>
+</Canvas>
+
+export const KeyCapturerStory = () => (
+    <section className="story">
+        <Stack as="section" exceptionallySetClassName="story" space="large">
+            <KeyCapturer
+                eventName="onKeyDown"
+                onArrowUp={action('Up')}
+                onArrowDown={action('Down')}
+                onArrowLeft={action('Left')}
+                onArrowRight={action('Right')}
+                onEnter={action('Enter')}
+                onBackspace={action('Backspace')}
+                onEscape={action('Escape')}
+                propagateArrowUp
+                propagateArrowDown
+                propagateArrowLeft
+                propagateArrowRight
+                propagateEnter
+                propagateBackspace
+                propagateEscape
+            >
+                <input type="text" />
+            </KeyCapturer>
+        </Stack>
+    </section>
+)
diff --git a/stories/components/KeyboardShortcut.stories.tsx b/stories/components/KeyboardShortcut.stories.tsx
index 1a040a9f9..8e54ade9c 100644
--- a/stories/components/KeyboardShortcut.stories.tsx
+++ b/stories/components/KeyboardShortcut.stories.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
+import '../../src/components/keyboard-shortcut/keyboard-shortcut.less'
+
 import { text } from '@storybook/addon-knobs'
 
-import '../../src/components/keyboard-shortcut/keyboard-shortcut.less'
 import KeyboardShortcut from '../../src/components/keyboard-shortcut'
 
 // Story setup ================================================================
diff --git a/stories/components/ProgressBar.stories.tsx b/stories/components/ProgressBar.stories.tsx
index 3afdb9814..01a95409c 100644
--- a/stories/components/ProgressBar.stories.tsx
+++ b/stories/components/ProgressBar.stories.tsx
@@ -1,9 +1,7 @@
 import './styles/progressbar_story.less'
 
-import * as React from 'react'
-
-import ProgressBar from '../../src/components/progress-bar'
 import { Box } from '../../src/box'
+import ProgressBar from '../../src/components/progress-bar'
 
 // Story setup ================================================================
 export default {
diff --git a/stories/components/Select.stories.tsx b/stories/components/Select.stories.tsx
index b552fc4f0..ec494c329 100644
--- a/stories/components/Select.stories.tsx
+++ b/stories/components/Select.stories.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
+import { useState } from 'react'
+
+import LinkTo from '@storybook/addon-links/react'
 
-import Select from '../../src/components/deprecated-select'
 import { Banner } from '../../src/banner'
+import Select from '../../src/components/deprecated-select'
 import { Stack } from '../../src/stack'
-import LinkTo from '@storybook/addon-links/react'
 
 const options = [
     { value: 'intro', text: 'Select a fruit', disabled: true },
@@ -27,7 +28,7 @@ export default {
 // Story Definitions ==========================================================
 
 export function SelectStory() {
-    const [value, setValue] = React.useState<string>(options[0].value)
+    const [value, setValue] = useState<string>(options[0].value)
 
     return (
         <Stack as="section" exceptionallySetClassName="story" space="large">
@@ -47,7 +48,7 @@ export function SelectStory() {
 }
 
 export function SelectPlaygroundStory(args) {
-    const [value, setValue] = React.useState<string>(options[0].value)
+    const [value, setValue] = useState<string>(options[0].value)
 
     return (
         <section className="story">
diff --git a/stories/components/Time.stories.tsx b/stories/components/Time.stories.tsx
index 4b564a113..a99e7f90f 100644
--- a/stories/components/Time.stories.tsx
+++ b/stories/components/Time.stories.tsx
@@ -1,6 +1,5 @@
 import './styles/time_story.less'
 
-import * as React from 'react'
 import dayjs from 'dayjs'
 
 import Time from '../../src/components/time'
diff --git a/stories/components/color.stories.tsx b/stories/components/color.stories.tsx
index 0acc2e317..544369b07 100644
--- a/stories/components/color.stories.tsx
+++ b/stories/components/color.stories.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react'
+import './styles/color-story.less'
 
-import { Columns, Column } from '../../src/columns'
-import { Stack } from '../../src/stack'
-import { Heading } from '../../src/heading'
 import { Box } from '../../src/box'
-import './styles/color-story.less'
+import { Column, Columns } from '../../src/columns'
+import { Heading } from '../../src/heading'
+import { Stack } from '../../src/stack'
 
 export default {
     title: 'Design tokens/Colors',
diff --git a/stories/tsconfig.json b/stories/tsconfig.json
new file mode 100644
index 000000000..fd5da3263
--- /dev/null
+++ b/stories/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["**/*"],
+    "compilerOptions": {
+        "rootDir": "../",
+        "strict": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitAny": true
+    },
+    "exclude": ["../node_modules", "../dist"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 6a429a33e..8ed05bee1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,10 +17,10 @@
             "@": ["./"],
             "*": ["src/*", "node_modules/*"]
         },
-        "jsx": "react",
+        "jsx": "react-jsx",
         "esModuleInterop": true,
         "skipLibCheck": true,
         "noEmit": true
     },
-    "exclude": ["node_modules", "dist"]
+    "exclude": ["node_modules", "dist", "stories"]
 }
diff --git a/tsconfig.stories.json b/tsconfig.stories.json
deleted file mode 100644
index 8a89a8955..000000000
--- a/tsconfig.stories.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-    "include": ["stories"],
-    "compilerOptions": {
-        "allowJs": true,
-        "module": "esnext",
-        "lib": ["dom", "esnext"],
-        "importHelpers": true,
-        "declaration": true,
-        "sourceMap": true,
-        "rootDir": "src",
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitAny": true,
-        "moduleResolution": "node",
-        "baseUrl": "./",
-        "paths": {
-            "@": ["./"],
-            "*": ["src/*", "node_modules/*"]
-        },
-        "jsx": "react",
-        "esModuleInterop": true
-    },
-    "exclude": ["node_modules", "dist"]
-}