diff --git a/documentation-site/components/documentation-layout/documentation-layout.tsx b/documentation-site/components/documentation-layout/documentation-layout.tsx
index 06f5b02..e6de05c 100644
--- a/documentation-site/components/documentation-layout/documentation-layout.tsx
+++ b/documentation-site/components/documentation-layout/documentation-layout.tsx
@@ -39,6 +39,7 @@ export function DocumentationLayout({ children }) {
   return (
     <Layout>
       <Grid {...sharedProps}>
+       {/* @ts-ignore */}
         <AnimatePresence>
           {mobileMenu && <Overlay {...sharedProps} {...motionProps} />}
           {select && <OverlayLight {...sharedProps} {...motionProps} />}
diff --git a/package.json b/package.json
index 60c8f62..d042639 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@microsoft/tsdoc": "^0.12.21",
     "@next/mdx": "^9.5.3",
     "@types/node": "^10.11.0",
-    "@types/react": "^16.9.43",
+    "@types/react": "^18.2.25",
     "@types/styletron-engine-atomic": "^1.1.0",
     "@types/styletron-react": "^5.0.2",
     "@types/styletron-standard": "^2.0.0",
@@ -71,8 +71,8 @@
     "prism-react-renderer": "^1.1.1",
     "prompt": "^1.0.0",
     "raw-loader": "^4.0.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-shadow-picker": "^1.0.5",
     "react-view": "^2.3.2",
     "recoil": "^0.0.13",
@@ -92,7 +92,7 @@
     "styletron-react": "^5.2.7",
     "ts-node": "^7.0.1",
     "tslib": "^2.6.2",
-    "typescript": "^4.0.2"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "framer-motion": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f4e0bc..abb0406 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 dependencies:
   react-hook-form:
     specifier: ^6.3.0
-    version: 6.3.0(react@16.13.1)
+    version: 6.3.0(react@18.2.0)
   react-is:
     specifier: ^16.13.1
     version: 16.13.1
@@ -21,7 +21,7 @@ devDependencies:
     version: 0.0.32
   '@mdx-js/loader':
     specifier: ^1.6.18
-    version: 1.6.18(react@16.13.1)
+    version: 1.6.18(react@18.2.0)
   '@microsoft/tsdoc':
     specifier: ^0.12.21
     version: 0.12.21
@@ -32,8 +32,8 @@ devDependencies:
     specifier: ^10.11.0
     version: 10.11.0
   '@types/react':
-    specifier: ^16.9.43
-    version: 16.9.43
+    specifier: ^18.2.25
+    version: 18.2.25
   '@types/styletron-engine-atomic':
     specifier: ^1.1.0
     version: 1.1.0
@@ -45,10 +45,10 @@ devDependencies:
     version: 2.0.0
   '@typescript-eslint/eslint-plugin':
     specifier: ^4.1.0
-    version: 4.1.0(@typescript-eslint/parser@4.1.0)(eslint@7.8.1)(typescript@4.0.2)
+    version: 4.1.0(@typescript-eslint/parser@4.1.0)(eslint@7.8.1)(typescript@5.2.2)
   '@typescript-eslint/parser':
     specifier: ^4.1.0
-    version: 4.1.0(eslint@7.8.1)(typescript@4.0.2)
+    version: 4.1.0(eslint@7.8.1)(typescript@5.2.2)
   copy-to-clipboard:
     specifier: ^3.3.1
     version: 3.3.1
@@ -72,7 +72,7 @@ devDependencies:
     version: 7.20.6(eslint@7.8.1)
   framer-motion:
     specifier: 4.1.11
-    version: 4.1.11(react-dom@16.13.1)(react@16.13.1)
+    version: 4.1.11(react-dom@18.2.0)(react@18.2.0)
   husky:
     specifier: ^1.0.1
     version: 1.0.1
@@ -84,10 +84,10 @@ devDependencies:
     version: 4.3.0
   next:
     specifier: 9.5.3
-    version: 9.5.3(react-dom@16.13.1)(react@16.13.1)(typescript@4.0.2)
+    version: 9.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)
   next-seo:
     specifier: ^4.11.0
-    version: 4.11.0(next@9.5.3)(react-dom@16.13.1)(react@16.13.1)
+    version: 4.11.0(next@9.5.3)(react-dom@18.2.0)(react@18.2.0)
   next-transpile-modules:
     specifier: ^4.1.0
     version: 4.1.0
@@ -96,7 +96,7 @@ devDependencies:
     version: 2.1.1
   prism-react-renderer:
     specifier: ^1.1.1
-    version: 1.1.1(react@16.13.1)
+    version: 1.1.1(react@18.2.0)
   prompt:
     specifier: ^1.0.0
     version: 1.0.0
@@ -104,20 +104,20 @@ devDependencies:
     specifier: ^4.0.1
     version: 4.0.1(webpack@5.88.2)
   react:
-    specifier: ^16.13.1
-    version: 16.13.1
+    specifier: ^18.2.0
+    version: 18.2.0
   react-dom:
-    specifier: ^16.13.1
-    version: 16.13.1(react@16.13.1)
+    specifier: ^18.2.0
+    version: 18.2.0(react@18.2.0)
   react-shadow-picker:
     specifier: ^1.0.5
-    version: 1.0.5(@babel/core@7.23.0)(react-dom@16.13.1)(react-is@16.13.1)(react@16.13.1)
+    version: 1.0.5(@babel/core@7.23.0)(react-dom@18.2.0)(react-is@16.13.1)(react@18.2.0)
   react-view:
     specifier: ^2.3.2
-    version: 2.3.2(@angular/compiler@7.2.16)(react-dom@16.13.1)(react@16.13.1)(remark-parse@5.0.0)(yaml@1.10.2)
+    version: 2.3.2(@angular/compiler@7.2.16)(react-dom@18.2.0)(react@18.2.0)(remark-parse@5.0.0)(yaml@1.10.2)
   recoil:
     specifier: ^0.0.13
-    version: 0.0.13(react-dom@16.13.1)(react@16.13.1)
+    version: 0.0.13(react-dom@18.2.0)(react@18.2.0)
   remark:
     specifier: ^12.0.0
     version: 12.0.0
@@ -147,7 +147,7 @@ devDependencies:
     version: 0.4.2(rollup@4.0.2)
   rollup-plugin-typescript2:
     specifier: ^0.36.0
-    version: 0.36.0(rollup@4.0.2)(typescript@4.0.2)
+    version: 0.36.0(rollup@4.0.2)(typescript@5.2.2)
   rollup-plugin-visualizer:
     specifier: ^4.1.1
     version: 4.1.1(rollup@4.0.2)
@@ -159,7 +159,7 @@ devDependencies:
     version: 1.4.6
   styletron-react:
     specifier: ^5.2.7
-    version: 5.2.7(react@16.13.1)
+    version: 5.2.7(react@18.2.0)
   ts-node:
     specifier: ^7.0.1
     version: 7.0.1
@@ -167,8 +167,8 @@ devDependencies:
     specifier: ^2.6.2
     version: 2.6.2
   typescript:
-    specifier: ^4.0.2
-    version: 4.0.2
+    specifier: ^5.2.2
+    version: 5.2.2
 
 packages:
 
@@ -1792,11 +1792,11 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@mdx-js/loader@1.6.18(react@16.13.1):
+  /@mdx-js/loader@1.6.18(react@18.2.0):
     resolution: {integrity: sha512-mCIt3dFc4p7y3ZqVda07grZDWgMcwSePT3k9vQfgfUcGWLeTFhp46fTbzagXVR/izldFSBLVYkouuH2PaI7Ecw==}
     dependencies:
       '@mdx-js/mdx': 1.6.18
-      '@mdx-js/react': 1.6.18(react@16.13.1)
+      '@mdx-js/react': 1.6.18(react@18.2.0)
       loader-utils: 2.0.0
     transitivePeerDependencies:
       - react
@@ -1829,12 +1829,12 @@ packages:
       - supports-color
     dev: true
 
-  /@mdx-js/react@1.6.18(react@16.13.1):
+  /@mdx-js/react@1.6.18(react@18.2.0):
     resolution: {integrity: sha512-aFHsZVu7r9WamlP+WO/lyvHHZAubkQjkcRYlvS7fQElypfJvjKdHevjC3xiqlsQpasx/4KqRMoEIb++wNtd+6w==}
     peerDependencies:
       react: ^16.13.1
     dependencies:
-      react: 16.13.1
+      react: 18.2.0
     dev: true
 
   /@mdx-js/util@1.6.18:
@@ -1903,15 +1903,15 @@ packages:
       - yaml
     dev: true
 
-  /@miksu/react-tiny-popover@3.5.1(react-dom@16.13.1)(react@16.13.1):
+  /@miksu/react-tiny-popover@3.5.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-YSpc7wznyAzQdkQhrLwRNTvLX96swskKvWTNGkilFB2MyC6E0xMem4EtX93DYXHK0vslhpYMtqbjcAWQcLhZeQ==}
     peerDependencies:
       react: ^15.6.1 || ^16.0.0
       react-dom: ^15.6.1 || ^16.0.0
     dependencies:
       '@types/underscore': 1.11.10
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       underscore: 1.13.6
     dev: true
 
