Use Table of Contents from @swmansion/t-rex-ui

docs/src/theme/TOCCollapsible/index.js

@@ -0,0 +1,3 @@
+import { TOCCollapsible } from '@swmansion/t-rex-ui';
+
+export default TOCCollapsible;

docs/src/theme/TOCItems/Tree.js

@@ -1,35 +1,3 @@
-import React from 'react';
-import styles from './styles.module.css';
-import clsx from 'clsx';
-// Recursive component rendering the toc tree
-function TOCItemTree({ toc, className, linkClassName, isChild }) {
-  if (!toc.length) {
-    return null;
-  }
-  return (
-    <ul className={clsx(styles.tocItems, isChild ? undefined : className)}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-          <a
-            href={`#${heading.id}`}
-            className={linkClassName ?? undefined}
-            // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: `<span>${heading.value}</span>`,
-            }}
-          />
-          <TOCItemTree
-            isChild
-            toc={heading.children}
-            className={className}
-            linkClassName={linkClassName}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
-// Memo only the tree root is enough
-export default React.memo(TOCItemTree);
+import { TOCItemTree } from '@swmansion/t-rex-ui';
+
+export default TOCItemTree;

docs/src/theme/TOCItems/index.js

@@ -0,0 +1,3 @@
+import { TOCItems } from '@swmansion/t-rex-ui';
+
+export default TOCItems;