@primer/gatsby-theme-doctocat 3.2.0 → 4.0.0

package/.eslintrc.json

@@ -20,6 +20,7 @@
     "react/prop-types": "off",
     "react/display-name": "off",
     "eslint-comments/no-use": "off",
-    "no-shadow": "off"
+    "no-shadow": "off",
+    "primer-react/no-system-props": ["warn", {"includeUtilityComponents": true}]
   }
 }

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @primer/gatsby-theme-doctocat
 
+## 4.0.0
+
+### Major Changes
+
+- [`1022d1c`](https://github.com/primer/doctocat/commit/1022d1c92588f1e4fed4bdacec30fd5d11256412) [#362](https://github.com/primer/doctocat/pull/362) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Drop support for node 12
+
+* [`5f4426c`](https://github.com/primer/doctocat/commit/5f4426cc0cec6201600241bc753e5c7c9bf188a6) [#427](https://github.com/primer/doctocat/pull/427) Thanks [@colebemis](https://github.com/colebemis)! - Items in [`nav.yml`](https://primer.style/doctocat/usage/customization#side-navigation) that contain `children` no longer render as links, meaning the `url` property will be ignored.
+
+  ```diff
+  # nav.yml
+  – title: Components
+  - url: /components
+    children:
+     — title: Avatar
+       url: /Avatar
+  ```
+
+### Patch Changes
+
+- [`facde5a`](https://github.com/primer/doctocat/commit/facde5a56119b160f98b8b01302e3508392c2146) [#330](https://github.com/primer/doctocat/pull/330) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Vertically-center align images in table
+
+## 3.3.0
+
+### Minor Changes
+
+- [`82bd051`](https://github.com/primer/doctocat/commit/82bd051ab35e5939a9ad5a3e89c26e2a63ce5df2) [#376](https://github.com/primer/doctocat/pull/376) Thanks [@vdepizzol](https://github.com/vdepizzol)! - New visual styles for Do/Dont components
+
+### Patch Changes
+
+- [`0d35f17`](https://github.com/primer/doctocat/commit/0d35f17a34ebfc468e15a23783a55379b8f0e125) [#402](https://github.com/primer/doctocat/pull/402) Thanks [@ichelsea](https://github.com/ichelsea)! - Added underlines to links in markdown documents
+
+## 3.2.1
+
+### Patch Changes
+
+- [`1c0ca36`](https://github.com/primer/doctocat/commit/1c0ca368ed9a61ac79eb6e47ff7208c0d5b038d2) [#361](https://github.com/primer/doctocat/pull/361) Thanks [@colebemis](https://github.com/colebemis)! - Refactor internals to not use deprecated Primer React components
+
+* [`ac6de57`](https://github.com/primer/doctocat/commit/ac6de57fdf7629eb74b9246f6ac62f97bca0d4a4) [#334](https://github.com/primer/doctocat/pull/334) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Upgrade from `@primer/components@30.0.0` to `@primer/react@34.5.0`
+
 ## 3.2.0
 
 ### Minor Changes
@@ -175,4 +214,4 @@
 
 - [`5fb29c9`](https://github.com/primer/doctocat/commit/5fb29c9000dd2a26919f661d969142fa1938d329) [#187](https://github.com/primer/doctocat/pull/187) Thanks [@mvasilkov](https://github.com/mvasilkov)! - Fix typo in an internal import
 
-* [`cab38c3`](https://github.com/primer/doctocat/commit/cab38c38eb00a9645991147b28a47a535dcd1d41) [#190](https://github.com/primer/doctocat/pull/190) Thanks [@colebemis](https://github.com/colebemis)! - Update the navigation dropdown icon from a `chrevon` to a `caret` to follow our [progressive disclosure guidelines](https://primer.style/design/ui-patterns/progressive-disclosure#progressive-disclosure-ui-patterns)
+* [`cab38c3`](https://github.com/primer/doctocat/commit/cab38c38eb00a9645991147b28a47a535dcd1d41) [#190](https://github.com/primer/doctocat/pull/190) Thanks [@colebemis](https://github.com/colebemis)! - Update the navigation dropdown icon from a `chevron` to a `caret` to follow our [progressive disclosure guidelines](https://primer.style/design/ui-patterns/progressive-disclosure#progressive-disclosure-ui-patterns)

package/babel.config.js

@@ -1,3 +1,13 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react']
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ],
+    '@babel/preset-react'
+  ]
 }

package/gatsby-node.js

@@ -30,7 +30,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
     }
   `)
 
-  if (!process.env.GITHUB_TOKEN && !process.env.NOW_GITHUB_DEPLOYMENT && !process.env.VERCEL_GITHUB_DEPLOYMENT) {
+  if (!process.env.GITHUB_TOKEN) {
     console.error(`Non-deploy build and no GITHUB_TOKEN environment variable set; skipping GitHub API calls`)
   }
 
@@ -48,7 +48,7 @@ exports.createPages = async ({graphql, actions}, themeOptions) => {
       const editUrl = getEditUrl(repo, fileRelativePath, defaultBranch)
 
       let contributors = []
-      if (process.env.GITHUB_TOKEN || process.env.NOW_GITHUB_DEPLOYMENT || process.env.VERCEL_GITHUB_DEPLOYMENT) {
+      if (process.env.GITHUB_TOKEN) {
         contributors = await fetchContributors(repo, fileRelativePath, process.env.GITHUB_TOKEN)
       }
 

package/jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js'],
-  setupFilesAfterEnv: ['<rootDir>/setup-tests.js']
+  setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
+  transformIgnorePatterns: ['/node_modules/(?!@primer/behaviors)']
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -15,9 +15,9 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-primer-react": "0.5",
+    "eslint-plugin-primer-react": "0.7.4",
     "eslint-plugin-react": "^7.26.1",
-    "gatsby": "^2.24.52",
+    "gatsby": "^2.32.13",
     "prettier": "^2.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
@@ -33,18 +33,18 @@
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
     "@primer/component-metadata": "^0.4.0",
-    "@primer/components": "^30.0.0",
-    "@primer/octicons-react": "^16.0.0",
+    "@primer/octicons-react": "^16.3.1",
+    "@primer/react": "^35.2.2",
     "@styled-system/theme-get": "^5.0.12",
-    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^9.1.3",
     "axios": "^0.21.2",
     "babel-jest": "^24.9.0",
     "copy-to-clipboard": "^3.2.0",
-    "date-fns": "^2.0.1",
+    "date-fns": "^2.28.0",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^3.2.10",
-    "find-up": "^4.1.0",
+    "find-up": "^6.3.0",
     "framer-motion": "^1.4.2",
     "fuse.js": "^3.4.5",
     "gatsby-plugin-catch-links": "^2.1.2",
@@ -66,12 +66,12 @@
     "pluralize": "^8.0.0",
     "preval.macro": "^3.0.0",
     "prism-react-renderer": "^1.2.0",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",
     "react-focus-on": "^3.3.0",
-    "react-frame-component": "^4.1.1",
-    "react-helmet": "^5.2.1",
+    "react-frame-component": "^5.2.1",
+    "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",
     "read-pkg-up": "^6.0.0",

package/setup-tests.js

@@ -1 +1,10 @@
 import '@testing-library/jest-dom/extend-expect'
+
+// JSDOM doesn't mock ResizeObserver
+// Copied from https://github.com/primer/react/blob/3fdae477d8067c5131d316548ce5b08aa1017355/src/utils/test-helpers.tsx
+global.ResizeObserver = jest.fn().mockImplementation(() => {
+  return {
+    observe: jest.fn(),
+    disconnect: jest.fn()
+  }
+})

package/src/components/caption.js

@@ -1,8 +1,8 @@
-import {Text} from '@primer/components'
+import {Text} from '@primer/react'
 import React from 'react'
 
 function Caption(props) {
-  return <Text as="p" mt={2} mb={3} fontSize={1} color="gray.5" {...props} />
+  return <Text as="p" {...props} sx={{mt: 2, mb: 3, fontSize: 1, color: 'gray.5'}} />
 }
 
 export default Caption

package/src/components/clipboard-copy.js

@@ -1,4 +1,4 @@
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, StyledOcticon} from '@primer/react'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
 import copy from 'copy-to-clipboard'
 import React from 'react'

package/src/components/code.js

@@ -1,8 +1,8 @@
-import {Absolute, Box, Relative, Text} from '@primer/components'
+import {Box, Text} from '@primer/react'
 import Highlight, {defaultProps} from 'prism-react-renderer'
-import Prism from '../prism'
-import githubTheme from '../github'
 import React from 'react'
+import githubTheme from '../github'
+import Prism from '../prism'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
@@ -15,41 +15,38 @@ function Code({className, children, live, noinline, metastring}) {
   }
 
   return (
-    <Relative
+    <Box
       sx={{
         // Make <pre> adjust to the width of the container
         // https://stackoverflow.com/a/14406386
         display: 'table',
         tableLayout: 'fixed',
-        width: '100%'
+        width: '100%',
+        position: 'relative'
       }}
     >
-      <Absolute sx={{top: 0, right: 0, p: 2}}>
+      <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
         <ClipboardCopy value={code} />
-      </Absolute>
+      </Box>
       <Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>
         {({className, style, tokens, getLineProps, getTokenProps}) => (
           <Box
             as="pre"
             className={className}
-            mt={0}
-            mb={3}
-            p={3}
-            border={0}
             style={{...style, overflow: 'auto'}}
-            sx={{borderRadius: 2}}
+            sx={{borderRadius: 2, mt: 0, mb: 3, p: 3, border: 0}}
           >
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({line, key: i})}>
                 {line.map((token, key) => (
-                  <Text key={key} fontFamily="mono" fontSize={1} {...getTokenProps({token, key})} />
+                  <Text key={key} {...getTokenProps({token, key})} sx={{fontFamily: 'mono', fontSize: 1}} />
                 ))}
               </div>
             ))}
           </Box>
         )}
       </Highlight>
-    </Relative>
+    </Box>
   )
 }
 

package/src/components/container.js

@@ -1,9 +1,9 @@
-import {Box} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 
 function Container({children}) {
   return (
-    <Box id="skip-nav" width="100%" maxWidth={960} p={5} mx="auto">
+    <Box id="skip-nav" sx={{width: '100%', maxWidth: 960, p: 5, mx: 'auto'}}>
       {children}
     </Box>
   )

package/src/components/contributors.js

@@ -1,4 +1,4 @@
-import {Avatar, Box, Link, Text, Tooltip} from '@primer/components'
+import {Avatar, Box, Link, Text, Tooltip} from '@primer/react'
 import {format} from 'date-fns'
 import uniqBy from 'lodash.uniqby'
 import pluralize from 'pluralize'
@@ -12,8 +12,8 @@ function Contributors({contributors}) {
 
   return (
     <div>
-      <Box display="flex" alignItems="center">
-        <Text mr={2}>
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Text sx={{mr: 2}}>
           {uniqueContributors.length} {pluralize('contributor', uniqueContributors.length)}
         </Text>
         {uniqueContributors.map(contributor => (
@@ -30,7 +30,7 @@ function Contributors({contributors}) {
       </Box>
 
       {latestContributor.latestCommit ? (
-        <Text fontSize={1} color="fg.muted" mt={1}>
+        <Text sx={{fontSize: 1, color: 'fg.muted', mt: 1}}>
           Last edited by <Link href={`https://github.com/${latestContributor.login}`}>{latestContributor.login}</Link>{' '}
           on{' '}
           <Link href={latestContributor.latestCommit.url}>

package/src/components/details.js

@@ -9,7 +9,7 @@ if (typeof window !== 'undefined') {
   import('details-element-polyfill')
 }
 
-// TODO: Replace this Details component with the one from @primer/components when 14.0.0 is released.
+// TODO: Replace this Details component with the one from @primer/react when 14.0.0 is released.
 // Reference: https://github.com/primer/components/pull/499
 
 const DetailsReset = styled.details`

package/src/components/do-dont.js

@@ -1,10 +1,9 @@
-import {Box, StyledOcticon, Text} from '@primer/components'
-import {CheckCircleFillIcon, XCircleFillIcon} from '@primer/octicons-react'
+import {Box, StyledOcticon, Text} from '@primer/react'
 import React from 'react'
 
 export function DoDontContainer({stacked, children}) {
   return (
-    <Box display="grid" gridTemplateColumns={['1fr', null, stacked ? '1fr' : '1fr 1fr']} gridGap={4} mb={4}>
+    <Box sx={{display: 'grid', gridTemplateColumns: ['1fr', null, stacked ? '1fr' : '1fr 1fr'], gridGap: 4, mb: 4}}>
       {children}
     </Box>
   )
@@ -15,24 +14,48 @@ DoDontContainer.defaultProps = {
 }
 
 export function Do(props) {
-  return <DoDontBase {...props} title="Do" icon={CheckCircleFillIcon} iconBg="success.fg" />
+  return <DoDontBase {...props} title="Do" bg="success.fg" borderColor="success.muted" />
 }
 
 export function Dont(props) {
-  return <DoDontBase {...props} title="Don't" icon={XCircleFillIcon} iconBg="danger.fg" />
+  return <DoDontBase {...props} title="Don’t" bg="danger.fg" borderColor="danger.muted" />
 }
 
-function DoDontBase({children, title, icon: Icon, iconBg}) {
+function DoDontBase({children, title, bg, borderColor, indented}) {
   return (
-    <Box display="flex" flexDirection="column">
-      <Box display="flex" alignSelf="start" flexDirection="row" alignItems="center" mb="2">
-        <StyledOcticon icon={Icon} sx={{color: iconBg}} />
-        <Text fontWeight="bold" color="fg.default" ml={2}>
-          {title}
-        </Text>
+    <Box sx={{display: 'flex', flexDirection: 'column'}}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignSelf: 'start',
+          flexDirection: 'row',
+          alignItems: 'center',
+          mb: '2',
+          backgroundColor: bg,
+          borderRadius: '2',
+          color: 'fg.onEmphasis',
+          paddingX: '2'
+        }}
+      >
+        <Text sx={{fontWeight: 'bold', fontSize: '1', color: 'fg.onEmphasis'}}>{title}</Text>
       </Box>
-      <Box display="flex" flexDirection="column" sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}}}>
-        {children}
+      <Box sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}, display: 'flex', flexDirection: 'column'}}>
+        {indented ? (
+          <Box
+            as="blockquote"
+            sx={{
+              margin: '0',
+              borderLeftWidth: '4px',
+              borderLeftStyle: 'solid',
+              borderLeftColor: borderColor,
+              paddingLeft: '3'
+            }}
+          >
+            {children}
+          </Box>
+        ) : (
+          children
+        )}
       </Box>
     </Box>
   )

package/src/components/drawer.js

@@ -1,4 +1,4 @@
-import {Fixed} from '@primer/components'
+import {Box} from '@primer/react'
 import {AnimatePresence, motion} from 'framer-motion'
 import React from 'react'
 import {FocusOn} from 'react-focus-on'
@@ -16,7 +16,7 @@ function Drawer({isOpen, onDismiss, children}) {
           onClick={event => event.target.focus()}
         >
           <FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
-            <Fixed
+            <Box
               key="overlay"
               as={motion.div}
               initial={{opacity: 0}}
@@ -24,10 +24,10 @@ function Drawer({isOpen, onDismiss, children}) {
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
               onClick={() => onDismiss()}
-              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)'}}
+              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)', position: 'fixed'}}
             />
 
-            <Fixed
+            <Box
               key="drawer"
               as={motion.div}
               initial={{x: '100%'}}
@@ -35,10 +35,10 @@ function Drawer({isOpen, onDismiss, children}) {
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
               style={{zIndex: 1}}
-              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0'}}
+              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0', position: 'fixed'}}
             >
               {children}
-            </Fixed>
+            </Box>
           </FocusOn>
         </div>
       ) : null}

package/src/components/header.js

@@ -1,5 +1,5 @@
-import {Box, Button, Link, Sticky, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/components'
 import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
+import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
 import primerNavItems from '../primer-nav.yml'
@@ -18,16 +18,18 @@ function Header({isSearchEnabled}) {
   const siteMetadata = useSiteMetadata()
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <Sticky>
+      <Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
         <Box
-          display="flex"
-          height={HEADER_HEIGHT}
-          px={[3, null, null, 4]}
-          alignItems="center"
-          justifyContent="space-between"
-          bg="canvas.default"
+          sx={{
+            display: 'flex',
+            height: HEADER_HEIGHT,
+            px: [3, null, null, 4],
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            bg: 'canvas.default'
+          }}
         >
-          <Box display="flex" alignItems="center">
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
             <Link
               href="https://primer.style"
               sx={{
@@ -57,7 +59,9 @@ function Header({isSearchEnabled}) {
 
             {siteMetadata.shortName ? (
               <>
-                <Text display={['none', null, null, 'inline-block']} color="accent.fg" fontFamily="mono" mx={2}>
+                <Text
+                  sx={{display: ['none', null, null, 'inline-block'], color: 'accent.fg', fontFamily: 'mono', mx: 2}}
+                >
                   /
                 </Text>
                 <Link
@@ -74,16 +78,16 @@ function Header({isSearchEnabled}) {
             ) : null}
 
             {isSearchEnabled ? (
-              <Box display={['none', null, null, 'block']} ml={4}>
+              <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
                 <Search />
               </Box>
             ) : null}
           </Box>
           <Box>
-            <Box display={['none', null, null, 'block']}>
+            <Box sx={{display: ['none', null, null, 'block']}}>
               <PrimerNavItems items={primerNavItems} />
             </Box>
-            <Box display={['flex', null, null, 'none']}>
+            <Box sx={{display: ['flex', null, null, 'none']}}>
               {isSearchEnabled ? (
                 <>
                   <Button
@@ -113,7 +117,7 @@ function Header({isSearchEnabled}) {
             </Box>
           </Box>
         </Box>
-      </Sticky>
+      </Box>
     </ThemeProvider>
   )
 }
@@ -124,11 +128,11 @@ Header.defaultProps = {
 
 function PrimerNavItems({items}) {
   return (
-    <Box display="flex" alignItems="center" color="fg.default">
+    <Box sx={{display: 'flex', alignItems: 'center', color: 'fg.default'}}>
       {items.map((item, index) => {
         if (item.children) {
           return (
-            <Box ml={4} key={index}>
+            <Box key={index} sx={{ml: 4}}>
               <NavDropdown title={item.title}>
                 {item.children.map(child => (
                   <NavDropdownItem key={child.title} href={child.url}>

package/src/components/heading.js

@@ -1,4 +1,4 @@
-import {Heading, Link} from '@primer/components'
+import {Heading, Link} from '@primer/react'
 import {LinkIcon} from '@primer/octicons-react'
 import themeGet from '@styled-system/theme-get'
 import GithubSlugger from 'github-slugger'

package/src/components/hero-layout.js

@@ -1,10 +1,10 @@
-import {Box, Flex} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 import Container from './container'
-import PageFooter from './page-footer'
 import Head from './head'
 import Header from './header'
 import Hero from './hero'
+import PageFooter from './page-footer'
 import Sidebar from './sidebar'
 
 function HeroLayout({children, pageContext}) {
@@ -15,14 +15,14 @@ function HeroLayout({children, pageContext}) {
   }
 
   return (
-    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
+    <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
       <Head />
       <Header />
-      <Flex sx={{flex: '1 1 auto', flexDirection: 'row'}}>
-        <Box display={['none', null, null, 'block']}>
+      <Box sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
+        <Box sx={{display: ['none', null, null, 'block']}}>
           <Sidebar />
         </Box>
-        <Box width="100%">
+        <Box sx={{width: '100%'}}>
           <Hero />
           <Container>
             {children}
@@ -32,8 +32,8 @@ function HeroLayout({children, pageContext}) {
             />
           </Container>
         </Box>
-      </Flex>
-    </Flex>
+      </Box>
+    </Box>
   )
 }
 

package/src/components/hero.js

@@ -1,4 +1,4 @@
-import {Box, Heading, Text, ThemeProvider} from '@primer/components'
+import {Box, Heading, Text, ThemeProvider} from '@primer/react'
 import React from 'react'
 import useSiteMetadata from '../use-site-metadata'
 import Container from './container'
@@ -8,12 +8,12 @@ function Hero() {
 
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <Box bg="canvas.default" py={6}>
+      <Box sx={{bg: 'canvas.default', py: 6}}>
         <Container>
           <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
             {title}
           </Heading>
-          <Text as="p" m={0} color="fg.default" fontSize={4}>
+          <Text as="p" sx={{m: 0, color: 'fg.default', fontSize: 4}}>
             {description}
           </Text>
         </Container>

package/src/components/image-container.js

@@ -1,11 +1,20 @@
-import {BorderBox, Flex} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 
 function ImageContainer({children}) {
   return (
-    <BorderBox sx={{p: 6, bg: 'gray.1'}}>
-      <Flex sx={{img: {maxWidth: '100%'}, justifyContent: 'center'}}>{children}</Flex>
-    </BorderBox>
+    <Box
+      sx={{
+        p: 6,
+        bg: 'gray.1',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'border.default',
+        borderRadius: 2
+      }}
+    >
+      <Box sx={{img: {maxWidth: '100%'}, justifyContent: 'center', display: 'flex'}}>{children}</Box>
+    </Box>
   )
 }