@@ -1920,10 +1920,10 @@ packages:
     peerDependencies:
       '@mdx-js/loader': '>=0.15.0'
     dependencies:
-      '@mdx-js/loader': 1.6.18(react@16.13.1)
+      '@mdx-js/loader': 1.6.18(react@18.2.0)
     dev: true
 
-  /@next/react-dev-overlay@9.5.3(react-dom@16.13.1)(react@16.13.1)(webpack@4.44.1):
+  /@next/react-dev-overlay@9.5.3(react-dom@18.2.0)(react@18.2.0)(webpack@4.44.1):
     resolution: {integrity: sha512-R2ZAyFjHHaMTBVi19ZZNRJNXiwn46paRi7EZvKNvMxbrzBcUYtSFj/edU3jQoF1UOcC6vGeMhtPqH55ONrIjCQ==}
     peerDependencies:
       react: ^16.9.0
@@ -1936,8 +1936,8 @@ packages:
       chalk: 4.0.0
       classnames: 2.2.6
       data-uri-to-buffer: 3.0.0
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       shell-quote: 1.7.2
       source-map: 0.8.0-beta.0
       stacktrace-parser: 0.1.10
@@ -2138,11 +2138,16 @@ packages:
     resolution: {integrity: sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==}
     dev: true
 
