text: /** @jsx jsx */
  import { jsx, Themed, components, Select } from 'theme-ui'
  import { ThemeContext } from '@emotion/react'
  import { MDXProvider } from '@mdx-js/react'
  import { useState } from 'react'
  import { Helmet } from 'react-helmet'
  import * as presets from '@theme-ui/presets'
  import {
    TypeScale,
    TypeStyle,
    HeadingStyle,
    ColorPalette,
    FontFamily,
  } from '@theme-ui/style-guide'
  import Lorem from './lorem.mdx'
  
  export default function PresetsDemo() {
    const [theme, setTheme] = useState('base')
    const preset = presets[theme]
  
    return (
      <div>
        <Helmet>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Poppins:400,700,900|Roboto:400,600|Architects+Daughter"
          />
        </Helmet>
        <div
          sx={{
            '*': {
              transition: 'all .2s ease-out',
            },
          }}
        >
          <label
            htmlFor="theme"
            sx={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              mb: 4,
              gap: 2,
            }}
          >
            <span>Preset:</span>
            <Select
              id="theme"
              sx={{ display: 'inline-flex' }}
              value={theme}
              onChange={(e) => {
                setTheme(e.target.value)
              }}
            >
              {Object.keys(presets).map((key) => (
                <option key={key} children={key} />
              ))}
            </Select>
          </label>
          <ThemeContext.Provider value={preset}>
            <Themed.root sx={{ bg: 'background', color: 'text', p: 3 }}>
              <Themed.h2>Colors</Themed.h2>
              <ColorPalette omit={['modes', 'header']} />
              <Themed.h2>Typography</Themed.h2>
              <TypeStyle fontSize={7}>
                Body: <FontFamily name="body" />
              </TypeStyle>
              <HeadingStyle
                fontFamily="heading"
                fontWeight="heading"
                lineHeight="heading"
                fontSize={7}
              >
                Heading: <FontFamily name="heading" />
              </HeadingStyle>
              <Themed.h2>Type Scale</Themed.h2>
              <TypeScale />
              <MDXProvider components={components}>
                <Lorem />
              </MDXProvider>
              <Themed.h2 id="json">Raw JSON</Themed.h2>
              <textarea
                value={JSON.stringify(preset, null, 2)}
                rows={16}
                readOnly
                aria-labelledby="json"
                sx={{
                  width: '100%',
                  fontFamily: 'monospace',
                  bg: 'muted',
                  border: 0,
                  borderRadius: 4,
                }}
              />
            </Themed.root>
          </ThemeContext.Provider>
        </div>
      </div>
    )
  }
  