diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index a9ab39e..8ac4c6d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -24,15 +24,7 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Lint Code Base
-        uses: github/super-linter@v3.17.1
-        env:
-          LINTER_RULES_PATH: /
-          LOG_LEVEL: 'WARN'
-          JAVASCRIPT_ES_CONFIG_FILE: .eslintrc.json
-          VALIDATE_JAVASCRIPT_STANDARD: false
-          FILTER_REGEX_EXCLUDE: .*husky.*|README.md
-          DEFAULT_BRANCH: main
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn lint
 
       - name: Test
         run: yarn test
diff --git a/package.json b/package.json
index 72dc717..a379193 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^14.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@vitejs/plugin-react": "^2.1.0",
@@ -107,17 +108,18 @@
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
+    "mdx-observable": "^0.2.0",
     "next": "^12.3.0",
     "nock": "^13.2.9",
-    "node-fetch": "~3.2.10",
     "pinst": "^3.0.0",
     "pkg-dir": "^7.0.0",
     "prettier": "^2.7.1",
     "react": "*",
     "react-dom": "*",
     "rollup": "^2.79.0",
-    "vitest": "^0.23.2",
-    "watch": "^1.0.2"
+    "vitest": "^0.23.4",
+    "watch": "^1.0.2",
+    "whatwg-fetch": "^3.6.2"
   },
   "peerDependencies": {
     "next": ">11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e57b30b..c9487b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,7 @@ specifiers:
   '@rollup/plugin-commonjs': ^22.0.2
   '@rollup/plugin-json': ^4.1.0
   '@rollup/plugin-node-resolve': ^14.0.1
+  '@testing-library/jest-dom': ^5.16.5
   '@testing-library/react': ^13.4.0
   '@testing-library/user-event': ^14.4.3
   '@vitejs/plugin-react': ^2.1.0
@@ -28,10 +29,10 @@ specifiers:
   lodash: ^4.17.21
   marked: ^4.1.0
   mdast: ^3.0.0
+  mdx-observable: ^0.2.0
   next: ^12.3.0
   next-mdx-remote: ^4.1.0
   nock: ^13.2.9
-  node-fetch: ~3.2.10
   pinst: ^3.0.0
   pkg-dir: ^7.0.0
   prettier: ^2.7.1
@@ -54,8 +55,9 @@ specifiers:
   strip-indent: ^4.0.0
   unist-util-visit: ^4.1.1
   vfile: ^5.3.5
-  vitest: ^0.23.2
+  vitest: ^0.23.4
   watch: ^1.0.2
+  whatwg-fetch: ^3.6.2
 
 dependencies:
   '@next/mdx': 12.3.0
@@ -92,6 +94,7 @@ devDependencies:
   '@rollup/plugin-commonjs': 22.0.2_rollup@2.79.0
   '@rollup/plugin-json': 4.1.0_rollup@2.79.0
   '@rollup/plugin-node-resolve': 14.0.1_rollup@2.79.0
+  '@testing-library/jest-dom': 5.16.5
   '@testing-library/react': 13.4.0_biqbaboplfbrettd7655fr4n2y
   '@testing-library/user-event': 14.4.3
   '@vitejs/plugin-react': 2.1.0
@@ -104,20 +107,25 @@ devDependencies:
   husky: 8.0.1
   jsdom: 20.0.0
   lint-staged: 13.0.3
+  mdx-observable: 0.2.0_react@18.2.0
   next: 12.3.0_biqbaboplfbrettd7655fr4n2y
   nock: 13.2.9
-  node-fetch: 3.2.10
   pinst: 3.0.0
   pkg-dir: 7.0.0
   prettier: 2.7.1
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   rollup: 2.79.0
-  vitest: 0.23.2_jsdom@20.0.0
+  vitest: 0.23.4_jsdom@20.0.0
   watch: 1.0.2
+  whatwg-fetch: 3.6.2
 
 packages:
 
+  /@adobe/css-tools/4.0.1:
+    resolution: {integrity: sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==}
+    dev: true
+
   /@algolia/events/4.0.1:
     resolution: {integrity: sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==}
     dev: false
@@ -1731,6 +1739,32 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@jest/expect-utils/29.0.3:
+    resolution: {integrity: sha512-i1xUkau7K/63MpdwiRqaxgZOjxYs4f0WMTGJnYwUKubsNRZSeQbLorS7+I4uXVF9KQ5r61BUPAUMZ7Lf66l64Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      jest-get-type: 29.0.0
+    dev: true
+
+  /@jest/schemas/29.0.0:
+    resolution: {integrity: sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.24.42
+    dev: true
+
+  /@jest/types/29.0.3:
+    resolution: {integrity: sha512-coBJmOQvurXjN1Hh5PzF7cmsod0zLIOXpP8KD161mqNlroMhLcwpODiEzi7ZsRl5Z/AIuxpeNm8DCl43F4kz8A==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/schemas': 29.0.0
+      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 18.0.6
+      '@types/yargs': 17.0.12
+      chalk: 4.1.2
+    dev: true
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}
@@ -1802,14 +1836,14 @@ packages:
       - supports-color
     dev: true
 
-  /@mdx-js/mdx/2.1.2:
-    resolution: {integrity: sha512-ASN1GUH0gXsgJ2UD/Td7FzJo1SwFkkQ5V1i9at5o/ROra7brkyMcBsotsOWJWRzmXZaLw2uXWn4aN8B3PMNFMA==}
+  /@mdx-js/mdx/2.1.3:
+    resolution: {integrity: sha512-ahbb47HJIJ4xnifaL06tDJiSyLEy1EhFAStO7RZIm3GTa7yGW3NGhZaj+GUCveFgl5oI54pY4BgiLmYm97y+zg==}
     dependencies:
-      '@types/estree-jsx': 0.0.1
+      '@types/estree-jsx': 1.0.0
       '@types/mdx': 2.0.2
-      astring: 1.8.3
       estree-util-build-jsx: 2.1.0
       estree-util-is-identifier-name: 2.0.1
+      estree-util-to-js: 1.1.0
       estree-walker: 3.0.1
       hast-util-to-estree: 2.0.2
       markdown-extensions: 1.1.1
@@ -2091,6 +2125,10 @@ packages:
       rollup: 2.79.0
     dev: true
 
+  /@sinclair/typebox/0.24.42:
+    resolution: {integrity: sha512-d+2AtrHGyWek2u2ITF0lHRIv6Tt7X0dEHW+0rP+5aDCEjC3fiN2RBjrLD0yU0at52BcZbRGxLbAtXiR0hFCjYw==}
+    dev: true
+
   /@swc/helpers/0.4.11:
     resolution: {integrity: sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==}
     dependencies:
@@ -2111,6 +2149,21 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /@testing-library/jest-dom/5.16.5:
+    resolution: {integrity: sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==}
+    engines: {node: '>=8', npm: '>=6', yarn: '>=1'}
+    dependencies:
+      '@adobe/css-tools': 4.0.1
+      '@babel/runtime': 7.18.9
+      '@types/testing-library__jest-dom': 5.14.5
+      aria-query: 5.0.0
+      chalk: 3.0.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.5.14
+      lodash: 4.17.21
+      redent: 3.0.0
+    dev: true
+
   /@testing-library/react/13.4.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==}
     engines: {node: '>=12'}
@@ -2202,6 +2255,29 @@ packages:
     dependencies:
       '@types/unist': 2.0.6
 
+  /@types/istanbul-lib-coverage/2.0.4:
+    resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
+    dev: true
+
+  /@types/istanbul-lib-report/3.0.0:
+    resolution: {integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==}
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.4
+    dev: true
+
+  /@types/istanbul-reports/3.0.1:
+    resolution: {integrity: sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==}
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.0
+    dev: true
+
+  /@types/jest/29.0.3:
+    resolution: {integrity: sha512-F6ukyCTwbfsEX5F2YmVYmM5TcTHy1q9P5rWlRbrk56KyMh3v9xRGUO3aa8+SkvMi0SHXtASJv1283enXimC0Og==}
+    dependencies:
+      expect: 29.0.3
+      pretty-format: 29.0.3
+    dev: true
+
   /@types/js-yaml/4.0.5:
     resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
     dev: false
@@ -2271,9 +2347,29 @@ packages:
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
 
+  /@types/stack-utils/2.0.1:
+    resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
+    dev: true
+
+  /@types/testing-library__jest-dom/5.14.5:
+    resolution: {integrity: sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==}
+    dependencies:
+      '@types/jest': 29.0.3
+    dev: true
+
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
 
+  /@types/yargs-parser/21.0.0:
+    resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
+    dev: true
+
+  /@types/yargs/17.0.12:
+    resolution: {integrity: sha512-Nz4MPhecOFArtm81gFQvQqdV7XYCrWKx5uUt6GNHredFHn1i2mtWqXTON7EPXMtNi1qjtjEM/VCHDhcHsAMLXQ==}
+    dependencies:
+      '@types/yargs-parser': 21.0.0
+    dev: true
+
   /@vitejs/plugin-react/2.1.0:
     resolution: {integrity: sha512-am6rPyyU3LzUYne3Gd9oj9c4Rzbq5hQnuGXSMT6Gujq45Il/+bunwq3lrB7wghLkiF45ygMwft37vgJ/NE8IAA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2692,6 +2788,14 @@ packages:
       supports-color: 5.5.0
     dev: true
 
+  /chalk/3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -2728,6 +2832,10 @@ packages:
     resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
     dev: true
 
+  /ci-info/3.4.0:
+    resolution: {integrity: sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==}
+    dev: true
+
   /classnames/2.3.1:
     resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==}
     dev: false
@@ -2920,6 +3028,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css.escape/1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    dev: true
+
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -2943,11 +3055,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /data-uri-to-buffer/4.0.0:
-    resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
-    engines: {node: '>= 12'}
-    dev: true
-
   /data-urls/3.0.2:
     resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
     engines: {node: '>=12'}
@@ -3034,6 +3141,11 @@ packages:
       repeat-string: 1.6.1
     dev: true
 
+  /diff-sequences/29.0.0:
+    resolution: {integrity: sha512-7Qe/zd1wxSDL4D/X/FPjOMB+ZMDt71W94KYaq05I2l0oQqgXgs7s4ftYYmV38gBSrPz2vcygxfs1xn0FT+rKNA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dev: true
+
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -3372,6 +3484,11 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
+  /escape-string-regexp/2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+    dev: true
+
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -3618,6 +3735,14 @@ packages:
   /estree-util-is-identifier-name/2.0.1:
     resolution: {integrity: sha512-rxZj1GkQhY4x1j/CSnybK9cGuMFQYFPLq0iNyopqf14aOVLFtMv7Esika+ObJWPWiOHuMOAHz3YkWoLYYRnzWQ==}
 
+  /estree-util-to-js/1.1.0:
+    resolution: {integrity: sha512-490lbfCcpLk+ofK6HCgqDfYs4KAfq6QVvDw3+Bm1YoKRgiOjKiKYGAVQE1uwh7zVxBgWhqp4FDtp5SqunpUk1A==}
+    dependencies:
+      '@types/estree-jsx': 1.0.0
+      astring: 1.8.3
+      source-map: 0.7.4
+    dev: false
+
   /estree-util-visit/1.2.0:
     resolution: {integrity: sha512-wdsoqhWueuJKsh5hqLw3j8lwFqNStm92VcwtAOAny8g/KS/l5Y8RISjR4k5W6skCj3Nirag/WUCMS0Nfy3sgsg==}
     dependencies:
@@ -3677,6 +3802,17 @@ packages:
       strip-final-newline: 3.0.0
     dev: true
 
+  /expect/29.0.3:
+    resolution: {integrity: sha512-t8l5DTws3212VbmPL+tBFXhjRHLmctHB0oQbL8eUc6S7NzZtYUhycrFO9mkxA0ZUC6FAWdNi7JchJSkODtcu1Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/expect-utils': 29.0.3
+      jest-get-type: 29.0.0
+      jest-matcher-utils: 29.0.3
+      jest-message-util: 29.0.3
+      jest-util: 29.0.3
+    dev: true
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -3716,14 +3852,6 @@ packages:
       reusify: 1.0.4
     dev: true
 
-  /fetch-blob/3.2.0:
-    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
-    engines: {node: ^12.20 || >= 14.13}
-    dependencies:
-      node-domexception: 1.0.0
-      web-streams-polyfill: 3.2.1
-    dev: true
-
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -3783,13 +3911,6 @@ packages:
       mime-types: 2.1.35
     dev: true
 
-  /formdata-polyfill/4.0.10:
-    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
-    engines: {node: '>=12.20.0'}
-    dependencies:
-      fetch-blob: 3.2.0
-    dev: true
-
   /fs-extra/10.1.0:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
@@ -4483,6 +4604,58 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /jest-diff/29.0.3:
+    resolution: {integrity: sha512-+X/AIF5G/vX9fWK+Db9bi9BQas7M9oBME7egU7psbn4jlszLFCu0dW63UgeE6cs/GANq4fLaT+8sGHQQ0eCUfg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 29.0.0
+      jest-get-type: 29.0.0
+      pretty-format: 29.0.3
+    dev: true
+
+  /jest-get-type/29.0.0:
+    resolution: {integrity: sha512-83X19z/HuLKYXYHskZlBAShO7UfLFXu/vWajw9ZNJASN32li8yHMaVGAQqxFW1RCFOkB7cubaL6FaJVQqqJLSw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dev: true
+
+  /jest-matcher-utils/29.0.3:
+    resolution: {integrity: sha512-RsR1+cZ6p1hDV4GSCQTg+9qjeotQCgkaleIKLK7dm+U4V/H2bWedU3RAtLm8+mANzZ7eDV33dMar4pejd7047w==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 29.0.3
+      jest-get-type: 29.0.0
+      pretty-format: 29.0.3
+    dev: true
+
+  /jest-message-util/29.0.3:
+    resolution: {integrity: sha512-7T8JiUTtDfppojosORAflABfLsLKMLkBHSWkjNQrjIltGoDzNGn7wEPOSfjqYAGTYME65esQzMJxGDjuLBKdOg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@jest/types': 29.0.3
+      '@types/stack-utils': 2.0.1
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      micromatch: 4.0.5
+      pretty-format: 29.0.3
+      slash: 3.0.0
+      stack-utils: 2.0.5
+    dev: true
+
+  /jest-util/29.0.3:
+    resolution: {integrity: sha512-Q0xaG3YRG8QiTC4R6fHjHQPaPpz9pJBEi0AeOE4mQh/FuWOijFjGXMMOfQEaU9i3z76cNR7FobZZUQnL6IyfdQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/types': 29.0.3
+      '@types/node': 18.0.6
+      chalk: 4.1.2
+      ci-info: 3.4.0
+      graceful-fs: 4.2.10
+      picomatch: 2.3.1
+    dev: true
+
   /js-sdsl/4.1.4:
     resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
     dev: true
@@ -5020,6 +5193,14 @@ packages:
   /mdurl/1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
+  /mdx-observable/0.2.0_react@18.2.0:
+    resolution: {integrity: sha512-AvAnVq3EROTLZkBbfi7lMQs0MFdKCrzBPDhJEnfSpgkXGGX06fdiSRXCIL/zMo6A4CsvnudWAbcv3e3zcMt2OA==}
+    peerDependencies:
+      react: ^16.2
+    dependencies:
+      react: 18.2.0
+    dev: true
+
   /meow/8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -5440,7 +5621,7 @@ packages:
       react: '>=16.x <=18.x'
       react-dom: '>=16.x <=18.x'
     dependencies:
-      '@mdx-js/mdx': 2.1.2
+      '@mdx-js/mdx': 2.1.3
       '@mdx-js/react': 2.1.2_react@18.2.0
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -5507,20 +5688,6 @@ packages:
       - supports-color
     dev: true
 
-  /node-domexception/1.0.0:
-    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
-    engines: {node: '>=10.5.0'}
-    dev: true
-
-  /node-fetch/3.2.10:
-    resolution: {integrity: sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dependencies:
-      data-uri-to-buffer: 4.0.0
-      fetch-blob: 3.2.0
-      formdata-polyfill: 4.0.10
-    dev: true
-
   /node-releases/2.0.6:
     resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
     dev: true
@@ -5897,6 +6064,15 @@ packages:
       react-is: 17.0.2
     dev: true
 
+  /pretty-format/29.0.3:
+    resolution: {integrity: sha512-cHudsvQr1K5vNVLbvYF/nv3Qy/F/BcEKxGuIeMiVMRHxPOO1RxXooP8g/ZrwAp7Dx+KdMZoOc7NxLHhMrP2f9Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/schemas': 29.0.0
+      ansi-styles: 5.2.0
+      react-is: 18.2.0
+    dev: true
+
   /prism-react-renderer/1.3.5_react@18.2.0:
     resolution: {integrity: sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==}
     peerDependencies:
@@ -6026,7 +6202,6 @@ packages:
 
   /react-is/18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
-    dev: false
 
   /react-markdown/8.0.3_react@18.2.0:
     resolution: {integrity: sha512-We36SfqaKoVNpN1QqsZwWSv/OZt5J15LNgTLWynwAN5b265hrQrsjMtlRNwUvS+YyR3yDM8HpTNc4pK9H/Gc0A==}
@@ -6591,6 +6766,11 @@ packages:
     dev: true
     optional: true
 
+  /source-map/0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: false
+
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     dev: true
@@ -6635,6 +6815,13 @@ packages:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: false
 
+  /stack-utils/2.0.5:
+    resolution: {integrity: sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==}
+    engines: {node: '>=10'}
+    dependencies:
+      escape-string-regexp: 2.0.0
+    dev: true
+
   /state-toggle/1.0.3:
     resolution: {integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==}
     dev: true
@@ -6751,8 +6938,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /strip-literal/0.4.0:
-    resolution: {integrity: sha512-ql/sBDoJOybTKSIOWrrh8kgUEMjXMwRAkZTD0EwiwxQH/6tTPkZvMIEjp0CRlpi6V5FMiJyvxeRkEi1KrGISoA==}
+  /strip-literal/0.4.2:
+    resolution: {integrity: sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==}
     dependencies:
       acorn: 8.8.0
     dev: true
@@ -7315,8 +7502,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitest/0.23.2_jsdom@20.0.0:
-    resolution: {integrity: sha512-kTBKp3ROPDkYC+x2zWt4znkDtnT08W1FQ6ngRFuqxpBGNuNVS+eWZKfffr8y2JGvEzZ9EzMAOcNaiqMj/FZqMw==}
+  /vitest/0.23.4_jsdom@20.0.0:
+    resolution: {integrity: sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
@@ -7344,7 +7531,7 @@ packages:
       debug: 4.3.4
       jsdom: 20.0.0
       local-pkg: 0.4.2
-      strip-literal: 0.4.0
+      strip-literal: 0.4.2
       tinybench: 2.1.5
       tinypool: 0.3.0
       tinyspy: 1.0.2
@@ -7383,11 +7570,6 @@ packages:
     resolution: {integrity: sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==}
     dev: true
 
-  /web-streams-polyfill/3.2.1:
-    resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
-    engines: {node: '>= 8'}
-    dev: true
-
   /webidl-conversions/7.0.0:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
@@ -7400,6 +7582,10 @@ packages:
       iconv-lite: 0.6.3
     dev: true
 
+  /whatwg-fetch/3.6.2:
+    resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
+    dev: true
+
   /whatwg-mimetype/3.0.0:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
diff --git a/test/Documentation.test.jsx.disabled b/test/Documentation.test.jsx
similarity index 56%
rename from test/Documentation.test.jsx.disabled
rename to test/Documentation.test.jsx
index 8d672d4..f463d46 100644
--- a/test/Documentation.test.jsx.disabled
+++ b/test/Documentation.test.jsx
@@ -1,9 +1,11 @@
 import { render } from '@testing-library/react'
-import Documentation from '../src'
+import { Documentation } from '../src/'
 import { pageProps } from '../src/serialize'
 import nock from 'nock'
+import { describe, it, expect, beforeEach } from 'vitest'
+import 'whatwg-fetch'
 
-beforeAll(async () => {
+beforeEach(async () => {
   const docOneFixture = `
   ---
   description: Some description.
@@ -20,10 +22,19 @@ beforeAll(async () => {
   Second Paragraph.
   `
 
+  process.env.DOCS_ORG = 'DOCS_ORG'
+  process.env.DOCS_REPO = 'DOCS_REPO'
+  process.env.DOCS_BRANCH = 'DOCS_BRANCH'
+  process.env.DOCS_FOLDER = 'DOCS_FOLDER'
+
   // mock github response
   nock(
     `https://raw.githubusercontent.com/${process.env.DOCS_ORG}/${process.env.DOCS_REPO}/${process.env.DOCS_BRANCH}`
   )
+    .defaultReplyHeaders({
+      'access-control-allow-origin': '*',
+      'access-control-allow-credentials': 'true'
+    })
     .get(`/${process.env.DOCS_FOLDER}/manifest.json`)
     .reply(200, {
       routes: [
@@ -33,22 +44,21 @@ beforeAll(async () => {
           routes: [
             {
               title: 'Docs One',
-              path: '/docs/one.md'
+              path: `/${process.env.DOCS_FOLDER}/one.md`
             }
           ]
         }
       ]
     })
-    .get(`/docs/one.md`)
+    .get(`/${process.env.DOCS_FOLDER}/one.md`)
     .reply(200, docOneFixture)
     .persist()
 })
 
-describe.skip('Document', () => {
+describe('Document', () => {
   it('should render', async () => {
     const { source } = await pageProps({ params: { slug: ['one'] } })
-    const container = render(<Documentation source={source} />)
-    // container.debug()
-    expect(container.asFragment()).toMatchSnapshot()
+    const { container } = render(<Documentation source={source} />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/test/__snapshots__/Documentation.test.jsx.snap b/test/__snapshots__/Documentation.test.jsx.snap
new file mode 100644
index 0000000..bacce22
--- /dev/null
+++ b/test/__snapshots__/Documentation.test.jsx.snap
@@ -0,0 +1,121 @@
+// Vitest Snapshot v1
+
+exports[`Document > should render 1`] = `
+<div>
+  <hr />
+  
+
+  <h2
+    id="description-some-description"
+  >
+    description: Some description.
+    <a
+      class="btn-copy-link invisible"
+      href="#description-some-description"
+    >
+      <svg
+        class="h-6 w-6 ml-2 docs-copy-btn"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+    </a>
+  </h2>
+  
+
+  <h1
+    id="first-level"
+  >
+    First Level
+    <a
+      class="btn-copy-link invisible"
+      href="#first-level"
+    >
+      <svg
+        class="h-6 w-6 ml-2 docs-copy-btn"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+    </a>
+  </h1>
+  
+
+  <h2
+    id="second-level-one"
+  >
+    Second Level One
+    <a
+      class="btn-copy-link invisible"
+      href="#second-level-one"
+    >
+      <svg
+        class="h-6 w-6 ml-2 docs-copy-btn"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+    </a>
+  </h2>
+  
+
+  <p>
+    First Paragraph.
+  </p>
+  
+
+  <h2
+    id="second-level-two"
+  >
+    Second Level Two
+    <a
+      class="btn-copy-link invisible"
+      href="#second-level-two"
+    >
+      <svg
+        class="h-6 w-6 ml-2 docs-copy-btn"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+        />
+      </svg>
+    </a>
+  </h2>
+  
+
+  <p>
+    Second Paragraph.
+  </p>
+</div>
+`;
diff --git a/test/remark-plugins/section.test.js.disabled b/test/remark-plugins/section.test.js.disabled
deleted file mode 100644
index a177e67..0000000
--- a/test/remark-plugins/section.test.js.disabled
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react'
-import remarkSection from '../../src/lib/remark-plugins/sections/index'
-import { render } from '@testing-library/react'
-import MDX from '@mdx-js/runtime'
-
-describe('remarkState', () => {
-  it('adds sections - html', async () => {
-    const markdown = `
-# Hi
-Here is my text
-
-## Subthing
-more sub text
-
-## Subthing 2
-more sub 22 text
-
-# Another main thing
-eeehoo
-
-## Second subthing after first main thing
-more sub text
-
-# Leftover
-more sub text
-    `
-    const testComponent = render(
-      <MDX
-        components={{
-          Element
-        }}
-        remarkPlugins={[remarkSection]}
-      >
-        {markdown}
-      </MDX>
-    )
-    expect(testComponent.container).toMatchInlineSnapshot(`
-<div>
-  <div
-    name="hi"
-  >
-    <h1>
-      Hi
-    </h1>
-    <p>
-      Here is my text
-    </p>
-    <div
-      name="subthing"
-    >
-      <h2>
-        Subthing
-      </h2>
-      <p>
-        more sub text
-      </p>
-    </div>
-    <div
-      name="subthing-2"
-    >
-      <h2>
-        Subthing 2
-      </h2>
-      <p>
-        more sub 22 text
-      </p>
-    </div>
-  </div>
-  <div
-    name="another-main-thing"
-  >
-    <h1>
-      Another main thing
-    </h1>
-    <p>
-      eeehoo
-    </p>
-    <div
-      name="second-subthing-after-first-main-thing"
-    >
-      <h2>
-        Second subthing after first main thing
-      </h2>
-      <p>
-        more sub text
-      </p>
-    </div>
-  </div>
-  <div
-    name="leftover"
-  >
-    <h1>
-      Leftover
-    </h1>
-    <p>
-      more sub text
-
-    </p>
-  </div>
-</div>
-`)
-  })
-})
diff --git a/test/remark-plugins/section.test.jsx b/test/remark-plugins/section.test.jsx
new file mode 100644
index 0000000..3cc00a1
--- /dev/null
+++ b/test/remark-plugins/section.test.jsx
@@ -0,0 +1,112 @@
+import React from 'react'
+import remarkSection from '../../src/lib/remark-plugins/sections/index'
+import { render } from '@testing-library/react'
+import MDX from '@mdx-js/runtime'
+import { describe, it, expect } from 'vitest'
+
+describe('remarkState', () => {
+  it('adds sections - html', async () => {
+    const markdown = `
+# Hi
+Here is my text
+
+## Subthing
+more sub text
+
+## Subthing 2
+more sub 22 text
+
+# Another main thing
+eeehoo
+
+## Second subthing after first main thing
+more sub text
+
+# Leftover
+more sub text
+`
+
+    const testComponent = render(
+      <MDX
+        components={{
+          Element: ({ name, ...props }) => {
+            return (
+              <div
+                // remove name from parent div
+                name={props.children[0]?.props?.id === name ? null : name}
+                {...props}
+              />
+            )
+          }
+        }}
+        remarkPlugins={[remarkSection]}
+      >
+        {markdown}
+      </MDX>
+    )
+    expect(testComponent.container).toMatchInlineSnapshot(`
+      <div>
+        <div
+          name="hi"
+        >
+          <h1>
+            Hi
+          </h1>
+          <p>
+            Here is my text
+          </p>
+          <div
+            name="subthing"
+          >
+            <h2>
+              Subthing
+            </h2>
+            <p>
+              more sub text
+            </p>
+          </div>
+          <div
+            name="subthing-2"
+          >
+            <h2>
+              Subthing 2
+            </h2>
+            <p>
+              more sub 22 text
+            </p>
+          </div>
+        </div>
+        <div
+          name="another-main-thing"
+        >
+          <h1>
+            Another main thing
+          </h1>
+          <p>
+            eeehoo
+          </p>
+          <div
+            name="second-subthing-after-first-main-thing"
+          >
+            <h2>
+              Second subthing after first main thing
+            </h2>
+            <p>
+              more sub text
+            </p>
+          </div>
+        </div>
+        <div
+          name="leftover"
+        >
+          <h1>
+            Leftover
+          </h1>
+          <p>
+            more sub text
+          </p>
+        </div>
+      </div>
+    `)
+  })
+})
diff --git a/test/remark-plugins/state.test.js.disabled b/test/remark-plugins/state.test.jsx
similarity index 96%
rename from test/remark-plugins/state.test.js.disabled
rename to test/remark-plugins/state.test.jsx
index b7a7aa4..cc801e1 100644
--- a/test/remark-plugins/state.test.js.disabled
+++ b/test/remark-plugins/state.test.jsx
@@ -5,6 +5,7 @@ import { State, Observe } from 'mdx-observable'
 import Interpolate from '../../src/components/Interpolate'
 import userEvent from '@testing-library/user-event'
 import MDX from '@mdx-js/runtime'
+import { describe, it, expect } from 'vitest'
 
 const markdown = `
 <!--export-to-input-->
diff --git a/vitest.config.js b/vitest.config.js
index da825b9..a08b313 100644
--- a/vitest.config.js
+++ b/vitest.config.js
@@ -5,6 +5,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   test: {
-    environment: 'jsdom'
+    environment: 'jsdom',
+    setupFiles: './vitestSetup.js'
   }
 })
diff --git a/vitestSetup.js b/vitestSetup.js
new file mode 100644
index 0000000..d263e51
--- /dev/null
+++ b/vitestSetup.js
@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers'
+import { expect } from 'vitest'
+
+expect.extend(matchers)