-  /@types/react@16.9.43:
-    resolution: {integrity: sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg==}
+  /@types/react@18.2.25:
+    resolution: {integrity: sha512-24xqse6+VByVLIr+xWaQ9muX1B4bXJKXBbjszbld/UEDslGLY53+ZucF44HCmLbMPejTzGG9XgR+3m2/Wqu1kw==}
     dependencies:
       '@types/prop-types': 15.7.8
-      csstype: 2.6.21
+      '@types/scheduler': 0.16.4
+      csstype: 3.1.2
+    dev: true
+
+  /@types/scheduler@0.16.4:
+    resolution: {integrity: sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==}
     dev: true
 
   /@types/styletron-engine-atomic@1.1.0:
@@ -2154,7 +2159,7 @@ packages:
   /@types/styletron-react@5.0.2:
     resolution: {integrity: sha512-jONPyzz9MRuCB71QYpkRQx4nsjGxLS/GNmudHXs8aeTj8yRHgO9wsXhUAL5uZ8LOENWUN2Gcqh/vNvlbRpfcUA==}
     dependencies:
-      '@types/react': 16.9.43
+      '@types/react': 18.2.25
       '@types/styletron-standard': 2.0.0
     dev: true
 
@@ -2172,7 +2177,7 @@ packages:
     resolution: {integrity: sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@4.1.0(@typescript-eslint/parser@4.1.0)(eslint@7.8.1)(typescript@4.0.2):
+  /@typescript-eslint/eslint-plugin@4.1.0(@typescript-eslint/parser@4.1.0)(eslint@7.8.1)(typescript@5.2.2):
     resolution: {integrity: sha512-U+nRJx8XDUqJxYF0FCXbpmD9nWt/xHDDG0zsw1vrVYAmEAuD/r49iowfurjSL2uTA2JsgtpsyG7mjO7PHf2dYw==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
@@ -2183,21 +2188,21 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/experimental-utils': 4.1.0(eslint@7.8.1)(typescript@4.0.2)
-      '@typescript-eslint/parser': 4.1.0(eslint@7.8.1)(typescript@4.0.2)
+      '@typescript-eslint/experimental-utils': 4.1.0(eslint@7.8.1)(typescript@5.2.2)
+      '@typescript-eslint/parser': 4.1.0(eslint@7.8.1)(typescript@5.2.2)
       '@typescript-eslint/scope-manager': 4.1.0
       debug: 4.3.4(supports-color@5.5.0)
       eslint: 7.8.1
       functional-red-black-tree: 1.0.1
       regexpp: 3.2.0
       semver: 7.5.4
-      tsutils: 3.21.0(typescript@4.0.2)
-      typescript: 4.0.2
+      tsutils: 3.21.0(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/experimental-utils@4.1.0(eslint@7.8.1)(typescript@4.0.2):
+  /@typescript-eslint/experimental-utils@4.1.0(eslint@7.8.1)(typescript@5.2.2):
     resolution: {integrity: sha512-paEYLA37iqRIDPeQwAmoYSiZ3PiHsaAc3igFeBTeqRHgPnHjHLJ9OGdmP6nwAkF65p2QzEsEBtpjNUBWByNWzA==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
@@ -2206,7 +2211,7 @@ packages:
       '@types/json-schema': 7.0.13
       '@typescript-eslint/scope-manager': 4.1.0
       '@typescript-eslint/types': 4.1.0
-      '@typescript-eslint/typescript-estree': 4.1.0(typescript@4.0.2)
+      '@typescript-eslint/typescript-estree': 4.1.0(typescript@5.2.2)
       eslint: 7.8.1
       eslint-scope: 5.1.1
       eslint-utils: 2.1.0
@@ -2215,7 +2220,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/parser@4.1.0(eslint@7.8.1)(typescript@4.0.2):
+  /@typescript-eslint/parser@4.1.0(eslint@7.8.1)(typescript@5.2.2):
     resolution: {integrity: sha512-hM/WNCQTzDHgS0Ke3cR9zPndL3OTKr9OoN9CL3UqulsAjYDrglSwIIgswSmHBcSbOzLmgaMARwrQEbIumIglvQ==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
@@ -2227,10 +2232,10 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 4.1.0
       '@typescript-eslint/types': 4.1.0
-      '@typescript-eslint/typescript-estree': 4.1.0(typescript@4.0.2)
+      '@typescript-eslint/typescript-estree': 4.1.0(typescript@5.2.2)
       debug: 4.3.4(supports-color@5.5.0)
       eslint: 7.8.1
-      typescript: 4.0.2
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2256,7 +2261,7 @@ packages:
       semver: 5.5.0
     dev: true
 
-  /@typescript-eslint/typescript-estree@4.1.0(typescript@4.0.2):
+  /@typescript-eslint/typescript-estree@4.1.0(typescript@5.2.2):
     resolution: {integrity: sha512-r6et57qqKAWU173nWyw31x7OfgmKfMEcjJl9vlJEzS+kf9uKNRr4AVTRXfTCwebr7bdiVEkfRY5xGnpPaNPe4Q==}
     engines: {node: ^10.12.0 || >=12.0.0}
     peerDependencies:
@@ -2272,8 +2277,8 @@ packages:
       is-glob: 4.0.3
       lodash: 4.17.21
       semver: 7.5.4
-      tsutils: 3.21.0(typescript@4.0.2)
-      typescript: 4.0.2
+      tsutils: 3.21.0(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2923,7 +2928,7 @@ packages:
       '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.0)
       lodash: 4.17.21
       picomatch: 2.3.1
-      styled-components: 5.3.11(@babel/core@7.23.0)(react-dom@16.13.1)(react-is@16.13.1)(react@16.13.1)
+      styled-components: 5.3.11(@babel/core@7.23.0)(react-dom@18.2.0)(react-is@16.13.1)(react@18.2.0)
     transitivePeerDependencies:
       - '@babel/core'
     dev: true
@@ -4727,7 +4732,7 @@ packages:
       map-cache: 0.2.2
     dev: true
 
-  /framer-motion@4.1.11(react-dom@16.13.1)(react@16.13.1):
+  /framer-motion@4.1.11(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7N67I8PUNH3OT0RTlNB672k5UiuWg5B17c+9Lc6BjICRo66gKeiq/Hy091lWCqNuSLEO59F9z39zxb3wMg6Tjg==}
     peerDependencies:
       react: '>=16.8 || ^17.0.0'
@@ -4736,8 +4741,8 @@ packages:
       framesync: 5.3.0
       hey-listen: 1.0.8
       popmotion: 9.3.5
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       style-value-types: 4.1.4
       tslib: 2.6.2
     optionalDependencies:
@@ -6507,16 +6512,16 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
-  /next-seo@4.11.0(next@9.5.3)(react-dom@16.13.1)(react@16.13.1):
+  /next-seo@4.11.0(next@9.5.3)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-JrrGA+wD20ArI5jTqbLE2jipmA5VCCcjBlb1ZI2lKktd7lCXNs/IIvwkNfJPPK0vFp/ewwylA6kO5CyX2fflig==}
     peerDependencies:
       next: ^8.1.1-canary.54 || ^9.0.0
       react: ^16.0.0
       react-dom: ^16.0.0
     dependencies:
-      next: 9.5.3(react-dom@16.13.1)(react@16.13.1)(typescript@4.0.2)
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      next: 9.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: true
 
   /next-tick@1.1.0:
@@ -6531,7 +6536,7 @@ packages:
       slash: 3.0.0
     dev: true
 
-  /next@9.5.3(react-dom@16.13.1)(react@16.13.1)(typescript@4.0.2):
+  /next@9.5.3(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2):
     resolution: {integrity: sha512-DGrpTNGV2RNMwLaSzpgbkbaUuVk30X71/roXHS10isSXo2Gm+qWcjonDyOxf1KmOvHZRHA/Fa+LaAR7ysdYS3A==}
     engines: {node: '>=10.13.0'}
     hasBin: true
@@ -6558,7 +6563,7 @@ packages:
       '@babel/preset-typescript': 7.10.4(@babel/core@7.7.7)
       '@babel/runtime': 7.11.2
       '@babel/types': 7.11.5
-      '@next/react-dev-overlay': 9.5.3(react-dom@16.13.1)(react@16.13.1)(webpack@4.44.1)
+      '@next/react-dev-overlay': 9.5.3(react-dom@18.2.0)(react@18.2.0)(webpack@4.44.1)
       '@next/react-refresh-utils': 9.5.3(react-refresh@0.8.3)(webpack@4.44.1)
       ast-types: 0.13.2
       babel-plugin-syntax-jsx: 6.18.0
@@ -6580,12 +6585,12 @@ packages:
       neo-async: 2.6.1
       node-html-parser: 1.4.9
       path-browserify: 1.0.1
-      pnp-webpack-plugin: 1.6.4(typescript@4.0.2)
+      pnp-webpack-plugin: 1.6.4(typescript@5.2.2)
       postcss: 7.0.32
       process: 0.11.10
       prop-types: 15.7.2
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       react-is: 16.13.1
       react-refresh: 0.8.3
       resolve-url-loader: 3.1.1
@@ -6593,8 +6598,8 @@ packages:
       schema-utils: 2.6.6
       stream-browserify: 3.0.0
       style-loader: 1.2.1(webpack@4.44.1)
-      styled-jsx: 3.3.0(react@16.13.1)
-      use-subscription: 1.4.1(react@16.13.1)
+      styled-jsx: 3.3.0(react@18.2.0)
+      use-subscription: 1.4.1(react@18.2.0)
       vm-browserify: 1.1.2
       watchpack: 2.0.0-beta.13
       web-vitals: 0.2.1
@@ -6732,6 +6737,7 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /object-copy@0.1.0:
     resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==}
@@ -7144,11 +7150,11 @@ packages:
       semver-compare: 1.0.0
     dev: true
 
-  /pnp-webpack-plugin@1.6.4(typescript@4.0.2):
+  /pnp-webpack-plugin@1.6.4(typescript@5.2.2):
     resolution: {integrity: sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==}
     engines: {node: '>=6'}
     dependencies:
-      ts-pnp: 1.2.0(typescript@4.0.2)
+      ts-pnp: 1.2.0(typescript@5.2.2)
     transitivePeerDependencies:
       - typescript
     dev: true
@@ -7281,12 +7287,12 @@ packages:
     hasBin: true
     dev: true
 
-  /prism-react-renderer@1.1.1(react@16.13.1):
+  /prism-react-renderer@1.1.1(react@18.2.0):
     resolution: {integrity: sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==}
     peerDependencies:
       react: '>=0.14.9'
     dependencies:
-      react: 16.13.1
+      react: 18.2.0
     dev: true
 
   /process-nextick-args@2.0.1:
@@ -7340,6 +7346,7 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
+    dev: true
 
   /property-information@5.6.0:
     resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
@@ -7450,24 +7457,22 @@ packages:
       webpack: 5.88.2
     dev: true
 
-  /react-dom@16.13.1(react@16.13.1):
-    resolution: {integrity: sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==}
+  /react-dom@18.2.0(react@18.2.0):
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
-      react: ^16.13.1
+      react: ^18.2.0
     dependencies:
       loose-envify: 1.4.0
-      object-assign: 4.1.1
-      prop-types: 15.8.1
-      react: 16.13.1
-      scheduler: 0.19.1
+      react: 18.2.0
+      scheduler: 0.23.0
     dev: true
 
-  /react-hook-form@6.3.0(react@16.13.1):
+  /react-hook-form@6.3.0(react@18.2.0):
     resolution: {integrity: sha512-Xz7xxnILftxttc6H+miTSi2eYPehiW3XdsPaqY5dW8HcURFZPrnpxnmaRqz6JtZcbfRM8qjjppP/pOBaUzhn4w==}
     peerDependencies:
       react: ^16.8.0
     dependencies:
-      react: 16.13.1
+      react: 18.2.0
     dev: false
 
   /react-is@16.13.1:
@@ -7478,30 +7483,30 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /react-shadow-picker@1.0.5(@babel/core@7.23.0)(react-dom@16.13.1)(react-is@16.13.1)(react@16.13.1):
+  /react-shadow-picker@1.0.5(@babel/core@7.23.0)(react-dom@18.2.0)(react-is@16.13.1)(react@18.2.0):
     resolution: {integrity: sha512-jbBFRk7a0RPKJpQVQTeRgsTJEjqCZLcpe0NVqlcTOG1pd6hvucTZm0sDG9Y5MnzyzEuojlHDmJZ4deaOTFptgA==}
     peerDependencies:
       react: ^16.0.0
     dependencies:
-      react: 16.13.1
-      styled-components: 5.3.11(@babel/core@7.23.0)(react-dom@16.13.1)(react-is@16.13.1)(react@16.13.1)
+      react: 18.2.0
+      styled-components: 5.3.11(@babel/core@7.23.0)(react-dom@18.2.0)(react-is@16.13.1)(react@18.2.0)
     transitivePeerDependencies:
       - '@babel/core'
       - react-dom
       - react-is
     dev: true
 
-  /react-simple-code-editor@0.10.0(react-dom@16.13.1)(react@16.13.1):
+  /react-simple-code-editor@0.10.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==}
     peerDependencies:
       react: ^16.0.0
       react-dom: ^16.0.0
     dependencies:
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /react-view@2.3.2(@angular/compiler@7.2.16)(react-dom@16.13.1)(react@16.13.1)(remark-parse@5.0.0)(yaml@1.10.2):
+  /react-view@2.3.2(@angular/compiler@7.2.16)(react-dom@18.2.0)(react@18.2.0)(remark-parse@5.0.0)(yaml@1.10.2):
     resolution: {integrity: sha512-Ty5PUtPZTlDeYJKxsrh6FcMdAXde7n+rQLyrBybKi9gy6ViQKMHTiomy6lB6Vf+B6VkAcSWYL1Q0iv07ILuBWw==}
     dependencies:
       '@babel/code-frame': 7.22.13
@@ -7512,11 +7517,11 @@ packages:
       '@babel/traverse': 7.23.0(supports-color@5.5.0)
       '@babel/types': 7.23.0
       '@miksu/prettier': 1.18.6(@angular/compiler@7.2.16)(remark-parse@5.0.0)(yaml@1.10.2)
-      '@miksu/react-tiny-popover': 3.5.1(react-dom@16.13.1)(react@16.13.1)
+      '@miksu/react-tiny-popover': 3.5.1(react-dom@18.2.0)(react@18.2.0)
       copy-to-clipboard: 3.3.1
       lodash: 4.17.21
-      prism-react-renderer: 1.1.1(react@16.13.1)
-      react-simple-code-editor: 0.10.0(react-dom@16.13.1)(react@16.13.1)
+      prism-react-renderer: 1.1.1(react@18.2.0)
+      react-simple-code-editor: 0.10.0(react-dom@18.2.0)(react@18.2.0)
     transitivePeerDependencies:
       - '@angular/compiler'
       - react
@@ -7526,13 +7531,11 @@ packages:
       - yaml
     dev: true
 
-  /react@16.13.1:
-    resolution: {integrity: sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==}
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
-      object-assign: 4.1.1
-      prop-types: 15.8.1
 
   /read-pkg@4.0.1:
     resolution: {integrity: sha512-+UBirHHDm5J+3WDmLBZYSklRYg82nMlz+enn+GMZ22nSR2f4bzxmhso6rzQW/3mT2PVzpzDTiYIZahk8UmZ44w==}
@@ -7597,14 +7600,14 @@ packages:
       resolve: 1.22.6
     dev: true
 
-  /recoil@0.0.13(react-dom@16.13.1)(react@16.13.1):
+  /recoil@0.0.13(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2OToaQ8GR//KsdKdaEhMi04QKStLGRpk3qjC58iBpZpUtsByZ4dUy2UJtRcYuhnVlltGZ8HNwcEQRdFOS864SQ==}
     peerDependencies:
       react: ^16.13.1
       react-dom: ^16.13.1
     dependencies:
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: true
 
   /regenerate-unicode-properties@10.1.1:
@@ -7984,7 +7987,7 @@ packages:
       source-map-resolve: 0.5.3
     dev: true
 
-  /rollup-plugin-typescript2@0.36.0(rollup@4.0.2)(typescript@4.0.2):
+  /rollup-plugin-typescript2@0.36.0(rollup@4.0.2)(typescript@5.2.2):
     resolution: {integrity: sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==}
     peerDependencies:
       rollup: '>=1.26.3'
@@ -7996,7 +7999,7 @@ packages:
       rollup: 4.0.2
       semver: 7.5.4
       tslib: 2.6.2
-      typescript: 4.0.2
+      typescript: 5.2.2
     dev: true
 
   /rollup-plugin-visualizer@4.1.1(rollup@4.0.2):
@@ -8125,11 +8128,10 @@ packages:
       webpack: 4.44.1
     dev: true
 
-  /scheduler@0.19.1:
-    resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==}
+  /scheduler@0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
       loose-envify: 1.4.0
-      object-assign: 4.1.1
     dev: true
 
   /schema-utils@1.0.0:
@@ -8732,7 +8734,7 @@ packages:
       tslib: 2.6.2
     dev: true
 
-  /styled-components@5.3.11(@babel/core@7.23.0)(react-dom@16.13.1)(react-is@16.13.1)(react@16.13.1):
+  /styled-components@5.3.11(@babel/core@7.23.0)(react-dom@18.2.0)(react-is@16.13.1)(react@18.2.0):
     resolution: {integrity: sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -8748,8 +8750,8 @@ packages:
       babel-plugin-styled-components: 2.1.4(@babel/core@7.23.0)(styled-components@5.3.11)
       css-to-react-native: 3.2.0
       hoist-non-react-statics: 3.3.2
-      react: 16.13.1
-      react-dom: 16.13.1(react@16.13.1)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       react-is: 16.13.1
       shallowequal: 1.1.0
       supports-color: 5.5.0
@@ -8757,7 +8759,7 @@ packages:
       - '@babel/core'
     dev: true
 
-  /styled-jsx@3.3.0(react@16.13.1):
+  /styled-jsx@3.3.0(react@18.2.0):
     resolution: {integrity: sha512-sh8BI5eGKyJlwL4kNXHjb27/a/GJV8wP4ElRIkRXrGW3sHKOsY9Pa1VZRNxyvf3+lisdPwizD9JDkzVO9uGwZw==}
     peerDependencies:
       react: 15.x.x || 16.x.x
@@ -8766,7 +8768,7 @@ packages:
       babel-plugin-syntax-jsx: 6.18.0
       convert-source-map: 1.7.0
       loader-utils: 1.2.3
-      react: 16.13.1
+      react: 18.2.0
       source-map: 0.7.3
       string-hash: 1.1.3
       stylis: 3.5.4
@@ -8780,13 +8782,13 @@ packages:
       styletron-standard: 3.1.0
     dev: true
 
-  /styletron-react@5.2.7(react@16.13.1):
+  /styletron-react@5.2.7(react@18.2.0):
     resolution: {integrity: sha512-PUUf7MAv9aaO8oT0B4ryPreeLi3BT1kQ7WIDNhkkpLkvCzk+pOvmtaZJJZRIxWPimj8756rLZqpF7/2ssF9KhQ==}
     peerDependencies:
       react: ^16.8.0
     dependencies:
       prop-types: 15.8.1
-      react: 16.13.1
+      react: 18.2.0
       styletron-standard: 3.1.0
     dev: true
 
@@ -9053,7 +9055,7 @@ packages:
       yn: 2.0.0
     dev: true
 
-  /ts-pnp@1.2.0(typescript@4.0.2):
+  /ts-pnp@1.2.0(typescript@5.2.2):
     resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==}
     engines: {node: '>=6'}
     peerDependencies:
@@ -9062,7 +9064,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      typescript: 4.0.2
+      typescript: 5.2.2
     dev: true
 
   /tslib@1.14.1:
@@ -9073,14 +9075,14 @@ packages:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: true
 
-  /tsutils@3.21.0(typescript@4.0.2):
+  /tsutils@3.21.0(typescript@5.2.2):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     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'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.0.2
+      typescript: 5.2.2
     dev: true
 
   /tty-browserify@0.0.0:
@@ -9165,9 +9167,9 @@ packages:
     hasBin: true
     dev: true
 
-  /typescript@4.0.2:
-    resolution: {integrity: sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==}
-    engines: {node: '>=4.2.0'}
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
+    engines: {node: '>=14.17'}
     hasBin: true
     dev: true
 
@@ -9409,13 +9411,13 @@ packages:
       qs: 6.11.2
     dev: true
 
-  /use-subscription@1.4.1(react@16.13.1):
+  /use-subscription@1.4.1(react@18.2.0):
     resolution: {integrity: sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ==}
     peerDependencies:
       react: ^16.8.0
     dependencies:
       object-assign: 4.1.1
-      react: 16.13.1
+      react: 18.2.0
     dev: true
 
   /use@3.1.1:
diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx
index b7646db..a97d613 100644
--- a/src/alert/alert.tsx
+++ b/src/alert/alert.tsx
@@ -49,6 +49,7 @@ export const Alert: React.FC<AlertPropsT> = ({
   }
 
   return (
+    // @ts-ignore
     <AnimatePresence>
       {show && (
         <Wrap ref={ref} $style={overrides.Wrap} {...sharedProps} {...motionProps}>
diff --git a/src/block/block.tsx b/src/block/block.tsx
index e8dff67..5659640 100644
--- a/src/block/block.tsx
+++ b/src/block/block.tsx
@@ -172,6 +172,7 @@ export const Block: React.FC<BlockPropsT> = ({
   )
 }
 
+    // @ts-ignore
 const BlockComponent = React.forwardRef<BlockPropsT, HTMLElement>((props: BlockPropsT, ref) => (
   <Block {...props} forwardedRef={ref} />
 ))
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
index 40b97b5..e8ee4e9 100644
--- a/src/drawer/drawer.tsx
+++ b/src/drawer/drawer.tsx
@@ -26,6 +26,7 @@ export const Drawer: React.FC<DrawerPropsT> = ({
   useOnClickRectOutside(ref, onClickOutside)
 
   return (
+    // @ts-ignore
     <AnimatePresence>
       {isOpen && (
         <Wrap ref={ref} $style={overrides.Wrap} {...sharedProps} {...motionProps}>
diff --git a/src/flex-box/flex-box.tsx b/src/flex-box/flex-box.tsx
index 53329e8..50b8110 100644
--- a/src/flex-box/flex-box.tsx
+++ b/src/flex-box/flex-box.tsx
@@ -33,6 +33,7 @@ export const FlexBox: React.FC<FlexBoxPropsT> = ({
             return React.cloneElement(child, {
               ...gapProps,
               key: id,
+              // @ts-ignore
               $id: id,
             })
         })}
diff --git a/src/hooks/use-hover.ts b/src/hooks/use-hover.ts
index 67d2a1a..76ff211 100644
--- a/src/hooks/use-hover.ts
+++ b/src/hooks/use-hover.ts
@@ -11,6 +11,7 @@ export function useHover<T extends HTMLElement = HTMLDivElement>(
   let lock = false
   const threshold = thresholdTime || 0
   const handleMouseOver = () => {
+    // @ts-ignore
     clearTimeout() // stop mouseout codes
     lock = true
     setValue(true)
@@ -23,6 +24,7 @@ export function useHover<T extends HTMLElement = HTMLDivElement>(
   }
 
   useEffect(() => {
+    // @ts-ignore
     const node: T | Window = ref?.current || window
 
     if (node) {
diff --git a/src/modal/modal.tsx b/src/modal/modal.tsx
index 3156877..c279c01 100644
--- a/src/modal/modal.tsx
+++ b/src/modal/modal.tsx
@@ -54,6 +54,7 @@ export const Modal: React.FC<ModalPropsT> = ({
   useOnClickOutside(ref, closeOnClick)
 
   return (
+    // @ts-ignore
     <AnimatePresence>
       {isOpen && (
         <FormContext.Provider value={formProps}>
diff --git a/src/overrides.ts b/src/overrides.ts
index 5d973ec..026099d 100644
--- a/src/overrides.ts
+++ b/src/overrides.ts
@@ -5,6 +5,7 @@ type StyleOverride<T> =
   | StyleObject
   | ((props: { $theme: any } & React.PropsWithChildren<T>) => StyleObject)
 
+  // @ts-ignore
 type ComponentOverride<T> = React.ComponentType<T> | React.RefForwardingComponent<T>
 
 interface OverrideObject<T> {
diff --git a/src/select/animate-options.tsx b/src/select/animate-options.tsx
index e6939cb..75bd661 100644
--- a/src/select/animate-options.tsx
+++ b/src/select/animate-options.tsx
@@ -27,6 +27,7 @@ export function AnimateOptions({ children, isOpen, animate, setReadyToChange })
 
   if (animate)
     return (
+    // @ts-ignore
       <AnimatePresence onExitComplete={() => setReadyToChange(true)}>
         {isOpen && <motion.div {...motionProps}>{children}</motion.div>}
       </AnimatePresence>
diff --git a/src/tabs/tab-list.tsx b/src/tabs/tab-list.tsx
index 35298d3..e50b371 100644
--- a/src/tabs/tab-list.tsx
+++ b/src/tabs/tab-list.tsx
@@ -20,6 +20,7 @@ export const TabList: React.FC<TabListPropsT> = ({ overrides = {}, children }) =
             <System.FlexItem key={id} {...getFlexItemStyles(sharedProps)}>
               {React.isValidElement(child) &&
                 React.cloneElement(child, {
+                  // @ts-ignore
                   $id: id,
                 })}
             </System.FlexItem>
diff --git a/src/tabs/tab-panels.tsx b/src/tabs/tab-panels.tsx
index f6e4c77..4f8ef07 100644
--- a/src/tabs/tab-panels.tsx
+++ b/src/tabs/tab-panels.tsx
@@ -15,6 +15,7 @@ export const TabPanels: React.FC<TabPanelsPropsT> = ({ overrides = {}, children
           (child, id) =>
             React.isValidElement(child) &&
             React.cloneElement(child, {
+                  // @ts-ignore
               $id: id,
             })
         )}
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
index 11fd56f..e77dc29 100644
--- a/src/tabs/tabs.tsx
+++ b/src/tabs/tabs.tsx
@@ -8,6 +8,7 @@ import { TabsContext } from "../helpers/tabs-provider"
 
 export const Tabs: React.FC<TabsPropsT> = ({
   overrides = {},
+  // @ts-ignore
   children,
   current,
   tabListScroll,
diff --git a/src/toast/toast.tsx b/src/toast/toast.tsx
index c2c23c0..a0e979e 100644
--- a/src/toast/toast.tsx
+++ b/src/toast/toast.tsx
@@ -41,6 +41,7 @@ export const Toast: React.FC<ToastPropsT> = ({
   }
 
   return (
+    // @ts-ignore
     <AnimatePresence>
       {show && (
         <Wrap {...sharedProps} {...motionProps} $style={overrides.Wrap}>
diff --git a/src/tokens/index.ts b/src/tokens/index.ts
index 7d54dcd..b13da52 100644
--- a/src/tokens/index.ts
+++ b/src/tokens/index.ts
@@ -1,2 +1,2 @@
 export { default as colors } from "./colors"
-export { ColorTokensT as ColorScaleTokensT } from "./types"
+export type { ColorTokensT as ColorScaleTokensT } from "./types"
diff --git a/tsconfig.json b/tsconfig.json
index 93ee4d4..8a530bb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
     "moduleResolution": "node",
     "target": "es5",
@@ -15,7 +16,8 @@
     "typeRoots": ["node_modules/@types"],
     "jsx": "react",
     "noImplicitAny": false,
-    "resolveJsonModule": true,
+    "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules"]
 }