diff --git a/.changeset/pre.json b/.changeset/pre.json
index a0e864f42d1..a86aff18731 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -74,6 +74,7 @@
"pretty-emus-cover",
"pretty-women-sing",
"proud-chairs-study",
+ "purple-waves-pay",
"rich-walls-fold",
"rotten-carpets-raise",
"rude-cycles-scream",
diff --git a/.changeset/purple-waves-pay.md b/.changeset/purple-waves-pay.md
new file mode 100644
index 00000000000..1d0da56050f
--- /dev/null
+++ b/.changeset/purple-waves-pay.md
@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": patch
+---
+
+chore: use styled wrapper instead of Box for Label, Token and Spinner
diff --git a/package-lock.json b/package-lock.json
index 79b4178ac3a..e801ee1675c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,7 +75,7 @@
"react-dom": "^18.3.1"
},
"devDependencies": {
- "@primer/react": "38.0.0-rc.4",
+ "@primer/react": "38.0.0-rc.5",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.3",
@@ -88,7 +88,7 @@
"name": "example-nextjs",
"version": "0.0.0",
"dependencies": {
- "@primer/react": "38.0.0-rc.4",
+ "@primer/react": "38.0.0-rc.5",
"next": "^15.2.3",
"react": "18.3.1",
"react-dom": "18.3.1",
@@ -104,7 +104,7 @@
"version": "0.0.0",
"dependencies": {
"@primer/octicons-react": "^19.14.0",
- "@primer/react": "38.0.0-rc.4",
+ "@primer/react": "38.0.0-rc.5",
"clsx": "^2.1.1",
"next": "^15.2.3",
"react": "18.3.1",
@@ -25843,7 +25843,7 @@
},
"packages/react": {
"name": "@primer/react",
- "version": "38.0.0-rc.4",
+ "version": "38.0.0-rc.5",
"license": "MIT",
"dependencies": {
"@github/mini-throttle": "^2.1.1",
@@ -26419,11 +26419,11 @@
},
"packages/styled-react": {
"name": "@primer/styled-react",
- "version": "1.0.0-rc.4",
+ "version": "1.0.0-rc.6",
"devDependencies": {
"@babel/preset-react": "^7.27.1",
"@babel/preset-typescript": "^7.27.1",
- "@primer/react": "^38.0.0-rc.4",
+ "@primer/react": "^38.0.0-rc.5",
"@rollup/plugin-babel": "^6.0.4",
"@types/react": "18.3.11",
"@types/react-dom": "18.3.1",
@@ -26439,7 +26439,7 @@
"typescript": "^5.9.2"
},
"peerDependencies": {
- "@primer/react": "38.0.0-rc.4",
+ "@primer/react": "38.0.0-rc.5",
"@types/react": "18.x || 19.x",
"@types/react-dom": "18.x || 19.x",
"@types/react-is": "18.x || 19.x",
diff --git a/packages/styled-react/CHANGELOG.md b/packages/styled-react/CHANGELOG.md
index f04ee9aa8ab..fad9384151e 100644
--- a/packages/styled-react/CHANGELOG.md
+++ b/packages/styled-react/CHANGELOG.md
@@ -1,5 +1,11 @@
# @primer/styled-react
+## 1.0.0-rc.6
+
+### Patch Changes
+
+- [`013c200`](https://github.com/primer/react/commit/013c200dd9969743c5e824f635964802ccfdcbfa) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: use styled wrapper instead of Box for Label, Token and Spinner
+
## 1.0.0-rc.5
### Minor Changes
diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json
index d7027375c32..e55ce7fb560 100644
--- a/packages/styled-react/package.json
+++ b/packages/styled-react/package.json
@@ -1,6 +1,6 @@
{
"name": "@primer/styled-react",
- "version": "1.0.0-rc.5",
+ "version": "1.0.0-rc.6",
"type": "module",
"exports": {
".": {
diff --git a/packages/styled-react/src/components/Label.tsx b/packages/styled-react/src/components/Label.tsx
index f62ed44e99a..dd5121acc82 100644
--- a/packages/styled-react/src/components/Label.tsx
+++ b/packages/styled-react/src/components/Label.tsx
@@ -1,13 +1,16 @@
-import {type LabelProps as PrimerLabelProps, Label as PrimerLabel, Box} from '@primer/react'
-import {type SxProp} from '../sx'
+import {type LabelProps as PrimerLabelProps, Label as PrimerLabel} from '@primer/react'
+import {sx, type SxProp} from '../sx'
import {forwardRef} from 'react'
import type {ForwardRefComponent} from '../polymorphic'
+import styled from 'styled-components'
type LabelProps = PrimerLabelProps & SxProp & {as?: React.ElementType}
-const StyledLabel = forwardRef(function Label(props, ref) {
- return
-}) as ForwardRefComponent<'span', LabelProps>
+const StyledLabel: ForwardRefComponent<'span', LabelProps> = styled(PrimerLabel).withConfig({
+ shouldForwardProp: prop => (prop as keyof LabelProps) !== 'sx',
+})`
+ ${sx}
+`
const Label = forwardRef(({as, ...props}, ref) => {
return
diff --git a/packages/styled-react/src/components/Spinner.tsx b/packages/styled-react/src/components/Spinner.tsx
index e6c007c68f1..4349262f6c3 100644
--- a/packages/styled-react/src/components/Spinner.tsx
+++ b/packages/styled-react/src/components/Spinner.tsx
@@ -1,9 +1,11 @@
-import {Box, Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react'
-import React from 'react'
-import type {SxProp} from '../sx'
+import {Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
export type SpinnerProps = PrimerSpinnerProps & SxProp
-export function Spinner(props: SpinnerProps) {
- return
-}
+export const Spinner = styled(PrimerSpinner).withConfig({
+ shouldForwardProp: prop => (prop as keyof SpinnerProps) !== 'sx',
+})`
+ ${sx}
+`
diff --git a/packages/styled-react/src/components/Token.tsx b/packages/styled-react/src/components/Token.tsx
index 1a0e2102744..36d6884af9e 100644
--- a/packages/styled-react/src/components/Token.tsx
+++ b/packages/styled-react/src/components/Token.tsx
@@ -1,33 +1,20 @@
-import React from 'react'
-import {
- type TokenProps as PrimerTokenProps,
- type SxProp,
- Token as PrimerToken,
- useTheme,
- theme as defaultTheme,
-} from '@primer/react'
-import css from '@styled-system/css'
+import React, {forwardRef} from 'react'
+import {type TokenProps as PrimerTokenProps, Token as PrimerToken} from '@primer/react'
+import {sx, type SxProp} from '../sx'
import type {ForwardRefComponent} from '../polymorphic'
import type {PropsWithChildren} from 'react'
+import styled from 'styled-components'
type TokenProps = PropsWithChildren & SxProp
-const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef(
- ({sx: sxProp, style, ...rest}, ref) => {
- const contextTheme = useTheme()
- const theme = contextTheme.theme || defaultTheme
+const StyledToken: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = styled(PrimerToken).withConfig({
+ shouldForwardProp: prop => (prop as keyof TokenProps) !== 'sx',
+})`
+ ${sx}
+`
- // If no sx prop is provided, just return PrimerToken directly
- if (!sxProp) {
- return
- }
-
- // Convert sx to CSS styles using the theme context
- const sxStyles = css(sxProp)(theme)
- const mergedStyle = {...sxStyles, ...style}
-
- return
- },
-) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps>
+const Token = forwardRef(({as, ...props}, ref) => {
+ return
+}) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps>
export {Token, type TokenProps}