cleanups

components/package.json

@@ -38,7 +38,7 @@
     "@vanilla-extract/sprinkles": "^1.6.3",
     "clsx": "^2.1.1",
     "react-transition-state": "^2.1.3",
-    "ts-pattern": "^5.5.0"
+    "ts-pattern": "^5.6.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",

components/src/components/atoms/DynamicPopover/DynamicPopover.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import type { TransitionState } from 'react-transition-state'
-import { useTransition } from 'react-transition-state'
+import { useTransitionState } from 'react-transition-state'
 
 import { Portal } from '../Portal/Portal'
 import type { BoxProps } from '../Box/Box'
@@ -225,7 +225,7 @@ export const DynamicPopover: React.FC<DynamicPopoverProps> = ({
 
   const isControlled = isOpen !== undefined
 
-  const [state, toggle] = useTransition({
+  const [state, toggle] = useTransitionState({
     preEnter: true,
     exit: true,
     mountOnEnter: true,

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import type { TransitionState } from 'react-transition-state'
-import { useTransition } from 'react-transition-state'
+import { useTransitionState } from 'react-transition-state'
 
 import { Portal } from '../../atoms/Portal/Portal'
 
@@ -31,7 +31,7 @@ export const Backdrop: React.FC<BackdropProps> = ({
   open,
   renderCallback,
 }) => {
-  const [state, toggle] = useTransition({
+  const [state, toggle] = useTransitionState({
     timeout: {
       enter: 50,
       exit: 300,

components/src/components/molecules/Select/Select.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useEffect } from 'react'
 
 import type { TransitionState } from 'react-transition-state'
-import { useTransition } from 'react-transition-state'
+import { useTransitionState } from 'react-transition-state'
 
 import { useDocumentEvent } from '@/src/hooks/useDocumentEvent'
 
@@ -693,7 +693,7 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
       maxInputSize,
     )
 
-    const [state, toggle] = useTransition({
+    const [state, toggle] = useTransitionState({
       timeout: {
         enter: 0,
         exit: 300,

docs/next.config.mjs

@@ -1,12 +1,8 @@
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
 import path from 'node:path'
 const withVanillaExtract = createVanillaExtractPlugin({ identifiers: 'short' })
-import nextMDX from '@next/mdx'
-import { globSync } from 'node:fs'
 
-const withMDX = nextMDX({
-  extension: /\.mdx?$/,
-})
+import { globSync } from 'node:fs'
 
 const getComponentPaths = category =>
   globSync(`./src/reference/mdx/${category}/*.docs.mdx`, {
@@ -55,4 +51,4 @@ const config = {
 }
 
 /** @type {import('next').NextConfig} */
-export default withVanillaExtract(withMDX(config))
+export default withVanillaExtract(config)

docs/package.json

@@ -27,11 +27,9 @@
     "ts-pattern": "^5.5.0"
   },
   "devDependencies": {
-    "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@next/mdx": "^12.0.1",
     "@types/mdx-js__react": "^1.5.5",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.10.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.2.13",
     "@types/webpack-env": "^1.18.5",

docs/src/pages/index.tsx

@@ -0,0 +1,43 @@
+import matter from 'gray-matter'
+import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { MDXRemote } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import { readFileSync } from 'node:fs'
+import { Header, Link } from '~/components'
+
+const Home = ({ mdxSource }: { mdxSource: MDXRemoteSerializeResult }) => (
+  <>
+    <Header
+      description={(
+        <>
+          Design system for
+          {' '}
+          <Link href="https://ens.domains">ENS</Link>
+          {' '}
+          built with
+          {' '}
+          <Link href="https://reactjs.org/">React</Link>
+          .
+        </>
+      )}
+      title="ENS Design System (alpha)"
+    />
+    <MDXRemote {...mdxSource} />
+  </>
+)
+
+export default Home
+
+export const getStaticProps = async () => {
+  const source = readFileSync('./src/reference/index.mdx')
+
+  const { content, data } = matter(source)
+
+  const mdxSource = await serialize(content, {
+    scope: data,
+  })
+
+  return {
+    props: { mdxSource },
+  }
+}

docs/src/pages/index.mdx → docs/src/reference/index.mdx

@@ -1,15 +1,3 @@
-import { Header, Link } from '~/components'
-
-<Header
-  description={
-    <>
-      Design system for <Link href="https://ens.domains">ENS</Link> built with{' '}
-      <Link href="https://reactjs.org/">React</Link>.
-    </>
-  }
-  title="ENS Design System (alpha)"
-/>
-
 ## Install
 
 ```bash

docs/src/reference/mdx/atoms/RecordItem.docs.mdx

@@ -19,13 +19,13 @@ import { RecordItem } from '@ensdomains/thorin'
 
 ```tsx live=true
 <Box display="flex" flexDirection="column" gap="4">
-  <RecordItem keyLabel="FLAME" keySublabel="Legacy" value="0xb794f5ea0ba39494ce839613fffba74279579268">
+  <RecordItem keyLabel="Label" keySublabel="Sublabel" value="0xb794f5ea0ba39494ce839613fffba74279579268">
     0xb794f5ea0ba39494ce839613fffba74279579268
   </RecordItem>
   <RecordItem icon={FlameSVG} value="0xb794f5ea0ba39494ce839613fffba74279579268">
     0xb794f5ea0ba39494ce839613fffba74279579268
   </RecordItem>
-  <RecordItem inline keyLabel="FLAME_LEGACY" value="0xb794f5ea0ba39494ce839613fffba74279579268">
+  <RecordItem inline keyLabel="Label" value="0xb794f5ea0ba39494ce839613fffba74279579268">
     0xb794...9268
   </RecordItem>
   <RecordItem icon={FlameSVG} inline value="0xb794f5ea0ba39494ce839613fffba74279579268">