@primer/doctocat-nextjs 0.7.1-rc.a9c9ea3 → 0.8.0-rc.abeed68

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # @primer/doctocat-nextjs
 
-## 0.7.1
+## 0.8.0
+
+### Minor Changes
+
+- [#73](https://github.com/primer/doctocat-nextjs/pull/73) [`a06099d`](https://github.com/primer/doctocat-nextjs/commit/a06099d65d36bdb361fc9a20b2b811990bb6d353) Thanks [@danielguillan](https://github.com/danielguillan)! - Add React 19 support
+
+  This update is backwards compatible with React 18. However, it upgrades `@primer/react` to v38, which includes breaking changes such as the removal of the `Box` component and `sx` prop. Projects using this theme may need to update their code accordingly.
+  - Updated React peer dependency to support React 19
+  - Updated @primer/react from v37.11.2 to v38.3.0
+  - Updated `@primer/react-brand` from v0.54.0 to v0.60.1
+  - Updated `framer-motion` from v12.4.0 to v12.23.24
+  - Updated `react-focus-on` from v3.9.4 to v3.10.0
+  - Migrated `Label` components to `Token` for React 19 compatibility
+  - Fixed type errors in `ReactCodeBlock` and `getRelatedPages` for stricter React 19 types
+  - Added explicit `as="button"` to `IconButton` and `as="input"` to `TextInput` components
+  - Updated Next.js and related packages from v15.5.2 to v15.5.7
 
 ### Patch Changes
 
@@ -11,7 +26,6 @@
 ### Minor Changes
 
 - [#65](https://github.com/primer/doctocat-nextjs/pull/65) [`dc680ec`](https://github.com/primer/doctocat-nextjs/commit/dc680ec51605bd7a40dedc71cd3bb107632035dd) Thanks [@rezrah](https://github.com/rezrah)! - Updated Next.js compatibility to v15.5.x, Nextra to v4, and fix React code block rendering
-
   - **Next.js v15.5.2**: Upgraded to latest stable version across all workspaces
   - **Nextra v4 compatibility**: Updated type definitions for `ReactNode` titles
   - **Fixed code block rendering**: Added client-side rendering for interactive code examples to handle React lazy components properly
@@ -69,7 +83,6 @@
   ```
 
 - [#48](https://github.com/primer/doctocat-nextjs/pull/48) [`ce73c24`](https://github.com/primer/doctocat-nextjs/commit/ce73c24b2e4e924667bf7446a504bd88d8f2ccf0) Thanks [@rezrah](https://github.com/rezrah)! - - Fix inline code font-size in markdown headings. Now inherits size used in the heading.
-
   - Increased spacing below React code blocks, which was previously too small.
 
 - [#50](https://github.com/primer/doctocat-nextjs/pull/50) [`5d67989`](https://github.com/primer/doctocat-nextjs/commit/5d679895408c1a58342419692db4234dfddefd80) Thanks [@rezrah](https://github.com/rezrah)! - Add `menu-position` frontmatter support for custom sidebar navigation ordering
@@ -87,7 +100,6 @@
 ### Patch Changes
 
 - [#41](https://github.com/primer/doctocat-nextjs/pull/41) [`e1ffb3a`](https://github.com/primer/doctocat-nextjs/commit/e1ffb3a630c51316a19e25869f731b4ef3660d2b) Thanks [@danielguillan](https://github.com/danielguillan)! - - Updated sidebar styles.
-
   - Added active header link as sidebar heading.
   - Made active header the root item of breadcrumbs, if available.
   - Made sidebar group headlines link to the index page.
@@ -111,7 +123,6 @@
 ### Minor Changes
 
 - [#30](https://github.com/primer/doctocat-nextjs/pull/30) [`cdcb65e`](https://github.com/primer/doctocat-nextjs/commit/cdcb65e087d647a6d61c87d9122f105dcda64e35) Thanks [@joshfarrant](https://github.com/joshfarrant)! - - Arbitrary links can now be added to the sidebar and header using the `Theme` component's `headerLinks` and `sidebarLinks` props.
-
   - Updated the header navigation to more closely visually align it with the existing Primer docs navigation.
   - Removed `_meta.global.ts` and instead directly pass header and sidebar links into the Doctocat `Theme` component.
 
@@ -141,7 +152,6 @@
 ### Patch Changes
 
 - [#34](https://github.com/primer/doctocat-nextjs/pull/34) [`ccf198c`](https://github.com/primer/doctocat-nextjs/commit/ccf198cca25b1f021c5ae78b8e2760c141a77dcc) Thanks [@rezrah](https://github.com/rezrah)! - Collection of UI bugfixes:
-
   - Sidebar offset added to prevent links being trapped under fixed header
   - Narrow viewport overflow bug fixed
   - Table of contents presentation fixed on narrow viewport, and has improved presentation on wider breakpoints.
@@ -190,7 +200,6 @@
 ### Minor Changes
 
 - [#20](https://github.com/primer/doctocat-nextjs/pull/20) [`be8bc6a`](https://github.com/primer/doctocat-nextjs/commit/be8bc6af733ba40bdd4393b876b2653017d7e846) Thanks [@rezrah](https://github.com/rezrah)! - Dropped support for Next.js Pages router in favor of App Router + Nextra v4
-
   - [Read the migration guide from `v0.1.0` to `v0.2.0`](https://github.com/primer/doctocat-nextjs/blob/main/migration-guides/v0.2.0-app-router.md)
 
 ## 0.1.0
@@ -200,7 +209,6 @@
 - [#18](https://github.com/primer/doctocat-nextjs/pull/18) [`bfe68b1`](https://github.com/primer/doctocat-nextjs/commit/bfe68b14e8e3b4383ea41dcbf47373df8a130567) Thanks [@rezrah](https://github.com/rezrah)! - Upgraded internal framework to [Nextra v3](https://the-guild.dev/blog/nextra-3).
 
   To migrate Doctocat to this release, follow these steps:
-
   1. Install the latest version `npm i @primer/doctocat-nextjs@0.1.0`
   2. Rename your `next.config.js` to be `next.config.mjs`. Add `type="module"` to your `package.json` and update the file contents to match the following:
 
@@ -276,7 +284,6 @@
 - [`6f21970`](https://github.com/primer/doctocat-nextjs/commit/6f21970c74f7635be89fc4cd20376d7fe5ca35e7) Thanks [@rezrah](https://github.com/rezrah)! - Switch hero image order with description and reduce `h2` block start margin
 
 - [#6](https://github.com/primer/doctocat-nextjs/pull/6) [`afd4e17`](https://github.com/primer/doctocat-nextjs/commit/afd4e1762f6294a14942d415c693319a874cd3fb) Thanks [@rezrah](https://github.com/rezrah)! - - Add MDX to HTML overrides mechanism and apply to headings and anchors
-
   - Added anchor links to headings to match current functionality on primer.style
 
 - [`b49f218`](https://github.com/primer/doctocat-nextjs/commit/b49f218e9bbc2de720476e21888956bee6081967) Thanks [@rezrah](https://github.com/rezrah)! - Removed sidebar links and added skip to main content a11y link

package/components/content/caption/Caption.module.css

@@ -0,0 +1,6 @@
+.Caption {
+  margin-top: var(--base-size-8);
+  margin-bottom: var(--base-size-12);
+  font-size: var(--brand-text-size-100);
+  color: var(--brand-color-text-default);
+}

package/components/content/caption/Caption.tsx

@@ -1,6 +1,11 @@
 import React, {PropsWithChildren} from 'react'
-import {Text} from '@primer/react'
+import styles from './Caption.module.css'
 
 export function Caption(props: PropsWithChildren) {
-  return <Text as="span" {...props} sx={{mt: 2, mb: 3, fontSize: 1, color: 'var(--brand-color-text-default)'}} />
+  const {children, ...rest} = props
+  return (
+    <span className={styles.Caption} {...rest}>
+      {children}
+    </span>
+  )
 }

package/components/content/dos-and-donts/DosAndDonts.module.css

@@ -39,6 +39,10 @@
   color: var(--base-color-scale-white-0);
 }
 
+.header {
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+}
+
 .content {
   display: flex;
   flex-direction: column;
@@ -55,6 +59,6 @@
 
 .indentedContent {
   margin: 0;
-  border-left: 4px solid;
+  border-left: 4px solid var(--brand-color-border-default);
   padding-left: 1rem;
 }

package/components/content/dos-and-donts/DosAndDonts.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {Box} from '@primer/react'
 import clsx from 'clsx'
 import styles from './DosAndDonts.module.css'
 
@@ -39,22 +38,11 @@ type DoDontBaseProps = {
 export function DoDontBase({children, title, indented, className, ...rest}: React.PropsWithChildren<DoDontBaseProps>) {
   return (
     <div className={clsx(`exclude-from-prose`, styles.doDontBase, className)} {...rest}>
-      <Box
-        className={styles.header}
-        sx={{
-          color: 'var(--fgColor-onEmphasis, var(--color-fg-on-emphasis))',
-        }}
-      >
+      <div className={styles.header}>
         <span className={styles.headerText}>{title}</span>
-      </Box>
+      </div>
       <div className={styles.content}>
-        {indented ? (
-          <blockquote className={styles.indentedContent} style={{borderLeftColor: 'var(--brand-color-border-default)'}}>
-            {children}
-          </blockquote>
-        ) : (
-          children
-        )}
+        {indented ? <blockquote className={styles.indentedContent}>{children}</blockquote> : children}
       </div>
     </div>
   )

package/components/layout/article/AccessibilityLabel.module.css

@@ -1,10 +1,6 @@
 .reviewedLabel {
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-8);
   background-color: var(--base-color-scale-purple-0);
-  border-color: transparent;
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-default) !important;
   font-weight: var(--brand-text-weight-300);
 }
 

package/components/layout/article/AccessibilityLabel.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {Label} from '@primer/react'
+import {Token} from '@primer/react'
 import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import React from 'react'
 
@@ -11,9 +11,12 @@ type AccessibilityLabelProps = {
 
 export function AccessibilityLabel({short}: AccessibilityLabelProps) {
   return (
-    <Label size="large" className={styles.reviewedLabel}>
-      <AccessibilityInsetIcon className={styles.icon} />
-      {short ? 'Reviewed' : 'Reviewed for accessibility'}
-    </Label>
+    <Token
+      as="span"
+      size="large"
+      className={styles.reviewedLabel}
+      leadingVisual={() => <AccessibilityInsetIcon className={styles.icon} aria-hidden="true" />}
+      text={short ? 'Reviewed' : 'Reviewed for accessibility'}
+    />
   )
 }

package/components/layout/article/ReadinessLabel.module.css

@@ -1,10 +1,6 @@
 .label {
-  display: flex;
-  align-items: center;
-  gap: var(--base-size-8);
   background-color: var(--base-color-scale-green-0);
-  border-color: transparent;
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-default) !important;
   font-weight: var(--brand-text-weight-300);
 }
 

package/components/layout/article/ReadinessLabel.tsx

@@ -1,15 +1,18 @@
 'use client'
 import React from 'react'
-import {Label} from '@primer/react'
+import {Token} from '@primer/react'
 import {CheckIcon} from '@primer/octicons-react'
 
 import styles from './ReadinessLabel.module.css'
 
 export function ReadinessLabel() {
   return (
-    <Label size="large" className={styles.label}>
-      <CheckIcon className={styles.icon} />
-      Ready to use
-    </Label>
+    <Token
+      as="span"
+      size="large"
+      className={styles.label}
+      leadingVisual={() => <CheckIcon className={styles.icon} aria-hidden="true" />}
+      text="Ready to use"
+    />
   )
 }

package/components/layout/code-block/ReactCodeBlock.tsx

@@ -205,13 +205,13 @@ export function ReactCodeBlock(props: ReactCodeBlockProps) {
  * Helper function to turn Nextra <code> children into plain text
  */
 function getCodeFromChildren(children: React.ReactNode) {
-  if (!React.isValidElement(children) || !children.props?.children) return ''
-
-  // Flattens the nested spans and combine their text content if it's a react child
   const extractText = (node: React.ReactNode): string => {
     if (typeof node === 'string') return node
     if (Array.isArray(node)) return node.map(extractText).join('')
-    if (React.isValidElement(node) && node.props?.children) return extractText(node.props.children)
+    if (React.isValidElement(node)) {
+      const element = node as React.ReactElement<{children?: React.ReactNode}>
+      return extractText(element.props.children)
+    }
     return ''
   }
 

package/components/layout/global-search/GlobalSearch.tsx

@@ -170,6 +170,7 @@ export const GlobalSearch = forwardRef<HTMLInputElement, GlobalSearchProps>(
         <FormControl>
           <FormControl.Label visuallyHidden>Search</FormControl.Label>
           <TextInput
+            as="input"
             contrast
             type="search"
             className={styles.GlobalSearch__searchInput}

package/components/layout/header/Header.tsx

@@ -109,7 +109,13 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
                 <Text as="p" size="300" weight="semibold">
                   Search
                 </Text>
-                <IconButton icon={XIcon} variant="invisible" aria-label="Close search" onClick={closeSearch} />
+                <IconButton
+                  as="button"
+                  icon={XIcon}
+                  variant="invisible"
+                  aria-label="Close search"
+                  onClick={closeSearch}
+                />
               </Stack>
             </div>
           </FocusOn>
@@ -117,12 +123,14 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
         <div>
           <Stack direction="horizontal" padding="none" gap={4}>
             <IconButton
+              as="button"
               icon={colorMode === 'light' ? SunIcon : MoonIcon}
               variant="invisible"
               aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
               onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
             />
             <IconButton
+              as="button"
               ref={searchTriggerRef}
               className={styles.Header__searchButton}
               icon={SearchIcon}
@@ -132,6 +140,7 @@ export function Header({siteTitle, flatDocsDirectories, pageMap}: HeaderProps) {
             />
             <div className={styles.Header__navDrawerContainer}>
               <IconButton
+                as="button"
                 icon={ThreeBarsIcon}
                 variant="invisible"
                 aria-label="Menu"

package/components/layout/nav-drawer/Drawer.module.css

@@ -0,0 +1,19 @@
+.DrawerOverlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.DrawerPanel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 300px;
+  background: var(--brand-color-canvas-default, var(--color-canvas-default));
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+}
+

package/components/layout/nav-drawer/Drawer.tsx

@@ -1,7 +1,7 @@
 import React, {PropsWithChildren} from 'react'
-import {Box} from '@primer/react'
 import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
+import styles from './Drawer.module.css'
 
 type Drawer = {
   isOpen: boolean
@@ -22,29 +22,26 @@ export function Drawer({isOpen, onDismiss, children}: PropsWithChildren<Drawer>)
           tabIndex={0}
         >
           <FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
-            <Box
+            <motion.div
               key="overlay"
-              as={motion.div}
+              className={styles.DrawerOverlay}
               initial={{opacity: 0}}
               animate={{opacity: 1}}
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
               onClick={() => onDismiss()}
-              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)', position: 'fixed', zIndex: 1}}
             />
 
-            <Box
+            <motion.div
               key="drawer"
-              as={motion.div}
+              className={styles.DrawerPanel}
               initial={{x: '100%'}}
               animate={{x: 0}}
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
-              style={{zIndex: 1}}
-              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0', position: 'fixed'}}
             >
               {children}
-            </Box>
+            </motion.div>
           </FocusOn>
         </div>
       ) : null}

package/components/layout/nav-drawer/NavDrawer.tsx

@@ -26,7 +26,7 @@ export function NavDrawer({isOpen, onDismiss, pageMap}: NavDrawerProps) {
               <Link as={NextLink} href="https://primer.style" className={styles.headerLink}>
                 Explore
               </Link>
-              <IconButton icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
+              <IconButton as="button" icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />
             </div>
           </div>
           <div className={styles.navContainer}>{/* <PrimerNavItems items={primerNavItems} /> */}</div>

package/components/layout/related-content-links/getRelatedPages.tsx

@@ -66,8 +66,11 @@ function titleToString(title: React.ReactNode): string {
       if (typeof child === 'string' || typeof child === 'number') {
         return child.toString()
       }
-      if (React.isValidElement(child) && child.props.children) {
-        return titleToString(child.props.children)
+      if (React.isValidElement(child)) {
+        const element = child as React.ReactElement<{children?: React.ReactNode}>
+        if (element.props.children) {
+          return titleToString(element.props.children)
+        }
       }
       return ''
     })

package/components/layout/root-layout/Theme.module.css

@@ -0,0 +1,35 @@
+.StickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+}
+
+.ContentContainer {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.BreadcrumbRoot,
+.BreadcrumbItem {
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.BreadcrumbItem {
+  text-transform: capitalize;
+}
+
+.HeroImageWrapper {
+  padding-block-start: var(--base-size-16);
+  width: 100%;
+}
+
+
+.ActionsWrapper {
+  padding-block-start: var(--base-size-16);
+}
+
+
+.RelatedLinks {
+  padding-top: var(--base-size-20);
+}

package/components/layout/root-layout/Theme.tsx

@@ -4,13 +4,12 @@ import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, PageMapItem} from 'nextra'
 import {useFSRoute} from 'nextra/hooks'
-import {BaseStyles, Box as PRCBox, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
+import {BaseStyles, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
 import '@primer/primitives/dist/css/functional/themes/light.css'
 import '@primer/primitives/dist/css/functional/themes/dark.css'
 import {
   Animate,
   AnimationProvider,
-  Box,
   ButtonGroup,
   ThemeProvider as BrandThemeProvider,
   Button,
@@ -38,6 +37,7 @@ import {RelatedContentLinks} from '../related-content-links/RelatedContentLinks'
 import {getRelatedPages} from '../related-content-links/getRelatedPages'
 import {hasChildren} from '../../../helpers/hasChildren'
 import {Footer} from '../footer/Footer'
+import styles from './Theme.module.css'
 
 const repoSrcPath = process.env.NEXT_PUBLIC_REPO_SRC_PATH || ''
 const repoURL = process.env.NEXT_PUBLIC_REPO || ''
@@ -119,16 +119,10 @@ export function Theme({pageMap, children}: ThemeProps) {
             </Head>
 
             <ContentWrapper disableAnimations={disablePageAnimation}>
-              <PRCBox
-                sx={{
-                  position: 'sticky',
-                  top: 0,
-                  zIndex: 99,
-                }}
-              >
+              <div className={styles.StickyHeader}>
                 <SkipToMainContent href="#main">Skip to main content</SkipToMainContent>
                 <Header flatDocsDirectories={flatDocsDirectories} siteTitle={siteTitle} pageMap={pageMap} />
-              </PRCBox>
+              </div>
               <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
                 <PageLayout.Pane
                   width="small"
@@ -145,20 +139,14 @@ export function Theme({pageMap, children}: ThemeProps) {
                 </PageLayout.Pane>
                 <PageLayout.Content padding="normal">
                   <div id="main">
-                    <PRCBox sx={!isHomePage && {maxWidth: 1200, width: '100%', margin: '0 auto'}}>
+                    <div style={!isHomePage ? {maxWidth: 1200, width: '100%', margin: '0 auto'} : undefined}>
                       <Stack direction="vertical" padding="none" gap="spacious">
                         {!isHomePage && (
                           <>
                             {activePath.length > 0 && (
-                              <Breadcrumbs>
+                              <Breadcrumbs className={styles.BreadcrumbRoot}>
                                 {(activeHeaderLink || siteTitle) && (
-                                  <Breadcrumbs.Item
-                                    as={NextLink}
-                                    href="/"
-                                    sx={{
-                                      color: 'var(--brand-InlineLink-color-rest)',
-                                    }}
-                                  >
+                                  <Breadcrumbs.Item as={NextLink} href="/">
                                     {activeHeaderLink ? activeHeaderLink.title : siteTitle}
                                   </Breadcrumbs.Item>
                                 )}
@@ -192,10 +180,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                                         key={item.name}
                                         href={item.route}
                                         selected={isLastItem}
-                                        sx={{
-                                          textTransform: 'capitalize',
-                                          color: 'var(--brand-InlineLink-color-rest)',
-                                        }}
+                                        className={styles.BreadcrumbItem}
                                       >
                                         {itemTitle.replace(/-/g, ' ')}
                                       </Breadcrumbs.Item>
@@ -204,7 +189,7 @@ export function Theme({pageMap, children}: ThemeProps) {
                               </Breadcrumbs>
                             )}
 
-                            <Box>
+                            <div>
                               <Stack direction="vertical" padding="none" gap={12} alignItems="flex-start">
                                 {activeMetadata.title && (
                                   <Heading as="h1" size="3">
@@ -217,12 +202,12 @@ export function Theme({pageMap, children}: ThemeProps) {
                                   </Text>
                                 )}
                                 {activeMetadata.image && (
-                                  <Box paddingBlockStart={16} style={{width: '100%'}}>
+                                  <div className={styles.HeroImageWrapper}>
                                     <Hero.Image src={activeMetadata.image} alt={activeMetadata['image-alt']} />
-                                  </Box>
+                                  </div>
                                 )}
                                 {activeMetadata['action-1-text'] && (
-                                  <Box paddingBlockStart={16}>
+                                  <div className={styles.ActionsWrapper}>
                                     <ButtonGroup>
                                       <Button as="a" href={activeMetadata['action-1-link']}>
                                         {activeMetadata['action-1-text']}
@@ -233,10 +218,10 @@ export function Theme({pageMap, children}: ThemeProps) {
                                         </Button>
                                       )}
                                     </ButtonGroup>
-                                  </Box>
+                                  </div>
                                 )}
                               </Stack>
-                            </Box>
+                            </div>
                             {activeMetadata['show-tabs'] && <UnderlineNav tabData={filteredTabData} />}
                           </>
                         )}
@@ -248,16 +233,16 @@ export function Theme({pageMap, children}: ThemeProps) {
                               <>{children}</>
 
                               {relatedLinks.length > 0 && (
-                                <PRCBox sx={{pt: 5}}>
+                                <div className={styles.RelatedLinks}>
                                   <RelatedContentLinks links={relatedLinks} />
-                                </PRCBox>
+                                </div>
                               )}
                             </>
                           )}
                         </article>
                         <Footer filePath={filePath} repoURL={repoURL} repoSrcPath={repoSrcPath} />
                       </Stack>
-                    </PRCBox>
+                    </div>
                   </div>
                 </PageLayout.Content>
               </PageLayout>

package/components/layout/sidebar/Sidebar.module.css

@@ -19,6 +19,14 @@
   font-size: var(--brand-text-size-100);
 }
 
+.NavListGroup {
+  margin-bottom: var(--base-size-24);
+}
+
+.NavListItemCapitalize {
+  text-transform: capitalize;
+}
+
 .NavList__Container li a,
 .NavList__Container li button {
   font-size: var(--brand-text-size-200);

package/components/layout/sidebar/Sidebar.tsx

@@ -77,7 +77,7 @@ export function Sidebar({pageMap}: SidebarProps) {
           }
 
           return (
-            <NavList.Group title={subNavName} key={item.name} sx={{mb: 24}}>
+            <NavList.Group title={subNavName} key={item.name} className={styles.NavListGroup}>
               <NavList.GroupHeading as="h3">
                 <NextLink href={item.route}>{subNavName}</NextLink>
               </NavList.GroupHeading>
@@ -142,9 +142,8 @@ export function Sidebar({pageMap}: SidebarProps) {
                         as={NextLink}
                         key={landingPageItem.route}
                         href={landingPageItem.route}
-                        sx={{textTransform: 'capitalize'}}
                         aria-current={isCurrentOrChild ? 'page' : undefined}
-                        className={styles.NavListItem}
+                        className={`${styles.NavListItem} ${styles.NavListItemCapitalize}`}
                       >
                         {landingPageItem.frontMatter?.title || item.name}
                       </NavList.Item>
@@ -155,7 +154,7 @@ export function Sidebar({pageMap}: SidebarProps) {
           )
         })}
         {sidebarLinks.length > 0 && (
-          <NavList.Group title="" sx={{mb: 24}}>
+          <NavList.Group title="" className={styles.NavListGroup}>
             {sidebarLinks.map(link => {
               return (
                 <NavList.Item

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.7.1-rc.a9c9ea3",
+  "version": "0.8.0-rc.abeed68",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",
@@ -25,16 +25,14 @@
     "react-dom": ">=18.0.0 <20.0.0"
   },
   "dependencies": {
-    "@next/mdx": "15.5.2",
+    "@next/mdx": "15.5.7",
     "@primer/octicons-react": "19.15.1",
-    "@primer/react": "^37.11.0",
+    "@primer/react": "^38.3.0",
     "@types/lodash.debounce": "^4.0.9",
-    "framer-motion": "12.4.0",
+    "framer-motion": "12.23.24",
     "lodash.debounce": "^4.0.8",
     "nextra": "4.4.0",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-focus-on": "3.9.4",
+    "react-focus-on": "^3.10.0",
     "react-live": "^4.1.8"
   },
   "devDependencies": {
@@ -44,19 +42,15 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.19.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "clsx": "2.1.1",
     "jsdom": "^26.0.1",
-    "next": "15.5.2",
+    "next": "15.5.7",
     "styled-components": "5.3.11",
     "vitest": "^3.2.4"
-  },
-  "overrides": {
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
   }
 }