system-ui · hasparus · Aug 10, 2022 · Aug 9, 2022 · Aug 9, 2022 · Aug 9, 2022
diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.1",
+    "@theme-ui/mdx": "latest",
     "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^3.7.1",
     "react": "^18.1.0",

diff --git a/examples/gatsby/src/index.tsx b/examples/gatsby/src/index.tsx
@@ -1,5 +1,6 @@
 import React, { FC, ReactNode } from 'react'
-import { ThemeProvider, Themed } from 'theme-ui'
+import { ThemeProvider } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import theme from './theme'
 
 export const WrapRootElement: FC<{ element: ReactNode }> = ({ element }) => (

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -23,6 +23,7 @@
     "@theme-ui/css": "0.14.5",
     "@theme-ui/editor": "0.14.5",
     "@theme-ui/match-media": "0.14.5",
+    "@theme-ui/mdx": "0.14.5",
     "@theme-ui/presets": "0.14.5",
     "@theme-ui/prism": "0.14.5",
     "@theme-ui/sidenav": "0.14.5",
@@ -85,7 +86,8 @@
     "typography-theme-wordpress-2016": "^0.16.19",
     "typography-theme-wordpress-kubrick": "^0.16.19",
     "typography-theme-zacklive": "^1.0.2",
-    "@mdx-js/react": "^1"
+    "@mdx-js/react": "^1",
+    "@mdx-js/mdx": "^1"
   },
   "devDependencies": {
     "@babel/register": "^7.8.6"

diff --git a/packages/docs/src/components/preset.js b/packages/docs/src/components/preset.js
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { Helmet } from 'react-helmet'
-import { jsx, Themed } from 'theme-ui'
+import { jsx } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { ThemeContext } from '@emotion/react'
 import * as presets from '@theme-ui/presets'
 import {

diff --git a/packages/docs/src/components/presets-demo.js b/packages/docs/src/components/presets-demo.js
@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, Themed, Select } from 'theme-ui'
+import { jsx, ThemeProvider, Select } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { MDXProvider } from '@mdx-js/react'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet'

diff --git a/packages/docs/src/components/theme-scales.js b/packages/docs/src/components/theme-scales.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
 import { scales, multiples } from '@theme-ui/css'
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 
 const camelDash = (string) =>
   string.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`)

diff --git a/packages/docs/src/components/typography-layout.js b/packages/docs/src/components/typography-layout.js
@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, Flex, Themed } from 'theme-ui'
+import { jsx, ThemeProvider, Flex } from 'theme-ui'
+import { Themed } from "@theme-ui/mdx"
 import { useState } from 'react'
 import { toTheme } from '@theme-ui/typography'
 import GoogleFonts from './google-fonts'

diff --git a/packages/docs/src/pages/customize.js b/packages/docs/src/pages/customize.js
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import { jsx, Themed, Grid, useThemeUI } from 'theme-ui'
+import { jsx, Grid, useThemeUI } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { EditorProvider, Theme } from '@theme-ui/editor'
 import { TypeStyle, FontFamily } from '@theme-ui/style-guide'
 import React from 'react'

diff --git a/packages/docs/src/pages/recipes/index.js b/packages/docs/src/pages/recipes/index.js
@@ -1,6 +1,7 @@
 // @ts-check
 /** @jsx jsx */
-import { jsx, Themed } from 'theme-ui'
+import { jsx } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { graphql, Link } from 'gatsby'
 
 import { Cards } from '../..'

diff --git a/packages/docs/src/pages/themed.mdx b/packages/docs/src/pages/themed.mdx
@@ -11,7 +11,7 @@ component to render an `<h1>` element with styles from `theme.styles.h1`.
 
 ```jsx
 // example
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 
 export default (props) => (
   <div>

diff --git a/packages/gatsby-plugin-theme-ui/package.json b/packages/gatsby-plugin-theme-ui/package.json
@@ -7,6 +7,7 @@
   "peerDependencies": {
     "@emotion/react": "^11",
     "@mdx-js/react": "^1",
+    "@theme-ui/mdx": ">=0.14.0",
     "gatsby": "^4",
     "react": ">=18",
     "theme-ui": ">=0.14.0"

diff --git a/packages/gatsby-theme-style-guide/package.json b/packages/gatsby-theme-style-guide/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18"
   },
   "dependencies": {
+    "@theme-ui/mdx": "0.14.5",
     "@theme-ui/style-guide": "0.14.5",
     "theme-ui": "0.14.5"
   },

diff --git a/packages/gatsby-theme-style-guide/src/colors.js b/packages/gatsby-theme-style-guide/src/colors.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { ColorPalette } from '@theme-ui/style-guide'
 
 export default function ColorsDemo() {

diff --git a/packages/gatsby-theme-style-guide/src/header.js b/packages/gatsby-theme-style-guide/src/header.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 
 export default function Header() {
   return (

diff --git a/packages/prism/package.json b/packages/prism/package.json
@@ -14,7 +14,8 @@
     "prism-react-renderer": "^1.1.1"
   },
   "peerDependencies": {
-    "theme-ui": ">=0.14.0"
+    "theme-ui": ">=0.14.0",
+    "@theme-ui/mdx": ">=0.14.0"
   },
   "publishConfig": {
     "access": "public"
@@ -31,6 +32,7 @@
   ],
   "gitHead": "621199460fa3bdb0100748441e62517b7529b8c8",
   "devDependencies": {
+    "@theme-ui/mdx": "0.14.5",
     "param-case": "^3.0.4",
     "postcss": "^8.1.10",
     "postcss-js": "^3.0.3",

diff --git a/packages/style-guide/README.md b/packages/style-guide/README.md
@@ -7,7 +7,7 @@ npm i @theme-ui/style-guide
 ```
 
 ```jsx
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { TypeScale, TypeStyle, ColorPalette } from '@theme-ui/style-guide'
 
 export default (props) => (