From 484eff5144b0408ade3b5bb5e49ac7c554e79cab Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 27 Aug 2025 11:25:01 -0700
Subject: [PATCH 1/4] remove sx support from CounterLabel

---
 packages/react/src/CounterLabel/CounterLabel.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/CounterLabel/CounterLabel.tsx b/packages/react/src/CounterLabel/CounterLabel.tsx
index fd47aa3c0f8..2f5101ace46 100644
--- a/packages/react/src/CounterLabel/CounterLabel.tsx
+++ b/packages/react/src/CounterLabel/CounterLabel.tsx
@@ -2,16 +2,14 @@ import {clsx} from 'clsx'
 import type {HTMLAttributes} from 'react'
 import type React from 'react'
 import {forwardRef} from 'react'
-import type {SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
 import classes from './CounterLabel.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type CounterLabelProps = React.PropsWithChildren<
   HTMLAttributes<HTMLSpanElement> & {
     scheme?: 'primary' | 'secondary'
     className?: string
-  } & SxProp
+  }
 >
 
 const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
@@ -26,9 +24,9 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
 
     return (
       <>
-        <BoxWithFallback as="span" {...counterProps} className={clsx(className, classes.CounterLabel)}>
+        <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
           {children}
-        </BoxWithFallback>
+        </span>
         {label}
       </>
     )

From e08db6331bc4310d94c2fbddceb0c52a8101d47b Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 27 Aug 2025 11:28:12 -0700
Subject: [PATCH 2/4] remove sx from docs

---
 packages/react/src/CounterLabel/CounterLabel.docs.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/react/src/CounterLabel/CounterLabel.docs.json b/packages/react/src/CounterLabel/CounterLabel.docs.json
index 9bcb9cfd08a..74f7e60a7fe 100644
--- a/packages/react/src/CounterLabel/CounterLabel.docs.json
+++ b/packages/react/src/CounterLabel/CounterLabel.docs.json
@@ -27,11 +27,6 @@
       "type": "string",
       "description": "Class name(s) for custom styling.",
       "defaultValue": ""
-    },
-    {
-      "name": "sx",
-      "type": "BetterSystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

From 226ef2c403f4b41ae70de0ff8646fd6a587ed98b Mon Sep 17 00:00:00 2001
From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com>
Date: Wed, 27 Aug 2025 11:34:46 -0700
Subject: [PATCH 3/4] Update CounterLabel to remove sx support

---
 .changeset/sharp-papayas-destroy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sharp-papayas-destroy.md

diff --git a/.changeset/sharp-papayas-destroy.md b/.changeset/sharp-papayas-destroy.md
new file mode 100644
index 00000000000..0478de96629
--- /dev/null
+++ b/.changeset/sharp-papayas-destroy.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update CounterLabel component to no longer support sx

From 879f8cab4da9a96d38e4503fd888fb9fcdfb315f Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 17 Sep 2025 14:20:57 -0700
Subject: [PATCH 4/4] update tests for counterlabel sx removal

---
 packages/styled-react/src/index.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 66763c5389a..86d2948c865 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -3,6 +3,8 @@ import {
   Box,
   type BoxProps,
   type SxProp,
+  CounterLabel as PrimerCounterLabel,
+  type CounterLabelProps as PrimerCounterLabelProps,
   StateLabel as PrimerStateLabel,
   type StateLabelProps as PrimerStateLabelProps,
   SubNav as PrimerSubNav,
@@ -62,6 +64,12 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, {
   IconButton: SegmentedControlIconButton,
 })
 
+type CounterLabelProps = PrimerCounterLabelProps & SxProp
+
+const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(function CounterLabel(props, ref) {
+  return <Box as={PrimerCounterLabel} ref={ref} {...props} />
+})
+
 type StateLabelProps = PrimerStateLabelProps & SxProp
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
@@ -90,7 +98,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+export {CounterLabel, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
@@ -102,7 +110,6 @@ export {
   Checkbox,
   CheckboxGroup,
   CircleBadge,
-  CounterLabel,
   Details,
   Dialog,
   Flash,