@primer/doctocat-nextjs 0.0.0-20251127164228 → 0.0.0-20251128093545

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @primer/doctocat-nextjs
 
-## 0.0.0-20251127164228
+## 0.0.0-20251128093545
 
 ### Patch Changes
 
 - Fake entry to force publishing
 
-## 0.0.0-20251127164226
+## 0.0.0-20251128093544
 
 ### Patch Changes
 

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

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

package/components/layout/header/Header.tsx

@@ -109,7 +109,7 @@ 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,27 +117,30 @@ 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
-              ref={searchTriggerRef}
-              className={styles.Header__searchButton}
-              icon={SearchIcon}
-              variant="invisible"
-              aria-label={`Open search`}
-              onClick={() => setIsSearchOpen(true)}
-            />
+             <IconButton
+               as="button"
+               ref={searchTriggerRef}
+               className={styles.Header__searchButton}
+               icon={SearchIcon}
+               variant="invisible"
+               aria-label={`Open search`}
+               onClick={() => setIsSearchOpen(true)}
+             />
             <div className={styles.Header__navDrawerContainer}>
-              <IconButton
-                icon={ThreeBarsIcon}
-                variant="invisible"
-                aria-label="Menu"
-                aria-expanded={isNavDrawerOpen}
-                onClick={() => setIsNavDrawerOpen(true)}
-              />
+               <IconButton
+                 as="button"
+                 icon={ThreeBarsIcon}
+                 variant="invisible"
+                 aria-label="Menu"
+                 aria-expanded={isNavDrawerOpen}
+                 onClick={() => setIsNavDrawerOpen(true)}
+               />
               <NavDrawer isOpen={isNavDrawerOpen} onDismiss={() => setIsNavDrawerOpen(false)} pageMap={pageMap} />
             </div>
           </Stack>

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.0-20251127164228",
+  "version": "0.0.0-20251128093545",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",
@@ -29,12 +29,10 @@
     "@primer/octicons-react": "19.15.1",
     "@primer/react": "^38.0.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,8 +42,8 @@
     "@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.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
@@ -54,9 +52,5 @@
     "next": "15.5.2",
     "styled-components": "5.3.11",
     "vitest": "^3.2.4"
-  },
-  "overrides": {
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1"
   }
 }