diff --git a/.changeset/rich-walls-fold.md b/.changeset/rich-walls-fold.md
new file mode 100644
index 00000000000..3686058b6fa
--- /dev/null
+++ b/.changeset/rich-walls-fold.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update SideNav component to no longer support sx.
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 0f47c4ca639..0e80ceb2855 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -4,9 +4,7 @@ import Link, {type LinkProps} from './Link'
import type React from 'react'
import {type PropsWithChildren} from 'react'
import {clsx} from 'clsx'
-import type {SxProp} from './sx'
import classes from './SideNav.module.css'
-import {BoxWithFallback} from './internal/components/BoxWithFallback'
type SideNavBaseProps = {
as?: React.ElementType
@@ -15,16 +13,15 @@ type SideNavBaseProps = {
className?: string
children?: React.ReactNode
'aria-label'?: string
-} & SxProp
+}
function SideNav({
- as = 'nav',
+ as: Component = 'nav',
variant = 'normal',
className,
bordered,
children,
'aria-label': ariaLabel,
- sx: sxProp,
}: SideNavBaseProps) {
const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal'
const newClassName = clsx(
@@ -39,9 +36,9 @@ function SideNav({
)
return (
-
+
{children}
-
+
)
}
@@ -58,15 +55,9 @@ const SideNavLink = ({selected, to, variant, className, children, ...rest}: Styl
// according to their docs, NavLink supports aria-current:
// https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
return (
-
+
{children}
-
+
)
}