From f4c7b83d434ca9c22afae8a1ce82feaf6563f71d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 24 Oct 2025 16:57:59 +0000
Subject: [PATCH 01/12] Initial plan


From 16ed8107b220d2bbdd5b1a23ac6d10773adc063e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 24 Oct 2025 17:03:53 +0000
Subject: [PATCH 02/12] Initial commit - planning upgrade of
 eslint-plugin-primer-react

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 package-lock.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b0f35787c2f..6a7cf1b56e0 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.8",
+        "@primer/react": "38.0.0-rc.9",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.3",
@@ -88,8 +88,8 @@
       "name": "example-nextjs",
       "version": "0.0.0",
       "dependencies": {
-        "@primer/react": "38.0.0-rc.8",
-        "@primer/styled-react": "1.0.0-rc.9",
+        "@primer/react": "38.0.0-rc.9",
+        "@primer/styled-react": "1.0.0-rc.10",
         "next": "^15.2.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -105,7 +105,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@primer/octicons-react": "^19.14.0",
-        "@primer/react": "38.0.0-rc.8",
+        "@primer/react": "38.0.0-rc.9",
         "clsx": "^2.1.1",
         "next": "^15.2.3",
         "react": "18.3.1",
@@ -26317,7 +26317,7 @@
     },
     "packages/react": {
       "name": "@primer/react",
-      "version": "38.0.0-rc.8",
+      "version": "38.0.0-rc.9",
       "license": "MIT",
       "dependencies": {
         "@github/mini-throttle": "^2.1.1",
@@ -26894,11 +26894,11 @@
     },
     "packages/styled-react": {
       "name": "@primer/styled-react",
-      "version": "1.0.0-rc.9",
+      "version": "1.0.0-rc.10",
       "devDependencies": {
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
-        "@primer/react": "^38.0.0-rc.8",
+        "@primer/react": "^38.0.0-rc.9",
         "@rollup/plugin-babel": "^6.0.4",
         "@types/react": "18.3.11",
         "@types/react-dom": "18.3.1",
@@ -26914,7 +26914,7 @@
         "typescript": "^5.9.2"
       },
       "peerDependencies": {
-        "@primer/react": "38.0.0-rc.8",
+        "@primer/react": "38.0.0-rc.9",
         "@types/react": "18.x || 19.x",
         "@types/react-dom": "18.x || 19.x",
         "@types/react-is": "18.x || 19.x",

From a4ddb52322ea498d0f8482810c6b0ab8f4023575 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 24 Oct 2025 17:21:21 +0000
Subject: [PATCH 03/12] Upgrade eslint-plugin-primer-react to v8.4.0 and enable
 spread-props-first rule

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 eslint.config.mjs                             |  1 +
 package-lock.json                             |  8 ++--
 package.json                                  |  2 +-
 packages/react/src/ActionBar/ActionBar.tsx    |  2 +-
 .../src/ActionList/ActionList.dev.stories.tsx |  4 +-
 .../ActionList.features.stories.tsx           |  2 +-
 packages/react/src/ActionList/Group.tsx       | 10 ++---
 packages/react/src/ActionList/Heading.tsx     |  4 +-
 packages/react/src/ActionList/Item.tsx        |  4 +-
 packages/react/src/ActionList/LinkItem.tsx    |  2 +-
 packages/react/src/ActionList/List.tsx        |  2 +-
 .../react/src/ActionList/TrailingAction.tsx   |  4 +-
 packages/react/src/ActionList/Visuals.tsx     |  6 +--
 packages/react/src/ActionMenu/ActionMenu.tsx  |  6 +--
 .../src/AnchoredOverlay/AnchoredOverlay.tsx   |  8 ++--
 .../Autocomplete.features.stories.tsx         |  4 +-
 .../src/Autocomplete/Autocomplete.stories.tsx |  8 ++--
 .../src/Autocomplete/Autocomplete.test.tsx    |  4 +-
 .../src/Autocomplete/AutocompleteInput.tsx    |  2 +-
 .../src/Autocomplete/AutocompleteMenu.tsx     |  2 +-
 .../src/Autocomplete/AutocompleteOverlay.tsx  |  2 +-
 packages/react/src/Avatar/Avatar.tsx          |  2 +-
 packages/react/src/Banner/Banner.stories.tsx  |  4 +-
 packages/react/src/Banner/Banner.tsx          |  4 +-
 packages/react/src/BaseStyles.tsx             |  4 +-
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     |  4 +-
 packages/react/src/Button/Button.tsx          |  2 +-
 packages/react/src/Button/ButtonBase.tsx      |  2 +-
 packages/react/src/Button/IconButton.tsx      |  6 +--
 packages/react/src/Button/LinkButton.tsx      |  2 +-
 .../src/Button/__tests__/Button.test.tsx      |  2 +-
 .../src/ButtonGroup/ButtonGroup.stories.tsx   |  2 +-
 .../react/src/ButtonGroup/ButtonGroup.tsx     |  2 +-
 .../react/src/Checkbox/Checkbox.stories.tsx   |  2 +-
 .../react/src/CheckboxGroup/CheckboxGroup.tsx |  2 +-
 .../react/src/CircleBadge/CircleBadge.tsx     |  2 +-
 .../ConfirmationDialog.stories.tsx            |  2 +-
 packages/react/src/Details/Details.tsx        |  4 +-
 .../src/Details/__tests__/Details.test.tsx    |  2 +-
 packages/react/src/Dialog/Dialog.tsx          | 16 ++++----
 .../FilteredActionList/FilteredActionList.tsx | 13 ++++---
 .../FilteredActionListLoaders.tsx             |  2 +-
 .../FormControl.features.stories.tsx          |  6 +--
 packages/react/src/Header/Header.tsx          |  6 +--
 packages/react/src/Heading/Heading.tsx        |  2 +-
 .../KeybindingHint/components/Sequence.tsx    |  2 +-
 packages/react/src/Label/Label.tsx            |  2 +-
 .../LabelGroup.features.stories.tsx           |  2 +-
 .../src/LabelGroup/LabelGroup.stories.tsx     |  2 +-
 packages/react/src/LabelGroup/LabelGroup.tsx  |  2 +-
 packages/react/src/Link/Link.tsx              |  2 +-
 .../src/NavList/NavList.features.stories.tsx  |  4 +-
 packages/react/src/NavList/NavList.tsx        |  6 +--
 .../react/src/Octicon/Octicon.stories.tsx     |  2 +-
 .../react/src/Overlay/Overlay.dev.stories.tsx |  2 +-
 .../react/src/Overlay/Overlay.stories.tsx     |  2 +-
 packages/react/src/Overlay/Overlay.tsx        | 18 ++++-----
 packages/react/src/PageHeader/PageHeader.tsx  | 28 +++++++-------
 packages/react/src/PageLayout/PageLayout.tsx  |  2 +-
 packages/react/src/Pagehead/Pagehead.tsx      |  2 +-
 .../Pagination.features.stories.tsx           |  2 +-
 .../src/Pagination/Pagination.stories.tsx     |  2 +-
 .../react/src/Pagination/Pagination.test.tsx  |  2 +-
 packages/react/src/Pagination/Pagination.tsx  |  4 +-
 .../src/Pagination/mocks/ReactRouterLink.tsx  |  2 +-
 packages/react/src/Popover/Popover.tsx        |  2 +-
 .../react/src/ProgressBar/ProgressBar.tsx     |  6 +--
 packages/react/src/Radio/Radio.stories.tsx    |  2 +-
 packages/react/src/Radio/Radio.tsx            |  2 +-
 packages/react/src/RadioGroup/RadioGroup.tsx  |  2 +-
 .../RelativeTime.features.stories.tsx         |  6 +--
 .../src/RelativeTime/RelativeTime.stories.tsx |  2 +-
 .../src/SegmentedControl/SegmentedControl.tsx |  8 ++--
 .../SegmentedControlButton.tsx                |  2 +-
 .../SegmentedControlIconButton.tsx            |  6 +--
 .../SelectPanel/SelectPanel.dev.stories.tsx   | 12 +++---
 .../SelectPanel.examples.stories.tsx          | 18 ++++-----
 .../SelectPanel.features.stories.tsx          | 38 +++++++++----------
 .../src/SelectPanel/SelectPanel.stories.tsx   |  2 +-
 .../src/SelectPanel/SelectPanel.test.tsx      |  4 +-
 .../react/src/SelectPanel/SelectPanel.tsx     |  6 +--
 packages/react/src/SideNav.tsx                |  2 +-
 packages/react/src/Skeleton/SkeletonBox.tsx   |  2 +-
 .../src/SkeletonAvatar/SkeletonAvatar.tsx     |  2 +-
 .../react/src/SkeletonText/SkeletonText.tsx   |  4 +-
 packages/react/src/Spinner/Spinner.tsx        |  2 +-
 .../src/SplitPageLayout/SplitPageLayout.tsx   | 10 ++---
 packages/react/src/Stack/Stack.tsx            |  8 ++--
 packages/react/src/SubNav/SubNav.tsx          |  6 +--
 packages/react/src/TabNav/TabNav.tsx          |  2 +-
 packages/react/src/Text/Text.tsx              |  2 +-
 .../TextInput/TextInput.features.stories.tsx  | 24 ++++++------
 .../react/src/TextInput/TextInput.stories.tsx |  2 +-
 packages/react/src/TextInput/TextInput.tsx    |  2 +-
 .../TextInputWithTokens.test.tsx              |  2 +-
 .../TextInputWithTokens.tsx                   |  4 +-
 packages/react/src/Textarea/Textarea.tsx      |  2 +-
 .../react/src/ToggleSwitch/ToggleSwitch.tsx   |  2 +-
 packages/react/src/Token/IssueLabelToken.tsx  |  4 +-
 .../src/Token/Token.features.stories.tsx      |  6 +--
 packages/react/src/Token/Token.tsx            |  4 +-
 packages/react/src/Token/TokenBase.tsx        | 10 ++---
 .../react/src/Token/_TokenTextContainer.tsx   |  4 +-
 packages/react/src/Tooltip/Tooltip.tsx        |  2 +-
 .../TooltipV2/Tooltip.playground.stories.tsx  |  2 +-
 packages/react/src/TooltipV2/Tooltip.tsx      |  2 +-
 .../src/TooltipV2/__tests__/Tooltip.test.tsx  |  4 +-
 .../UnderlineNav.Item.stories.tsx             |  2 +-
 .../react/src/UnderlineNav/UnderlineNav.tsx   |  2 +-
 .../src/UnderlineNav/UnderlineNavItem.tsx     |  2 +-
 .../src/VisuallyHidden/VisuallyHidden.tsx     |  2 +-
 packages/react/src/_VisuallyHidden.tsx        |  2 +-
 .../src/deprecated/ActionList/Header.tsx      |  2 +-
 .../react/src/deprecated/ActionList/Item.tsx  |  2 +-
 .../react/src/deprecated/ActionList/List.tsx  |  2 +-
 packages/react/src/deprecated/ActionMenu.tsx  |  2 +-
 .../react/src/deprecated/DialogV1/Dialog.tsx  |  4 +-
 .../deprecated/UnderlineNav/UnderlineNav.tsx  |  4 +-
 .../src/experimental/CSSComponent/index.tsx   |  2 +-
 .../experimental/IssueLabel/IssueLabel.tsx    |  2 +-
 .../experimental/SelectPanel2/SelectPanel.tsx | 16 ++++----
 .../UnderlinePanels/UnderlinePanels.tsx       |  6 +--
 .../src/internal/components/ButtonReset.tsx   |  2 +-
 .../CheckboxOrRadioGroup.tsx                  |  6 +--
 .../src/internal/components/InputLabel.tsx    |  2 +-
 .../components/TextInputInnerAction.tsx       |  6 +--
 .../internal/components/TextInputWrapper.tsx  |  4 +-
 .../components/UnderlineTabbedInterface.tsx   |  4 +-
 .../internal/components/UnstyledTextInput.tsx |  2 +-
 .../stories/deprecated/ActionList.stories.tsx | 10 ++---
 .../stories/deprecated/ActionMenu.stories.tsx | 10 ++---
 .../stories/useAnchoredPosition.stories.tsx   |  8 ++--
 .../src/stories/useFocusTrap.stories.tsx      |  2 +-
 .../src/stories/useFocusZone.stories.tsx      |  2 +-
 .../src/components/ActionList.tsx             |  6 +--
 .../styled-react/src/components/Avatar.tsx    |  2 +-
 .../src/components/BaseStyles.tsx             |  4 +-
 .../styled-react/src/components/Button.tsx    |  2 +-
 .../styled-react/src/components/Checkbox.tsx  |  2 +-
 .../src/components/CheckboxGroup.tsx          |  8 ++--
 .../src/components/CounterLabel.tsx           |  2 +-
 .../styled-react/src/components/Dialog.tsx    |  8 ++--
 .../styled-react/src/components/Header.tsx    |  3 ++
 .../src/components/IconButton.tsx             |  2 +-
 .../styled-react/src/components/NavList.tsx   |  2 +-
 .../src/components/PageLayout.tsx             |  3 ++
 .../src/components/RadioGroup.tsx             |  8 ++--
 .../src/components/RelativeTime.tsx           |  2 +-
 .../src/components/SegmentedControl.tsx       |  6 +--
 .../src/components/StateLabel.tsx             |  2 +-
 .../styled-react/src/components/SubNav.tsx    |  4 +-
 .../styled-react/src/components/TextInput.tsx |  2 +-
 .../styled-react/src/components/Timeline.tsx  | 10 ++---
 .../src/components/ToggleSwitch.tsx           |  2 +-
 .../styled-react/src/components/Tooltip.tsx   |  2 +-
 .../src/components/UnderlineNav.tsx           |  2 +-
 .../src/components/UnderlinePanels.tsx        |  2 +-
 .../src/components/deprecated/ActionList.tsx  |  6 +--
 .../src/components/deprecated/DialogV1.tsx    |  2 +
 159 files changed, 360 insertions(+), 350 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 6e0f2b9a7a6..79ca8268452 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -117,6 +117,7 @@ const config = defineConfig([
       'primer-react/a11y-use-next-tooltip': 'error',
       'primer-react/no-unnecessary-components': 'error',
       'primer-react/prefer-action-list-item-onselect': 'error',
+      'primer-react/spread-props-first': 'error',
     },
   },
 
diff --git a/package-lock.json b/package-lock.json
index 6a7cf1b56e0..8cdcd449b5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,7 @@
         "eslint-plugin-mdx": "3.6.2",
         "eslint-plugin-playwright": "^2.2.2",
         "eslint-plugin-prettier": "^5.5.4",
-        "eslint-plugin-primer-react": "^8.2.0",
+        "eslint-plugin-primer-react": "^8.4.0",
         "eslint-plugin-react": "^7.35.5",
         "eslint-plugin-react-compiler": "^19.1.0-rc.2",
         "eslint-plugin-react-hooks": "^5.2.0",
@@ -12668,9 +12668,9 @@
       }
     },
     "node_modules/eslint-plugin-primer-react": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-8.2.0.tgz",
-      "integrity": "sha512-+uz0T1qyfRhMavojoATVrLBdQ/JoX7XMc6BMowCBtB+M+AerrW8lXj9pVUViMe35Iaw+3eRMHAdXHho82BYyvw==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-8.4.0.tgz",
+      "integrity": "sha512-lReoFdF1IuZ7vJQTC8IzFo/xuzDkz15DCbm0zWeL18HxIPRRWEb1JP9oDwlejaiqCF6VFfQ4fef7u7zBhGALVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 5bad61cd66e..244da076231 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "eslint-plugin-mdx": "3.6.2",
     "eslint-plugin-playwright": "^2.2.2",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-primer-react": "^8.2.0",
+    "eslint-plugin-primer-react": "^8.4.0",
     "eslint-plugin-react": "^7.35.5",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^5.2.0",
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 7046dc44984..3ce7d9ff414 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -408,11 +408,11 @@ export const ActionBarIconButton = forwardRef(
 
     return (
       <IconButton
+        {...props}
         aria-disabled={disabled}
         ref={ref}
         size={size}
         onClick={clickHandler}
-        {...props}
         variant="invisible"
         data-testid={id}
       />
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index ec560222be0..2b14654deab 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -334,7 +334,7 @@ export const OverlayWrapping = () => {
         <AnchoredOverlay
           open
           renderAnchor={props => (
-            <button type="button" {...props}>
+            <button {...props} type="button">
               Overlay
             </button>
           )}
@@ -350,7 +350,7 @@ export const OverlayWrapping = () => {
           open
           width="small"
           renderAnchor={props => (
-            <button type="button" {...props}>
+            <button {...props} type="button">
               Overlay
             </button>
           )}
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index e7ff8b11f50..27ab410451b 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -711,7 +711,7 @@ export const InsideOverlay = () => {
       onOpen={toggle}
       onClose={toggle}
       renderAnchor={props => (
-        <button type="button" {...props}>
+        <button {...props} type="button">
           toggle overlay
         </button>
       )}
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 441e79302c9..b51afebfa67 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -24,13 +24,13 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
   ...rest
 }) => {
   return (
-    <Component className={className} id={id} {...rest}>
+    <Component {...rest} className={className} id={id}>
       {children}
     </Component>
   )
 }
 
-type HeadingWrapProps = {
+type HeadingWrapProps = React.HTMLAttributes<HTMLElement> & {
   as?: 'div' | 'li'
   className?: string
   children: React.ReactNode
@@ -98,7 +98,7 @@ export const Group: FCWithSlotMarker<React.PropsWithChildren<ActionListGroupProp
   }
 
   return (
-    <li className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined} {...props}>
+    <li {...props} className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined}>
       <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
         {title && !slots.groupHeading ? (
           // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -173,13 +173,13 @@ export const GroupHeading: FCWithSlotMarker<React.PropsWithChildren<ActionListGr
       {/* for listbox (SelectPanel) and menu (ActionMenu) roles, group titles are presentational. */}
       {listRole && listRole !== 'list' ? (
         <HeadingWrap
+          {...props}
           role="presentation"
           className={groupClasses.GroupHeadingWrap}
           aria-hidden="true"
           data-variant={variant}
           data-component="GroupHeadingWrap"
           as={headingWrapElement}
-          {...props}
         >
           <span className={clsx(className, groupClasses.GroupHeading)} id={groupHeadingId}>
             {_internalBackwardCompatibleTitle ?? children}
@@ -195,10 +195,10 @@ export const GroupHeading: FCWithSlotMarker<React.PropsWithChildren<ActionListGr
           data-component="GroupHeadingWrap"
         >
           <Heading
+            {...props}
             className={clsx(className, groupClasses.GroupHeading)}
             as={as || 'h3'}
             id={groupHeadingId}
-            {...props}
           >
             {_internalBackwardCompatibleTitle ?? children}
           </Heading>
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 510c94231d8..63303d5f765 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -35,14 +35,14 @@ export const Heading = forwardRef(({as, size, children, visuallyHidden = false,
   return (
     <VisuallyHidden isVisible={!visuallyHidden}>
       <HeadingComponent
+        {...props}
         as={as}
         variant={size}
-        ref={innerRef}
         // use custom id if it is provided. Otherwise, use the id from the context
+        ref={innerRef}
         id={props.id ?? headingId}
         className={clsx(className, classes.ActionListHeader)}
         data-list-variant={listVariant}
-        {...props}
       >
         {children}
       </HeadingComponent>
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index b25a169bd50..3bb61800763 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -30,7 +30,7 @@ SubItem.displayName = 'ActionList.SubItem'
 const ButtonItemContainerNoBox = React.forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>(
   ({children, style, ...props}, forwardedRef) => {
     return (
-      <button type="button" ref={forwardedRef as React.Ref<HTMLButtonElement>} style={style} {...props}>
+      <button {...props} type="button" ref={forwardedRef as React.Ref<HTMLButtonElement>} style={style}>
         {children}
       </button>
     )
@@ -40,7 +40,7 @@ const ButtonItemContainerNoBox = React.forwardRef<HTMLButtonElement, React.HTMLA
 const DivItemContainerNoBox = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({children, ...props}, forwardedRef) => {
     return (
-      <div ref={forwardedRef as React.Ref<HTMLDivElement>} {...props}>
+      <div {...props} ref={forwardedRef as React.Ref<HTMLDivElement>}>
         {children}
       </div>
     )
diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index 8939b450284..a879456569f 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -43,7 +43,7 @@ export const LinkItem = React.forwardRef(
           return inactiveText ? (
             <span {...rest}>{children}</span>
           ) : (
-            <Link as={Component} {...rest} {...props} onClick={clickHandler} ref={forwardedRef}>
+            <Link {...rest} {...props} as={Component} onClick={clickHandler} ref={forwardedRef}>
               {children}
             </Link>
           )
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index c5c3860f6fb..b296234dbc5 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -67,13 +67,13 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
     >
       {slots.heading}
       <Component
+        {...restProps}
         className={clsx(classes.ActionList, className)}
         role={listRole}
         aria-labelledby={ariaLabelledBy}
         ref={listRef}
         data-dividers={showDividers}
         data-variant={variant}
-        {...restProps}
       >
         {childrenWithoutSlots}
       </Component>
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 933c3a6f584..7006c2517d7 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -34,6 +34,7 @@ export const TrailingAction = forwardRef(
       <span className={clsx(className, classes.TrailingAction)} style={style}>
         {icon ? (
           <IconButton
+            {...props}
             as={as}
             aria-label={label}
             icon={icon}
@@ -45,11 +46,11 @@ export const TrailingAction = forwardRef(
             // @ts-expect-error StyledButton wants both Anchor and Button refs
             ref={forwardedRef}
             className={classes.TrailingActionButton}
-            {...props}
           />
         ) : (
           // @ts-expect-error shhh
           <Button
+            {...props}
             variant="invisible"
             as={as}
             href={href}
@@ -57,7 +58,6 @@ export const TrailingAction = forwardRef(
             data-loading={Boolean(loading)}
             ref={forwardedRef}
             className={classes.TrailingActionButton}
-            {...props}
           >
             {label}
           </Button>
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index c091391e465..1b668e394d5 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -10,13 +10,13 @@ import type {FCWithSlotMarker} from '../utils/types/Slots'
 export type VisualProps = React.HTMLAttributes<HTMLSpanElement>
 
 export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
-  return <span className={clsx(className, classes.VisualWrap)} {...props} />
+  return <span {...props} className={clsx(className, classes.VisualWrap)} />
 }
 
 export type ActionListLeadingVisualProps = VisualProps
 export const LeadingVisual: FCWithSlotMarker<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
   return (
-    <VisualContainer className={clsx(className, classes.LeadingVisual)} {...props}>
+    <VisualContainer {...props} className={clsx(className, classes.LeadingVisual)}>
       {props.children}
     </VisualContainer>
   )
@@ -26,7 +26,7 @@ export type ActionListTrailingVisualProps = VisualProps
 export const TrailingVisual: FCWithSlotMarker<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
   const {trailingVisualId} = React.useContext(ItemContext)
   return (
-    <VisualContainer className={clsx(className, classes.TrailingVisual)} id={trailingVisualId} {...props}>
+    <VisualContainer {...props} className={clsx(className, classes.TrailingVisual)} id={trailingVisualId}>
       {props.children}
     </VisualContainer>
   )
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index c2c722cb895..0c78b64465a 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -242,7 +242,7 @@ export type ActionMenuButtonProps = ButtonProps
 const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
+      <Button {...props} type="button" trailingAction={TriangleDownIcon} />
     </Anchor>
   )
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
@@ -317,11 +317,11 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
       variant={variant}
     >
       <div
+        {...(overlayProps.overflow ? {[`data-overflow-${overlayProps.overflow}`]: ''} : {})}
+        {...(overlayProps.maxHeight ? {[`data-max-height-${overlayProps.maxHeight}`]: ''} : {})}
         ref={containerRef}
         className={styles.ActionMenuContainer}
         data-variant={responsiveVariant}
-        {...(overlayProps.overflow ? {[`data-overflow-${overlayProps.overflow}`]: ''} : {})}
-        {...(overlayProps.maxHeight ? {[`data-max-height-${overlayProps.maxHeight}`]: ''} : {})}
       >
         <ActionListContainerContext.Provider
           value={{
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index 0ba6cf0b174..8925c57a6ab 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -245,6 +245,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
         })}
       {open ? (
         <Overlay
+          {...overlayProps}
           returnFocusRef={anchorRef}
           onClickOutside={onClickOutside}
           ignoreClickRefs={[anchorRef]}
@@ -261,18 +262,17 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           anchorSide={position?.anchorSide}
           className={className}
           preventOverflow={preventOverflow}
-          {...overlayProps}
         >
           {showXIcon ? (
             <div className={classes.ResponsiveCloseButtonContainer}>
               <IconButton
                 {...(closeButtonProps as IconButtonProps)}
-                type="button"
-                variant="invisible"
-                icon={XIcon}
                 {...(XButtonAriaLabelledBy
                   ? {'aria-labelledby': XButtonAriaLabelledBy, 'aria-label': undefined}
                   : {'aria-label': XButtonAriaLabel ?? 'Close', 'aria-labelledby': undefined})}
+                type="button"
+                variant="invisible"
+                icon={XIcon}
                 className={clsx(classes.ResponsiveCloseButton, closeButtonProps.className)}
                 onClick={() => {
                   onClose('close')
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index bf0577cee9b..5a46c74af8d 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -414,16 +414,16 @@ export const AsyncLoadingOfItems = (args: FormControlArgs<AutocompleteArgs>) =>
   return (
     <form className={classes.FormPadding}>
       <FormControl {...parentArgs}>
-        <FormControl.Label id="autocompleteLabel" {...labelArgs} />
+        <FormControl.Label {...labelArgs} id="autocompleteLabel" />
         <Autocomplete>
           <Autocomplete.Input {...textInputArgs} size={textInputArgs.inputSize} />
           <Autocomplete.Overlay {...overlayArgs}>
             <Autocomplete.Menu
+              {...menuArgs}
               items={loadedItems}
               selectedItemIds={[]}
               onOpenChange={onOpenChange}
               aria-labelledby="autocompleteLabel"
-              {...menuArgs}
               loading={loadedItems.length === 0}
             />
           </Autocomplete.Overlay>
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 4c8bda2827c..5273230f67f 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -260,27 +260,27 @@ export const Playground = (args: FormControlArgs<AutocompleteArgs>) => {
   return (
     <form className={classes.DefaultForm} onSubmit={event => event.preventDefault()}>
       <FormControl {...parentArgs}>
-        <FormControl.Label id="autocompleteLabel" {...labelArgs} />
+        <FormControl.Label {...labelArgs} id="autocompleteLabel" />
         <Autocomplete>
           <Autocomplete.Input
-            aria-describedby={formValidationId}
             {...autocompleteInput}
+            aria-describedby={formValidationId}
             size={textInputArgs.inputSize}
             data-testid="autocompleteInput"
           />
           <Autocomplete.Overlay {...overlayArgs}>
             <Autocomplete.Menu
+              {...menuArgs}
               items={items}
               selectedItemIds={isMultiselect ? selectedItemIds : []}
               onSelectedChange={isMultiselect ? onSelectedChange : undefined}
               aria-labelledby="autocompleteLabel"
-              {...menuArgs}
             />
           </Autocomplete.Overlay>
         </Autocomplete>
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
         {validationArgs.children && validationArgs.variant && (
-          <FormControl.Validation id={formValidationId} {...validationArgs} variant={validationArgs.variant} />
+          <FormControl.Validation {...validationArgs} id={formValidationId} variant={validationArgs.variant} />
         )}
       </FormControl>
     </form>
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index 5b97da8cdc9..d730b50b501 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -36,9 +36,9 @@ const LabelledAutocomplete = <T extends AutocompleteMenuItem>({
         Autocomplete field
       </label>
       <Autocomplete id="autocompleteId">
-        <Autocomplete.Input id={id} {...inputPropsRest} />
+        <Autocomplete.Input {...inputPropsRest} id={id} />
         <Autocomplete.Overlay>
-          <Autocomplete.Menu aria-labelledby={ariaLabelledBy} {...menuPropsRest} />
+          <Autocomplete.Menu {...menuPropsRest} aria-labelledby={ariaLabelledBy} />
         </Autocomplete.Overlay>
       </Autocomplete>
     </BaseStyles>
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index f95c4e7f7c2..99787526a56 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -163,6 +163,7 @@ const AutocompleteInput = React.forwardRef(
 
     return (
       <Component
+        {...props}
         onFocus={handleInputFocus}
         onBlur={handleInputBlur}
         onChange={handleInputChange}
@@ -178,7 +179,6 @@ const AutocompleteInput = React.forwardRef(
         aria-owns={`${id}-listbox`}
         autoComplete="off"
         id={id}
-        {...props}
       />
     )
   },
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index 69918c48e99..d1e2a95d6b1 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -371,9 +371,9 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
                 } = item
                 return (
                   <ActionList.Item
+                    {...itemProps}
                     key={(key ?? id) as string | number}
                     onSelect={() => onAction(item)}
-                    {...itemProps}
                     id={id}
                     data-id={id}
                     role={role as AriaRole}
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index d72494a7545..c4176f24ee8 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -56,6 +56,7 @@ function AutocompleteOverlay({
 
   return showMenu ? (
     <Overlay
+      {...overlayProps}
       returnFocusRef={inputRef}
       preventFocusOnOpen={true}
       onClickOutside={closeOptionList}
@@ -64,7 +65,6 @@ function AutocompleteOverlay({
       top={position?.top}
       left={position?.left}
       className={classes.Overlay}
-      {...overlayProps}
     >
       {children}
     </Overlay>
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index b9e501a8412..575bb55de56 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -36,6 +36,7 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
 
   return (
     <img
+      {...rest}
       data-component="Avatar"
       className={clsx(className, classes.Avatar)}
       ref={ref}
@@ -52,7 +53,6 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
             }
           : (cssSizeVars as React.CSSProperties)
       }
-      {...rest}
     />
   )
 })
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
index 4a52e80cf63..ba6ab78ca62 100644
--- a/packages/react/src/Banner/Banner.stories.tsx
+++ b/packages/react/src/Banner/Banner.stories.tsx
@@ -37,25 +37,25 @@ export const Playground: StoryObj<typeof Banner> = {
       <PageLayout>
         <PageLayout.Pane divider="line" position="start">
           <Banner
+            {...rest}
             aria-label="Pane level banner"
             onDismiss={onDismiss ? action('onDismiss') : undefined}
             primaryAction={primaryAction ? <Banner.PrimaryAction>{primaryAction}</Banner.PrimaryAction> : null}
             secondaryAction={
               secondaryAction ? <Banner.SecondaryAction>{secondaryAction}</Banner.SecondaryAction> : null
             }
-            {...rest}
           />
         </PageLayout.Pane>
 
         <PageLayout.Content>
           <Banner
+            {...rest}
             aria-label="Content level banner"
             onDismiss={onDismiss ? action('onDismiss') : undefined}
             primaryAction={primaryAction ? <Banner.PrimaryAction>{primaryAction}</Banner.PrimaryAction> : null}
             secondaryAction={
               secondaryAction ? <Banner.SecondaryAction>{secondaryAction}</Banner.SecondaryAction> : null
             }
-            {...rest}
           />
         </PageLayout.Content>
       </PageLayout>
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 81d04875cf6..9905f301dea 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -234,7 +234,7 @@ export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerPrimaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default" {...rest}>
+    <Button {...rest} ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default">
       {children}
     </Button>
   )
@@ -246,7 +246,7 @@ export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerSecondaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="link" {...rest}>
+    <Button {...rest} ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="link">
       {children}
     </Button>
   )
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 9077d733daf..d1f17dfc122 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -38,13 +38,14 @@ function BaseStyles({
 
   return (
     <Component
+      {...rest}
       className={newClassName}
-      data-portal-root
       /**
        * We need to map valid primer/react color modes onto valid color modes for primer/primitives
        * valid color modes for primer/primitives: auto | light | dark
        * valid color modes for primer/primer: auto | day | night | light | dark
        */
+      data-portal-root
       data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
@@ -52,7 +53,6 @@ function BaseStyles({
         ...baseStyles,
         ...style,
       }}
-      {...rest}
     >
       {children}
     </Component>
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index b773b1f9596..d3ea1c3140c 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -101,6 +101,7 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
     return (
       <Details ref={detailsRefCallback} className={classes.MenuDetails}>
         <IconButton
+          {...rest}
           as="summary"
           role="button"
           ref={menuButtonRef}
@@ -111,7 +112,6 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
           size="small"
           icon={KebabHorizontalIcon}
           tooltipDirection="e"
-          {...rest}
         />
         <div ref={menuContainerRef} className={classes.MenuOverlay}>
           <ActionList>
@@ -354,10 +354,10 @@ function BreadcrumbsItemComponent<As extends React.ElementType>(
   const {as: Component = 'a', selected, className, ...rest} = props
   return (
     <Component
+      {...rest}
       className={clsx(className, classes.Item, selected && 'selected')}
       aria-current={selected ? 'page' : undefined}
       ref={ref}
-      {...rest}
     />
   )
 }
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index ad4c4968a61..431f358065a 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -5,7 +5,7 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 
 const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => {
   return (
-    <ButtonBase ref={forwardedRef} as="button" type="button" {...props}>
+    <ButtonBase {...props} ref={forwardedRef} as="button" type="button">
       {children}
     </ButtonBase>
   )
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 97f3564e35c..3785b2d55b8 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -87,8 +87,8 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f
       data-loading-wrapper
     >
       <Component
-        aria-disabled={loading ? true : undefined}
         {...rest}
+        aria-disabled={loading ? true : undefined}
         // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
         ref={innerRef}
         className={clsx(classes.ButtonBase, className)}
diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx
index 7c439047429..521e25ab6dd 100644
--- a/packages/react/src/Button/IconButton.tsx
+++ b/packages/react/src/Button/IconButton.tsx
@@ -35,13 +35,13 @@ const IconButton = forwardRef(
     if (withoutTooltip) {
       return (
         <ButtonBase
+          {...props}
           icon={Icon}
           className={clsx(className, classes.IconButton)}
           data-component="IconButton"
           type="button"
           aria-label={ariaLabel}
           disabled={disabled}
-          {...props}
           // @ts-expect-error StyledButton wants both Anchor and Button refs
           ref={forwardedRef}
         />
@@ -57,14 +57,14 @@ const IconButton = forwardRef(
           keybindingHint={keybindingHint ?? keyshortcuts}
         >
           <ButtonBase
+            {...props}
             icon={Icon}
             className={clsx(className, classes.IconButton)}
             data-component="IconButton"
             type="button"
-            aria-keyshortcuts={keyshortcuts ?? undefined}
             // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
+            aria-keyshortcuts={keyshortcuts ?? undefined}
             aria-label={description ? ariaLabel : undefined}
-            {...props}
           />
         </Tooltip>
       )
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index bac52d497b3..5e1aded4a99 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -7,7 +7,7 @@ export type LinkButtonProps = BaseLinkButtonProps & ButtonProps
 
 const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => {
   return (
-    <ButtonBase as={Component} ref={forwardedRef} {...props}>
+    <ButtonBase {...props} as={Component} ref={forwardedRef}>
       {children}
     </ButtonBase>
   )
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 4250ff75396..e2e4edd8ecc 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -17,7 +17,7 @@ const StatefulLoadingButton = (props: StatefulLoadingButtonProps) => {
     setIsLoading(true)
   }
 
-  return <Button loading={isLoading} onClick={handleClick} {...props} />
+  return <Button {...props} loading={isLoading} onClick={handleClick} />
 }
 
 describe('IconButton', () => {
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 095ac33d9cc..c2238e72e45 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -26,7 +26,7 @@ export const Default = () => (
 export const Playground: StoryFn<ButtonProps & {buttonCount: number}> = args => {
   const {buttonCount = 3, ...buttonProps} = args
   const buttons = Array.from({length: buttonCount}, (_, i) => (
-    <Button key={i} {...buttonProps}>
+    <Button {...buttonProps} key={i}>
       {`Button ${i + 1}`}
     </Button>
   ))
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index cd07d132175..7f02b17a99a 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -27,7 +27,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BaseComponent {...rest} ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role}>
       {buttons}
     </BaseComponent>
   )
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index 1ffafd73c8e..982e167f4a7 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -19,7 +19,7 @@ export const Playground = ({value: _value, checked, ...args}: FormControlArgs<Ch
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Checkbox value="default" checked={checked} {...args} />
+        <Checkbox {...args} value="default" checked={checked} />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index fd064c7973c..683c04c91a5 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -66,7 +66,7 @@ const CheckboxGroup: FCWithSlotMarker<React.PropsWithChildren<CheckboxGroupProps
         },
       }}
     >
-      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
+      <CheckboxOrRadioGroup {...rest} disabled={disabled}>
         {children}
       </CheckboxOrRadioGroup>
     </CheckboxGroupContext.Provider>
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index 0d106c78d50..cdec15393b5 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -37,7 +37,7 @@ const CircleBadge = <As extends React.ElementType>({as: Component = 'div', ...pr
   />
 )
 
-const CircleBadgeIcon = (props: OcticonProps) => <Octicon className={styles.CircleBadgeIcon} {...props} />
+const CircleBadgeIcon = (props: OcticonProps) => <Octicon {...props} className={styles.CircleBadgeIcon} />
 
 CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 1c6be800b36..c67180f9ec0 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -49,11 +49,11 @@ export const Playground = ({open, ...args}: PlaygroundProps) => {
       </Button>
       {(isOpen || open) && (
         <ConfirmationDialog
+          {...args}
           title="Delete universe?"
           onClose={onDialogClose}
           confirmButtonContent="Delete it!"
           confirmButtonType="danger"
-          {...args}
         >
           Deleting the universe could have disastrous effects, including but not limited to destroying all life on
           Earth.
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index f493bf495e1..03d948bfa39 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -26,7 +26,7 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
     }, [])
 
     return (
-      <details className={clsx(className, classes.Details)} {...rest} ref={ref}>
+      <details {...rest} className={clsx(className, classes.Details)} ref={ref}>
         {children}
       </details>
     )
@@ -46,7 +46,7 @@ export type SummaryProps<As extends React.ElementType> = {
 function Summary<As extends React.ElementType>({as, children, ...props}: SummaryProps<As>) {
   const Component = as ?? 'summary'
   return (
-    <Component as={Component === 'summary' ? null : 'summary'} {...props}>
+    <Component {...props} as={Component === 'summary' ? null : 'summary'}>
       {children}
     </Component>
   )
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index ead5d97a041..17f8a11d02e 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -9,7 +9,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
       return (
-        <Details data-testid="details" {...getDetailsProps()}>
+        <Details {...getDetailsProps()} data-testid="details">
           <Details.Summary>hi</Details.Summary>
         </Details>
       )
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 9bfacac1238..a3695b81823 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -308,21 +308,21 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     <>
       <Portal>
         <div
+          {...positionDataAttributes}
           ref={backdropRef}
           className={classes.Backdrop}
-          {...positionDataAttributes}
           onClick={onBackdropClick}
           onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
             setLastMouseDownIsBackdrop(e.target === e.currentTarget)
           }}
         >
           <div
+            {...positionDataAttributes}
             ref={dialogRef}
             role={role}
             aria-labelledby={dialogLabelId}
             aria-describedby={dialogDescriptionId}
             aria-modal
-            {...positionDataAttributes}
             data-width={width}
             data-height={height}
             className={clsx(className, classes.Dialog)}
@@ -343,14 +343,14 @@ _Dialog.displayName = 'Dialog'
 type StyledHeaderProps = React.ComponentProps<'div'>
 
 const Header = React.forwardRef<HTMLDivElement, StyledHeaderProps>(function Header({className, ...rest}, forwardRef) {
-  return <div ref={forwardRef} className={clsx(className, classes.Header)} {...rest} />
+  return <div {...rest} ref={forwardRef} className={clsx(className, classes.Header)} />
 })
 Header.displayName = 'Dialog.Header'
 
 type StyledTitleProps = React.ComponentProps<'h1'>
 
 const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {
-  return <h1 ref={forwardRef} className={clsx(className, classes.Title)} {...rest} />
+  return <h1 {...rest} ref={forwardRef} className={clsx(className, classes.Title)} />
 })
 Title.displayName = 'Dialog.Title'
 
@@ -360,14 +360,14 @@ const Subtitle = React.forwardRef<HTMLHeadingElement, StyledSubtitleProps>(funct
   {className, ...rest},
   forwardRef,
 ) {
-  return <h2 ref={forwardRef} className={clsx(className, classes.Subtitle)} {...rest} />
+  return <h2 {...rest} ref={forwardRef} className={clsx(className, classes.Subtitle)} />
 })
 Subtitle.displayName = 'Dialog.Subtitle'
 
 type StyledBodyProps = React.ComponentProps<'div'>
 
 const Body = React.forwardRef<HTMLDivElement, StyledBodyProps>(function Body({className, ...rest}, forwardRef) {
-  return <div ref={forwardRef} className={clsx(className, classes.Body)} {...rest} />
+  return <div {...rest} ref={forwardRef} className={clsx(className, classes.Body)} />
 }) as PolymorphicForwardRefComponent<'div', StyledBodyProps>
 
 Body.displayName = 'Dialog.Body'
@@ -375,7 +375,7 @@ Body.displayName = 'Dialog.Body'
 type StyledFooterProps = React.ComponentProps<'div'>
 
 const Footer = React.forwardRef<HTMLDivElement, StyledFooterProps>(function Footer({className, ...rest}, forwardRef) {
-  return <div ref={forwardRef} className={clsx(className, classes.Footer)} {...rest} />
+  return <div {...rest} ref={forwardRef} className={clsx(className, classes.Footer)} />
 })
 Footer.displayName = 'Dialog.Footer'
 
@@ -398,8 +398,8 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
         const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
         return (
           <Button
-            key={index}
             {...buttonProps}
+            key={index}
             // 'normal' value is equivalent to 'default', this is used for backwards compatibility
             variant={buttonType === 'normal' ? 'default' : buttonType}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index 61ccb33538e..0a29ddfc0ad 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -265,10 +265,10 @@ export function FilteredActionList({
     let firstGroupIndex = 0
     const actionListContent = (
       <ActionList
+        {...listProps}
         ref={usingRemoveActiveDescendant ? listRef : listContainerRefCallback}
         showDividers={showItemDividers}
         selectionVariant={selectionVariant}
-        {...listProps}
         role="listbox"
         id={listId}
         className={classes.ActionList}
@@ -287,11 +287,11 @@ export function FilteredActionList({
                     const key = itemKey ?? item.id?.toString() ?? itemIndex.toString()
                     return (
                       <MappedActionListItem
+                        {...item}
                         key={key}
                         className={clsx(classes.ActionListItem, 'className' in item ? item.className : undefined)}
                         data-input-focused={isInputFocused ? '' : undefined}
                         data-first-child={index === firstGroupIndex && itemIndex === 0 ? '' : undefined}
-                        {...item}
                         renderItem={listProps.renderItem}
                       />
                     )
@@ -303,11 +303,11 @@ export function FilteredActionList({
               const key = itemKey ?? item.id?.toString() ?? index.toString()
               return (
                 <MappedActionListItem
+                  {...item}
                   key={key}
                   className={clsx(classes.ActionListItem, 'className' in item ? item.className : undefined)}
                   data-input-focused={isInputFocused ? '' : undefined}
                   data-first-child={index === 0 ? '' : undefined}
-                  {...item}
                   renderItem={listProps.renderItem}
                 />
               )
@@ -341,6 +341,7 @@ export function FilteredActionList({
     <div ref={inputAndListContainerRef} className={clsx(className, classes.Root)} data-testid="filtered-action-list">
       <div className={classes.Header}>
         <TextInput
+          {...restTextInputProps}
           ref={inputRef}
           block
           width="auto"
@@ -359,7 +360,6 @@ export function FilteredActionList({
           loaderPosition={'leading'}
           loading={loading && !loadingType.appearsInBody}
           className={clsx(textInputClassName, {[classes.FullScreenTextInput]: fullScreenOnNarrow})}
-          {...restTextInputProps}
         />
       </div>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
@@ -404,15 +404,16 @@ function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
   } = item
 
   return (
+    // @ts-expect-error - ItemInput props may not perfectly match ActionList.Item element type
     <ActionList.Item
-      role="option"
+      {...rest}
       // @ts-ignore - for now
+      role="option"
       onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
         if (typeof onAction === 'function')
           onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
       }}
       data-id={id}
-      {...rest}
     >
       {LeadingVisual ? (
         <ActionList.LeadingVisual>
diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
index bbd4d134a59..4b6c54ebca9 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
@@ -52,7 +52,7 @@ function LoadingSpinner({...props}): JSX.Element {
 function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
   return (
     <div className={classes.LoadingSkeletonContainer}>
-      <Stack direction="vertical" justify="center" gap="condensed" {...props}>
+      <Stack {...props} direction="vertical" justify="center" gap="condensed">
         {Array.from({length: rows}, (_, i) => (
           <Stack key={i} direction="horizontal" gap="condensed" align="center">
             <SkeletonBox width="16px" height="16px" />
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 5a645dff7f1..5b24c295a0c 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -111,12 +111,12 @@ const CustomTextInput = (
   props: React.JSX.IntrinsicAttributes &
     React.ClassAttributes<HTMLInputElement> &
     React.InputHTMLAttributes<HTMLInputElement>,
-) => <input type="text" {...props} />
+) => <input {...props} type="text" />
 const CustomCheckboxInput = (
   props: React.JSX.IntrinsicAttributes &
     React.ClassAttributes<HTMLInputElement> &
     React.InputHTMLAttributes<HTMLInputElement>,
-) => <input type="checkbox" {...props} />
+) => <input {...props} type="checkbox" />
 
 export const FormControlWithCustomInput = () => {
   const [value, setValue] = React.useState('mona lisa')
@@ -301,10 +301,10 @@ export const WithSelectPanel = () => {
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, id, ...anchorProps}) => (
           <Button
+            {...anchorProps}
             trailingAction={TriangleDownIcon}
             aria-labelledby={`select_panel_label selectpanel_wrapper`}
             id={id}
-            {...anchorProps}
             aria-haspopup="dialog"
           >
             <span id="selectpanel_wrapper">{children ?? 'Select Labels'}</span>
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 531938db66d..cb8a26bf09c 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -13,7 +13,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
   forwardRef,
 ) {
   return (
-    <BaseComponent ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
+    <BaseComponent {...rest} ref={forwardRef} className={clsx(className, classes.Header)}>
       {children}
     </BaseComponent>
   )
@@ -26,7 +26,7 @@ const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function He
   forwardRef,
 ) {
   return (
-    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
+    <div {...rest} ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full}>
       {children}
     </div>
   )
@@ -39,7 +39,7 @@ const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function
   forwardRef,
 ) {
   return (
-    <BaseComponent ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
+    <BaseComponent {...rest} ref={forwardRef} className={clsx(className, classes.HeaderLink)}>
       {children}
     </BaseComponent>
   )
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 56c7c7ed149..e3db911c595 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -33,7 +33,7 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
     }, [innerRef])
   }
 
-  return <Component className={clsx(className, classes.Heading)} data-variant={variant} {...props} ref={innerRef} />
+  return <Component {...props} className={clsx(className, classes.Heading)} data-variant={variant} ref={innerRef} />
 }) as PolymorphicForwardRefComponent<HeadingLevels, StyledHeadingProps>
 
 Heading.displayName = 'Heading'
diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx
index ff16fb8675d..2bd6d76578c 100644
--- a/packages/react/src/KeybindingHint/components/Sequence.tsx
+++ b/packages/react/src/KeybindingHint/components/Sequence.tsx
@@ -16,7 +16,7 @@ export const Sequence = ({keys, ...chordProps}: KeybindingHintProps) =>
           </>
         )
       }
-      <Chord keys={c} {...chordProps} />
+      <Chord {...chordProps} keys={c} />
     </Fragment>
   ))
 
diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index 640d16e2de0..5a022e407e6 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -31,7 +31,7 @@ const Label = React.forwardRef(function Label(
   ref,
 ) {
   return (
-    <Component className={clsx(className, classes.Label)} data-size={size} data-variant={variant} ref={ref} {...rest} />
+    <Component {...rest} className={clsx(className, classes.Label)} data-size={size} data-variant={variant} ref={ref} />
   )
 }) as PolymorphicForwardRefComponent<'span', LabelProps>
 
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index 2b9c6ba4e73..ef96ff06de7 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta = {
 }
 
 const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
-  <div className={classes.ResizableContainer} {...props}>
+  <div {...props} className={classes.ResizableContainer}>
     {children}
   </div>
 )
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index fc13d4b834a..30c43b022bd 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta = {
 }
 
 const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
-  <div className={classes.ResizableContainer} {...props}>
+  <div {...props} className={classes.ResizableContainer}>
     {children}
   </div>
 )
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 7c0175b8fc1..c011f7383c9 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -86,7 +86,7 @@ const OverlayToggle: React.FC<
       anchorOffset={overlayPaddingPx * -1}
       alignmentOffset={overlayPaddingPx * -1}
       renderAnchor={props => (
-        <Button variant="invisible" size="small" {...props} ref={expandButtonRef}>
+        <Button {...props} variant="invisible" size="small" ref={expandButtonRef}>
           <VisuallyHidden>Show +{hiddenItemIds.length} more</VisuallyHidden>
           <span aria-hidden="true">+{hiddenItemIds.length}</span>
         </Button>
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 59d218173c1..eae8b646539 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -51,12 +51,12 @@ export const UnwrappedLink = <As extends React.ElementType = 'a'>(
 
   return (
     <Component
+      {...restProps}
       className={clsx(className, classes.Link)}
       data-muted={restProps.muted}
       data-inline={inline}
       data-underline={underline}
       data-hover-color={hoverColor}
-      {...restProps}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={innerRef as any}
     />
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 218d1135b1e..15ac5cab9ae 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -395,7 +395,7 @@ export const ExpandWithCustomItems: StoryFn = () => {
 
   const Item = ({leadingVisual, text, trailingVisual, ...rest}: CustomItemProps) => {
     return (
-      <NavList.Item key={text} onClick={() => {}} href="#" {...rest}>
+      <NavList.Item {...rest} key={text} onClick={() => {}} href="#">
         {leadingVisual ? (
           <NavList.LeadingVisual>
             <Octicon icon={leadingVisual} />
@@ -498,7 +498,7 @@ export const WithGroupExpand = () => {
 export const GroupWithExpandAndCustomItems = () => {
   const Item = ({leadingVisual: LeadingVisual, text, trailingVisual: TrailingVisual, ...rest}: CustomItemProps) => {
     return (
-      <NavList.Item onClick={() => {}} href="#" {...rest} key={text}>
+      <NavList.Item {...rest} onClick={() => {}} href="#" key={text}>
         {LeadingVisual ? (
           <NavList.LeadingVisual>
             <LeadingVisual />
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 8648957d4aa..d03ba5fe089 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -92,11 +92,11 @@ const Item = React.forwardRef<HTMLAnchorElement, NavListItemProps>(
 
     return (
       <ActionList.LinkItem
+        {...props}
         ref={ref}
         aria-current={ariaCurrent}
         active={Boolean(ariaCurrent) && ariaCurrent !== 'false'}
         style={{'--subitem-depth': depth} as React.CSSProperties}
-        {...props}
       >
         {children}
       </ActionList.LinkItem>
@@ -331,6 +331,7 @@ export const GroupExpand = React.forwardRef<HTMLButtonElement, NavListGroupExpan
 
         {currentPage < pages || currentPage === 0 ? (
           <ActionList.Item
+            {...props}
             as="button"
             aria-expanded="false"
             ref={forwardedRef}
@@ -346,7 +347,6 @@ export const GroupExpand = React.forwardRef<HTMLButtonElement, NavListGroupExpan
                 focusTarget[focusTarget.length - 1].focus()
               }
             }}
-            {...props}
           >
             {label}
             <TrailingVisual>
@@ -371,11 +371,11 @@ export type NavListGroupHeadingProps = ActionListGroupHeadingProps
 const GroupHeading: React.FC<NavListGroupHeadingProps> = ({as = 'h3', className, ...rest}) => {
   return (
     <ActionList.GroupHeading
+      {...rest}
       as={as}
       className={clsx(navListClasses.GroupHeading, className)}
       data-component="NavList.GroupHeading"
       headingWrapElement="li"
-      {...rest}
     />
   )
 }
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index ea024064a9d..57c955744cb 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -11,7 +11,7 @@ export default meta
 export const Default = () => <Octicon icon={HeartFillIcon} aria-label="Like" size={32} />
 
 export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, icon: _icon, ...args}) => {
-  return <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
+  return <Octicon {...args} icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} />
 }
 
 Playground.args = {
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
index 55736b4e2b5..53a75691dad 100644
--- a/packages/react/src/Overlay/Overlay.dev.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -40,6 +40,7 @@ export const PreventFocusOnOpen = (args: Args) => {
       </Button>
       {isOpen || args.open ? (
         <Overlay
+          {...args}
           initialFocusRef={confirmButtonRef}
           returnFocusRef={openButtonRef}
           ignoreClickRefs={[openButtonRef]}
@@ -51,7 +52,6 @@ export const PreventFocusOnOpen = (args: Args) => {
           aria-label={args.role === 'dialog' ? 'Sample overlay' : undefined}
           preventFocusOnOpen={args.preventFocusOnOpen}
           ref={containerRef}
-          {...args}
         >
           <div className={classes.ResponsiveWidth}>
             <div className={classes.OverlayContent}>
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index 8f31d3d8879..16cc67f0066 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -297,6 +297,7 @@ export const Playground = (args: Args) => {
       </Button>
       {isOpen || args.open ? (
         <Overlay
+          {...args}
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
           ignoreClickRefs={[buttonRef]}
@@ -307,7 +308,6 @@ export const Playground = (args: Args) => {
           aria-modal={args.role === 'dialog'}
           aria-label={args.role === 'dialog' ? 'Sample overlay' : undefined}
           ref={containerRef}
-          {...args}
         >
           <div className={classes.ResponsiveWidth}>
             <div className={classes.FullHeightContent}>
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 89557b79c29..9c15a1ce81a 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -111,6 +111,14 @@ export const BaseOverlay = React.forwardRef(
     return (
       <Component
         {...rest}
+        {...{
+          [`data-width-${width}`]: '',
+          [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined,
+          [`data-height-${height}`]: '',
+          [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined,
+          [`data-visibility-${visibility}`]: '',
+          [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined,
+        }}
         ref={forwardedRef}
         style={
           {
@@ -122,14 +130,6 @@ export const BaseOverlay = React.forwardRef(
             ...styleFromProps,
           } as React.CSSProperties
         }
-        {...{
-          [`data-width-${width}`]: '',
-          [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined,
-          [`data-height-${height}`]: '',
-          [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined,
-          [`data-visibility-${visibility}`]: '',
-          [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined,
-        }}
         className={clsx(className, classes.Overlay)}
       />
     )
@@ -233,6 +233,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
     return (
       <Portal containerName={portalContainerName}>
         <BaseOverlay
+          {...props}
           role={role}
           width={width}
           data-reflow-container={overflowEnabled || !preventOverflow ? true : undefined}
@@ -242,7 +243,6 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
           height={height}
           visibility={visibility}
           data-responsive={responsiveVariant}
-          {...props}
         />
       </Portal>
     )
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 2289585a79d..5523af1ea18 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -126,7 +126,7 @@ const ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div className={clsx(classes.ContextArea, className)} {...getHiddenDataAttributes(hidden)}>
+    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.ContextArea, className)}>
       {children}
     </div>
   )
@@ -148,12 +148,12 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
     return (
       <>
         <Link
+          {...getHiddenDataAttributes(hidden)}
           ref={ref}
           as={as}
           aria-label={ariaLabel}
           muted
           className={clsx(classes.ParentLink, className)}
-          {...getHiddenDataAttributes(hidden)}
           href={href}
         >
           <ArrowLeftIcon />
@@ -175,7 +175,7 @@ const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div className={clsx(classes.ContextBar, className)} {...getHiddenDataAttributes(hidden)}>
+    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.ContextBar, className)}>
       {children}
     </div>
   )
@@ -189,7 +189,7 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div className={clsx(classes.ContextAreaActions, className)} {...getHiddenDataAttributes(hidden)}>
+    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.ContextAreaActions, className)}>
       {children}
     </div>
   )
@@ -208,11 +208,11 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
     const currentVariant = useResponsiveValue(variant, 'medium')
     return (
       <div
+        {...getHiddenDataAttributes(hidden)}
         className={clsx(classes.TitleArea, className)}
         ref={titleAreaRef}
         data-component="TitleArea"
         data-size-variant={currentVariant}
-        {...getHiddenDataAttributes(hidden)}
       >
         {children}
       </div>
@@ -230,9 +230,9 @@ const LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>
 }) => {
   return (
     <div
+      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.LeadingAction, className)}
       data-component="PH_LeadingAction"
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -245,9 +245,9 @@ LeadingAction.__SLOT__ = Symbol('PageHeader.LeadingAction')
 const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
+      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.Breadcrumbs, className)}
       data-component="PH_Breadcrumbs"
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -258,9 +258,9 @@ const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({chil
 const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
+      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.LeadingVisual, className)}
       data-component="PH_LeadingVisual"
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -274,11 +274,11 @@ export type TitleProps = {
 const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, className, hidden = false, as = 'h2'}) => {
   return (
     <Heading
+      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.Title, className)}
       data-component="PH_Title"
       data-hidden={hidden}
       as={as}
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </Heading>
@@ -293,9 +293,9 @@ const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
+      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.TrailingVisual, className)}
       data-component="PH_TrailingVisual"
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -309,9 +309,9 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
+      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.TrailingAction, className)}
       data-component="PH_TrailingAction"
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -322,7 +322,7 @@ export type ActionsProps = React.PropsWithChildren<ChildrenPropTypes>
 
 const Actions = ({children, className, hidden = false}: ActionsProps) => {
   return (
-    <div className={clsx(classes.Actions, className)} data-component="PH_Actions" {...getHiddenDataAttributes(hidden)}>
+    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.Actions, className)} data-component="PH_Actions">
       {children}
     </div>
   )
@@ -331,7 +331,7 @@ const Actions = ({children, className, hidden = false}: ActionsProps) => {
 // PageHeader.Description: The description area of the header. Visible on all viewports
 const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
-    <div className={clsx(classes.Description, className)} {...getHiddenDataAttributes(hidden)}>
+    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.Description, className)}>
       {children}
     </div>
   )
@@ -360,11 +360,11 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
   return (
     <BaseComponent
       // Render `aria-label` and `aria-labelledby` only on `nav` elements
+      {...getHiddenDataAttributes(hidden)}
       aria-label={BaseComponent === 'nav' ? ariaLabel : undefined}
       aria-labelledby={BaseComponent === 'nav' ? ariaLabelledBy : undefined}
       className={clsx(classes.Navigation, className)}
       data-component="PH_Navigation"
-      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </BaseComponent>
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 8d8ae16fbfd..8b0ea140fb2 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -687,10 +687,10 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           position={position}
         />
         <div
-          ref={paneRef}
           {...(hasOverflow ? overflowProps : {})}
           {...labelProp}
           {...(id && {id: paneId})}
+          ref={paneRef}
           className={classes.Pane}
           data-resizable={resizable || undefined}
           style={
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index c0bead6c382..5f97d7cf497 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -3,7 +3,7 @@ import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
 
 const Pagehead = ({as: BaseComponent = 'div', className, ...rest}: PageheadProps) => {
-  return <BaseComponent className={clsx(classes.Pagehead, className)} {...rest} />
+  return <BaseComponent {...rest} className={clsx(classes.Pagehead, className)} />
 }
 
 /**
diff --git a/packages/react/src/Pagination/Pagination.features.stories.tsx b/packages/react/src/Pagination/Pagination.features.stories.tsx
index 0aeaac725ca..d6ae50cd921 100644
--- a/packages/react/src/Pagination/Pagination.features.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.features.stories.tsx
@@ -45,7 +45,7 @@ export const RenderLinks = () => {
         e.preventDefault()
         setPage(n)
       }}
-      renderPage={({number, ...props}) => <ReactRouterLikeLink to={`#${number}`} {...props} />}
+      renderPage={({number, ...props}) => <ReactRouterLikeLink {...props} to={`#${number}`} />}
     />
   )
 }
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
index 64a2047e6d4..f85843ab45c 100644
--- a/packages/react/src/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -45,9 +45,9 @@ export const Default = () => {
 export const Playground: StoryFn<ComponentProps<typeof Pagination>> = ({showPages, ...args}) => {
   return (
     <Pagination
+      {...args}
       onPageChange={e => e.preventDefault()}
       showPages={parseShowPagesArg(showPages as boolean | string)}
-      {...args}
     />
   )
 }
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index f2b1c62ad77..a4d63cb0a96 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -9,7 +9,7 @@ describe('Pagination', () => {
       <Pagination
         pageCount={10}
         currentPage={1}
-        renderPage={({key, number, ...props}) => <ReactRouterLikeLink key={key} to={`#${number}`} {...props} />}
+        renderPage={({key, number, ...props}) => <ReactRouterLikeLink {...props} key={key} to={`#${number}`} />}
       />,
     )
 
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 1d362001705..ce38aef7c94 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -87,7 +87,7 @@ function usePaginationPages({
 
       return (
         // @ts-ignore giving me grief about children and "as" props
-        <Component key={key} className={clsx(classes.Page)} {...props}>
+        <Component {...props} key={key} className={clsx(classes.Page)}>
           <PageLabel direction={key}>{content}</PageLabel>
         </Component>
       )
@@ -133,7 +133,7 @@ function Pagination({
   })
 
   return (
-    <nav className={clsx(classes.PaginationContainer, className)} aria-label="Pagination" {...rest}>
+    <nav {...rest} className={clsx(classes.PaginationContainer, className)} aria-label="Pagination">
       <div
         className={classes.TablePaginationSteps}
         data-hidden-viewport-ranges={getViewportRangesToHidePages(showPages).join(' ')}
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index 9f6b8b3e65a..be2de8dd4bf 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -5,7 +5,7 @@ export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; c
 export const ReactRouterLikeLink = React.forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
   ({to, children, ...props}, ref) => {
     return (
-      <a ref={ref} href={to} {...props}>
+      <a {...props} ref={ref} href={to}>
         {children}
       </a>
     )
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 80e877afba4..f2f2717bded 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -59,7 +59,7 @@ const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = (
   height = 'fit-content',
   ...props
 }) => {
-  return <div data-width={width} data-height={height} className={clsx(className, classes.PopoverContent)} {...props} />
+  return <div {...props} data-width={width} data-height={height} className={clsx(className, classes.PopoverContent)} />
 }
 
 PopoverContent.displayName = 'Popover.Content'
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 4f6f9a117ee..5003a852f0b 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -54,13 +54,13 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItemProps>(
 
     return (
       <span
-        className={clsx(className, classes.ProgressBarItem)}
         {...rest}
+        {...ariaAttributes}
+        className={clsx(className, classes.ProgressBarItem)}
         role="progressbar"
         aria-label={ariaLabel}
         ref={forwardRef}
         style={{...styles, ...style}}
-        {...ariaAttributes}
       />
     )
   },
@@ -101,11 +101,11 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
 
     return (
       <span
+        {...rest}
         ref={forwardRef}
         className={clsx(className, classes.ProgressBarContainer)}
         data-progress-display={inline ? 'inline' : 'block'}
         data-progress-bar-size={barSize}
-        {...rest}
       >
         {validChildren ? (
           children
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index c7be73a83f4..b1d8eae8edf 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -22,7 +22,7 @@ export const Playground = ({value: _value, ...args}: FormControlArgs<RadioProps>
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Radio name="default-radio-name" value="default" {...args} />
+        <Radio {...args} name="default-radio-name" value="default" />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 16a98b94a53..467d1af42bd 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -68,6 +68,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
 
     return (
       <input
+        {...rest}
         type="radio"
         value={value}
         name={name}
@@ -78,7 +79,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         required={required}
         onChange={handleOnChange}
         className={clsx(className, sharedClasses.Input, classes.Radio)}
-        {...rest}
       />
     )
   },
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index ff589e0a3c8..f2c78291440 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -50,7 +50,7 @@ const RadioGroup: FC<React.PropsWithChildren<RadioGroupProps>> = ({children, dis
         },
       }}
     >
-      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
+      <CheckboxOrRadioGroup {...rest} disabled={disabled}>
         {children}
       </CheckboxOrRadioGroup>
     </RadioGroupContext.Provider>
diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
index c9ecb5a24e4..66efc60a70f 100644
--- a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -131,20 +131,20 @@ const meta: Meta = {
 
 export const MicroFormat: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} format="micro" />
+  return <RelativeTime {...rest} noTitle={true} date={new Date(date)} format="micro" />
 }
 MicroFormat.args = {tense: 'past'}
 MicroFormat.argTypes = {format: {control: false}}
 
 export const RecentTime: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime noTitle={true} {...rest} date={new Date()} />
+  return <RelativeTime {...rest} noTitle={true} date={new Date()} />
 }
 RecentTime.argTypes = {date: {control: false}}
 
 export const CountDownTimer: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime noTitle={true} {...rest} />
+  return <RelativeTime {...rest} noTitle={true} />
 }
 CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
 CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}
diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
index b5241465cd2..4a04284bedd 100644
--- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -18,7 +18,7 @@ export const Default: StoryFn = () => <RelativeTime date={new Date('2020-01-01T0
 
 export const Playground: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} />
+  return <RelativeTime {...rest} noTitle={true} date={new Date(date)} />
 }
 
 Playground.args = {
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index 76d25fbb64c..9f14153a502 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -154,13 +154,13 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   ) : (
     // Render a segmented control
     <ul
+      {...rest}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       ref={segmentedControlContainerRef}
       className={clsx(classes.SegmentedControl, className)}
       data-full-width={isFullWidth || undefined}
       data-size={size}
-      {...rest}
     >
       {React.Children.map(children, (child, index) => {
         // Not a valid child element - skip rendering child
@@ -207,12 +207,12 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
           } else {
             return (
               <SegmentedControlIconButton
+                {...sharedChildProps}
+                {...restChildProps}
+                // Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
                 aria-label={childAriaLabel || childPropsChildren}
                 icon={visual}
-                // Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
                 className={classes.IconButton}
-                {...sharedChildProps}
-                {...restChildProps}
               />
             )
           }
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 94803bb2152..bda9f0eca75 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -39,7 +39,7 @@ const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<Segmented
 
   return (
     <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
-      <button aria-current={selected} className={clsx(classes.Button, className)} type="button" {...rest}>
+      <button {...rest} aria-current={selected} className={clsx(classes.Button, className)} type="button">
         <span className={clsx(classes.Content, 'segmentedControl-content')}>
           {LeadingVisual && (
             <div className={classes.LeadingIcon}>{isElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}</div>
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index ee70b240efd..4b6b09fb03f 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -42,12 +42,12 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
           direction={tooltipDirection}
         >
           <button
+            {...rest}
             type="button"
-            aria-current={selected}
             // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
+            aria-current={selected}
             aria-label={description ? ariaLabel : undefined}
             className={clsx(classes.Button, classes.IconButton)}
-            {...rest}
           >
             <span className={clsx(classes.Content, 'segmentedControl-content')}>
               {isElement(Icon) ? Icon : <Icon />}
@@ -61,11 +61,11 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
     return (
       <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
         <button
+          {...rest}
           type="button"
           aria-label={ariaLabel}
           aria-current={selected}
           className={clsx(classes.Button, classes.IconButton)}
-          {...rest}
         >
           <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>
         </button>
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index 5db418a413a..164dc502545 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -91,7 +91,7 @@ export const WithCss = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -133,7 +133,7 @@ const SingleSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
   return variant === 'anchored' ? (
     <SelectPanel
       renderAnchor={({children, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+        <Button {...anchorProps} trailingAction={TriangleDownIcon}>
           {children ?? 'Select Labels'}
         </Button>
       )}
@@ -152,7 +152,7 @@ const SingleSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
   ) : (
     <SelectPanel
       renderAnchor={({children, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+        <Button {...anchorProps} trailingAction={TriangleDownIcon}>
           {children ?? 'Select Labels'}
         </Button>
       )}
@@ -185,7 +185,7 @@ const MultiSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -206,7 +206,7 @@ const MultiSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -363,7 +363,7 @@ export const LotsOfItems = () => {
           placeholder="Select labels"
           subtitle="Use labels to organize issues and pull requests"
           renderAnchor={({children, ...anchorProps}) => (
-            <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+            <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
               {children}
             </Button>
           )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 00b57ebcba3..943f11bdd8a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -64,7 +64,7 @@ export const HeightInitialWithOverflowingItemsStory = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -96,7 +96,7 @@ export const HeightInitialWithUnderflowingItemsStory = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -141,7 +141,7 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -173,7 +173,7 @@ export const AboveTallBody = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -224,7 +224,7 @@ export const HeightVariationsAndScroll = () => {
         <FormControl.Label>With height:medium</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
               {children ?? 'Select Labels'}
             </Button>
           )}
@@ -245,7 +245,7 @@ export const HeightVariationsAndScroll = () => {
         <FormControl.Label>With height:auto, maxheight:medium</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
               {children ?? 'Select Labels'}
             </Button>
           )}
@@ -287,7 +287,7 @@ export const CustomItemRenderer = () => {
       <SelectPanel
         title="Select files"
         renderAnchor={anchorProps => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             Select files
           </Button>
         )}
@@ -460,7 +460,7 @@ export const WithDefaultMessage = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -566,7 +566,7 @@ export const RenderMoreOnScroll = () => {
           placeholder="Select labels"
           subtitle="Use labels to organize issues and pull requests"
           renderAnchor={({children, ...anchorProps}) => (
-            <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+            <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
               {children}
             </Button>
           )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index dd1fa062d03..c381b3c2915 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -98,7 +98,7 @@ export const WithItemDividers = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -131,7 +131,7 @@ export const WithPlaceholderForSearchInput = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -160,7 +160,7 @@ export const SingleSelect = () => {
       <FormControl.Label>Label</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -192,7 +192,7 @@ export const MultiSelect = () => {
         placeholder="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -223,7 +223,7 @@ export const WithDisabledItem = () => {
         placeholder="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -281,7 +281,7 @@ export const WithSecondaryActionButton = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -312,7 +312,7 @@ export const WithSecondaryActionLink = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -385,7 +385,7 @@ export const WithNotice = () => {
         <FormControl.Label>SelectPanel with notice</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
               {children}
             </Button>
           )}
@@ -464,7 +464,7 @@ export const WithGroups = () => {
         title="Attach files and symbols"
         subtitle="Choose which files and symbols you want to chat about. Use fewer references for more accurate responses."
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children}
           </Button>
         )}
@@ -499,7 +499,7 @@ export const WithLabelVisuallyHidden = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -583,7 +583,7 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -652,7 +652,7 @@ export const CustomisedNoInitialItems = () => {
       <SelectPanel
         title="Set projects"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -705,7 +705,7 @@ export const CustomisedNoResults: StoryObj<typeof SelectPanel> = {
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -761,7 +761,7 @@ export const WithOnCancel = () => {
         placeholder="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -798,7 +798,7 @@ export const MultiSelectModal = () => {
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -827,7 +827,7 @@ export const SingleSelectModal = () => {
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -874,7 +874,7 @@ export const WithInactiveItems = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -965,7 +965,7 @@ export const WithMessage = () => {
         <FormControl.Label>SelectPanel with message</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
               {children}
             </Button>
           )}
@@ -1001,7 +1001,7 @@ export const WithSelectAll = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 9f2d4befe4a..4b5166545a7 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -72,7 +72,7 @@ export const Default = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
             {children}
           </Button>
         )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index ccffe06d79c..3b6bba06fbb 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -54,6 +54,7 @@ function BasicSelectPanel(passthroughProps: Record<string, unknown>) {
 
   return (
     <SelectPanel
+      {...passthroughProps}
       title="test title"
       subtitle="test subtitle"
       items={items}
@@ -69,7 +70,6 @@ function BasicSelectPanel(passthroughProps: Record<string, unknown>) {
       onOpenChange={isOpen => {
         setOpen(isOpen)
       }}
-      {...passthroughProps}
     />
   )
 }
@@ -1246,6 +1246,7 @@ for (const usingRemoveActiveDescendant of [false, true]) {
 
         return (
           <SelectPanel
+            {...passthroughProps}
             title="test title"
             subtitle="test subtitle"
             items={items}
@@ -1259,7 +1260,6 @@ for (const usingRemoveActiveDescendant of [false, true]) {
             }}
             open={open}
             onOpenChange={open => setOpen(open)}
-            {...passthroughProps}
           />
         )
       }
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 7aa5fef65ce..1f876fa649f 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -148,7 +148,7 @@ const doesItemsIncludeItem = (items: ItemInput[], item: ItemInput) => {
 const defaultRenderAnchor: NonNullable<SelectPanelProps['renderAnchor']> = props => {
   const {children, ...rest} = props
   return (
-    <Button trailingAction={TriangleDownIcon} {...rest}>
+    <Button {...rest} trailingAction={TriangleDownIcon}>
       {children}
     </Button>
   )
@@ -848,12 +848,12 @@ function Panel({
             </div>
           )}
           <FilteredActionList
+            {...listProps}
             filterValue={filterValue}
             onFilterChange={onFilterChange}
             onListContainerRefChanged={onListContainerRefChanged}
             onInputRefChanged={onInputRefChanged}
             placeholderText={placeholderText}
-            {...listProps}
             variant={listProps.groupMetadata?.length ? 'horizontal-inset' : 'inset'}
             role="listbox"
             // browsers give aria-labelledby precedence over aria-label so we need to make sure
@@ -947,7 +947,7 @@ function Panel({
 
 const SecondaryButton: React.FC<ButtonProps> = props => {
   return (
-    <Button block {...props}>
+    <Button {...props} block>
       {props.children}
     </Button>
   )
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 0e80ceb2855..972c4d1579d 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -55,7 +55,7 @@ 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 (
-    <Link aria-current={isReactRouter || selected ? 'page' : undefined} className={newClassName} {...rest}>
+    <Link {...rest} aria-current={isReactRouter || selected ? 'page' : undefined} className={newClassName}>
       {children}
     </Link>
   )
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index eb52dc7800b..dcc93561d49 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -18,10 +18,10 @@ export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(funct
 ) {
   return (
     <div
+      {...props}
       ref={ref as React.RefObject<HTMLDivElement>}
       className={clsx(className, classes.SkeletonBox)}
       style={{height, width, ...(style || {})}}
-      {...props}
     />
   )
 })
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
index e3724053d5f..ad9b430f90d 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
@@ -27,8 +27,8 @@ function SkeletonAvatar({size = DEFAULT_AVATAR_SIZE, square, className, style, .
 
   return (
     <SkeletonBox
-      className={clsx(className, classes.SkeletonAvatar)}
       {...rest}
+      className={clsx(className, classes.SkeletonAvatar)}
       data-component="SkeletonAvatar"
       data-responsive={responsive ? '' : undefined}
       data-square={square ? '' : undefined}
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index 37ebb21b013..1d2a679f1a6 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -19,6 +19,7 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
   if (lines < 2) {
     return (
       <SkeletonBox
+        {...rest}
         data-component="SkeletonText"
         data-text-skeleton-size={size}
         width="100%"
@@ -27,7 +28,6 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
           ...style,
           maxWidth,
         }}
-        {...rest}
       />
     )
   }
@@ -43,12 +43,12 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
     >
       {Array.from({length: lines}, (_, index) => (
         <SkeletonBox
+          {...rest}
           key={index}
           data-component="SkeletonText"
           data-in-multiline="true"
           data-text-skeleton-size={size}
           className={clsx(className, classes.SkeletonText)}
-          {...rest}
         />
       ))}
     </div>
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index d87ff3e10b9..b4f51e50ee8 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -38,6 +38,7 @@ function Spinner({
     /* inline-flex removes the extra line height */
     <span className={classes.Box}>
       <svg
+        {...props}
         height={size}
         width={size}
         viewBox="0 0 16 16"
@@ -47,7 +48,6 @@ function Spinner({
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
         className={clsx(className, classes.SpinnerAnimation)}
         style={style}
-        {...props}
       >
         <circle
           cx="8"
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 1e902129248..099d34f57fb 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -15,6 +15,7 @@ export type SplitPageLayoutProps = {className?: string}
 export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = props => {
   return (
     <PageLayout
+      {...props}
       containerWidth="full"
       padding="none"
       columnGap="none"
@@ -23,7 +24,6 @@ export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = pro
         header: Header,
         footer: Footer,
       }}
-      {...props}
     />
   )
 }
@@ -41,7 +41,7 @@ export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Header padding={padding} divider={divider} {...props} />
+  return <PageLayout.Header {...props} padding={padding} divider={divider} />
 }
 
 Header.displayName = 'SplitPageLayout.Header'
@@ -56,7 +56,7 @@ export const Content: React.FC<React.PropsWithChildren<SplitPageLayoutContentPro
   padding = 'normal',
   ...props
 }) => {
-  return <PageLayout.Content width={width} padding={padding} {...props} />
+  return <PageLayout.Content {...props} width={width} padding={padding} />
 }
 
 Content.displayName = 'SplitPageLayout.Content'
@@ -75,11 +75,11 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
 }) => {
   return (
     <PageLayout.Pane
+      {...props}
       position={position}
       sticky={sticky}
       padding={padding}
       divider={divider}
-      {...props}
     ></PageLayout.Pane>
   )
 }
@@ -96,7 +96,7 @@ export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Footer padding={padding} divider={divider} {...props} />
+  return <PageLayout.Footer {...props} padding={padding} divider={divider} />
 }
 
 Footer.displayName = 'SplitPageLayout.Footer'
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 75a4bbc383e..ceaea8d52e1 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -85,15 +85,15 @@ const Stack = forwardRef(
   ) => {
     return (
       <Component
-        ref={forwardedRef}
         {...rest}
-        className={clsx(className, classes.Stack)}
         {...getResponsiveAttributes('gap', gap)}
         {...getResponsiveAttributes('direction', direction)}
         {...getResponsiveAttributes('align', align)}
         {...getResponsiveAttributes('wrap', wrap)}
         {...getResponsiveAttributes('justify', justify)}
         {...getResponsiveAttributes('padding', padding)}
+        ref={forwardedRef}
+        className={clsx(className, classes.Stack)}
       >
         {children}
       </Component>
@@ -125,11 +125,11 @@ type StackItemProps<As> = React.PropsWithChildren<{
 const StackItem = forwardRef(({as: Component = 'div', children, grow, shrink, className, ...rest}, forwardedRef) => {
   return (
     <Component
-      ref={forwardedRef}
       {...rest}
-      className={clsx(className, classes.StackItem)}
       {...getResponsiveAttributes('grow', grow)}
       {...getResponsiveAttributes('shrink', shrink)}
+      ref={forwardedRef}
+      className={clsx(className, classes.StackItem)}
     >
       {children}
     </Component>
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 54b56942ad6..325b938df21 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -19,7 +19,7 @@ const SubNav = React.forwardRef<HTMLElement, SubNavProps>(function SubNav(
   forwardRef,
 ) {
   return (
-    <nav ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label} {...rest}>
+    <nav {...rest} ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label}>
       <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
       {actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
     </nav>
@@ -31,7 +31,7 @@ SubNav.displayName = 'SubNav'
 
 const SubNavLinks = React.forwardRef<HTMLDivElement, SubNavLinksProps>(({children, className, ...rest}, forwardRef) => {
   return (
-    <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
+    <div {...rest} ref={forwardRef} className={clsx(className, styles.Links)}>
       {children}
     </div>
   )
@@ -44,11 +44,11 @@ const SubNavLink = React.forwardRef<HTMLAnchorElement, SubNavLinkProps>(
   ({children, className, ...rest}, forwardRef) => {
     return (
       <a
+        {...rest}
         ref={forwardRef}
         className={clsx(className, styles.Link)}
         data-selected={rest.selected}
         aria-current={rest.selected}
-        {...rest}
       >
         {children}
       </a>
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 876e130160f..3e6439312c3 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -82,12 +82,12 @@ const TabNavLink = React.forwardRef(function TabNavLink(
 ) {
   return (
     <Component
+      {...rest}
       ref={ref}
       role="tab"
       tabIndex={-1}
       aria-selected={selected ? true : undefined}
       className={clsx('TabNav-item', styles.TabNavLink, selected && 'selected', selected && styles.Selected, className)}
-      {...rest}
     />
   )
 }) as PolymorphicForwardRefComponent<'a', TabNavLinkProps>
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 6be84edb88d..9a4186fd60e 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -22,10 +22,10 @@ function Text<As extends React.ElementType>(props: TextProps<As>, ref: Forwarded
 
   return (
     <Component
+      {...rest}
       className={clsx(className, classes.Text)}
       data-size={size}
       data-weight={weight}
-      {...rest}
       ref={innerRef}
     />
   )
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 7f68ff98f1c..1a071fbda0e 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -201,19 +201,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput value="auto" {...args} />
+          <TextInput {...args} value="auto" />
         </FormControl>
       </div>
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput value="leading" {...args} loaderPosition="leading" />
+          <TextInput {...args} value="leading" loaderPosition="leading" />
         </FormControl>
       </div>
       <div className={classes.MarginBottomLarge}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput value="trailing" {...args} loaderPosition="trailing" />
+          <TextInput {...args} value="trailing" loaderPosition="trailing" />
         </FormControl>
       </div>
 
@@ -222,19 +222,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput leadingVisual={Calendar} {...args} value="auto" />
+          <TextInput {...args} leadingVisual={Calendar} value="auto" />
         </FormControl>
       </div>
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput leadingVisual={Calendar} {...args} loaderPosition="leading" value="leading" />
+          <TextInput {...args} leadingVisual={Calendar} loaderPosition="leading" value="leading" />
         </FormControl>
       </div>
       <div className={classes.MarginBottomLarge}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput leadingVisual={Calendar} {...args} loaderPosition="trailing" value="trailing" />
+          <TextInput {...args} leadingVisual={Calendar} loaderPosition="trailing" value="trailing" />
         </FormControl>
       </div>
 
@@ -243,19 +243,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
         <div className={classes.MarginBottom}>
           <FormControl>
             <FormControl.Label>Default label</FormControl.Label>
-            <TextInput trailingVisual={Calendar} {...args} value="auto" />
+            <TextInput {...args} trailingVisual={Calendar} value="auto" />
           </FormControl>
         </div>
         <div className={classes.MarginBottom}>
           <FormControl>
             <FormControl.Label>Default label</FormControl.Label>
-            <TextInput trailingVisual={Calendar} {...args} loaderPosition="leading" value="leading" />
+            <TextInput {...args} trailingVisual={Calendar} loaderPosition="leading" value="leading" />
           </FormControl>
         </div>
         <div className={classes.MarginBottomLarge}>
           <FormControl>
             <FormControl.Label>Default label</FormControl.Label>
-            <TextInput trailingVisual={Calendar} {...args} loaderPosition="trailing" value="trailing" />
+            <TextInput {...args} trailingVisual={Calendar} loaderPosition="trailing" value="trailing" />
           </FormControl>
         </div>
       </FormControl>
@@ -265,16 +265,16 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput size="small" leadingVisual={Calendar} trailingVisual={Calendar} {...args} value="auto" />
+          <TextInput {...args} size="small" leadingVisual={Calendar} trailingVisual={Calendar} value="auto" />
         </FormControl>
       </div>
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
           <TextInput
+            {...args}
             leadingVisual={Calendar}
             trailingVisual={Calendar}
-            {...args}
             loaderPosition="leading"
             value="leading"
           />
@@ -284,10 +284,10 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
           <TextInput
+            {...args}
             size="large"
             leadingVisual={Calendar}
             trailingVisual={Calendar}
-            {...args}
             loaderPosition="trailing"
             value="trailing"
           />
diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx
index 74afc18adcc..46b1854c646 100644
--- a/packages/react/src/TextInput/TextInput.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.stories.tsx
@@ -32,7 +32,7 @@ export const Playground = (args: FormControlArgs<TextInputProps>) => {
     <form className={classes.Container}>
       <FormControl {...parentArgs}>
         <FormControl.Label {...labelArgs} />
-        <TextInput value={value} onChange={handleChange} {...args} />
+        <TextInput {...args} value={value} onChange={handleChange} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
         {validationArgs.children && validationArgs.variant && (
           <FormControl.Validation {...validationArgs} variant={validationArgs.variant} />
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 5aa61e3040a..b3ec004654e 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -157,6 +157,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>
         <UnstyledTextInput
+          {...inputProps}
           ref={inputRef}
           disabled={disabled}
           onFocus={handleInputFocus}
@@ -164,7 +165,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           type={type}
           aria-required={required}
           aria-invalid={validationStatus === 'error' ? 'true' : undefined}
-          {...inputProps}
           aria-describedby={inputDescribedBy}
           data-component="input"
         />
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
index 1b923e86094..9ca3052e26d 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
@@ -28,7 +28,7 @@ const LabelledTextInputWithTokens: React.FC<React.PropsWithChildren<TextInputWit
     <label htmlFor="tokenInput" id="tokenLabel">
       Tokens
     </label>
-    <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" {...rest} />
+    <TextInputWithTokens {...rest} tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" />
   </>
 )
 
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 6d72072fa04..717b7df4d10 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -288,6 +288,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       >
         <div className={styles.InputWrapper}>
           <UnstyledTextInput
+            {...inputPropsRest}
             ref={ref}
             disabled={disabled}
             onFocus={handleInputFocus}
@@ -296,11 +297,11 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             type="text"
             className={styles.UnstyledTextInput}
             aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
-            {...inputPropsRest}
           />
         </div>
         {visibleTokens.map(({id, ...tokenRest}, i) => (
           <TokenComponent
+            {...tokenRest}
             disabled={disabled}
             key={id}
             onFocus={handleTokenFocus(i)}
@@ -314,7 +315,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             hideRemoveButton={disabled || hideTokenRemoveButtons}
             size={size}
             tabIndex={0}
-            {...tokenRest}
           />
         ))}
         {tokensAreTruncated && tokens.length - visibleTokens.length ? (
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 39d86684372..55ebf9b2fec 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -81,6 +81,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         className={className}
       >
         <textarea
+          {...rest}
           value={value}
           data-resize={resize}
           aria-required={required}
@@ -95,7 +96,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             maxHeight,
             ...style,
           }}
-          {...rest}
         />
       </TextInputBaseWrapper>
     )
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index 5d151a05f33..8268cf7a700 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -137,7 +137,7 @@ const ToggleSwitch = React.forwardRef<HTMLButtonElement, ToggleSwitchProps>(func
   if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`
 
   return (
-    <div className={clsx(classes.ToggleSwitch, className)} data-status-label-position={statusLabelPosition} {...rest}>
+    <div {...rest} className={clsx(classes.ToggleSwitch, className)} data-status-label-position={statusLabelPosition}>
       <VisuallyHidden>
         <AriaStatus announceOnShow id={loadingLabelId}>
           {isLoadingLabelVisible && loadingLabel}
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
index 7959f79346f..ed5aab378c2 100644
--- a/packages/react/src/Token/IssueLabelToken.tsx
+++ b/packages/react/src/Token/IssueLabelToken.tsx
@@ -59,6 +59,8 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
 
   return (
     <TokenBase
+      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
+      {...rest}
       onRemove={onRemove}
       id={id?.toString()}
       isSelected={isSelected}
@@ -68,8 +70,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
       style={customProperties}
       data-has-remove-button={!hideRemoveButton && !!onRemove}
       data-selected={isSelected}
-      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-      {...rest}
       ref={forwardedRef}
     >
       <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
index 25cd2278749..98d38918ec9 100644
--- a/packages/react/src/Token/Token.features.stories.tsx
+++ b/packages/react/src/Token/Token.features.stories.tsx
@@ -26,15 +26,15 @@ export const TokenWithLeadingVisual = () => {
 export const TokenWithOnRemoveFn = ({...args}) => {
   return (
     <div className={classes.TokenRow}>
-      <Token text="token" onRemove={action('remove me')} {...args} />
+      <Token {...args} text="token" onRemove={action('remove me')} />
       <Token
+        {...args}
         as="a"
         href="/?path=/story/components-token-features--issue-label-token-custom-colors"
         onRemove={action('remove me')}
         text="Link"
-        {...args}
       />
-      <Token as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" {...args} />
+      <Token {...args} as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" />
     </div>
   )
 }
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index b89f6b0d9c7..5a87030c50d 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -59,6 +59,8 @@ const Token = forwardRef((props, forwardedRef) => {
   }
   return (
     <TokenBase
+      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
+      {...rest}
       onRemove={onRemove}
       id={id?.toString()}
       className={clsx(className, classes.Token)}
@@ -66,8 +68,6 @@ const Token = forwardRef((props, forwardedRef) => {
       size={size}
       data-is-selected={props.isSelected}
       data-is-remove-btn={!(hideRemoveButton || !onRemove)}
-      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-      {...rest}
       ref={forwardedRef}
       style={{borderWidth: `${tokenBorderWidthPx}px`, ...style}}
     >
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
index 6ea5de040e7..4803c17e370 100644
--- a/packages/react/src/Token/TokenBase.tsx
+++ b/packages/react/src/Token/TokenBase.tsx
@@ -77,6 +77,11 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
   ) => {
     return (
       <Component
+        {...(Component === 'button'
+          ? (rest as React.ButtonHTMLAttributes<HTMLButtonElement>)
+          : Component === 'a'
+            ? (rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)
+            : (rest as React.HTMLAttributes<HTMLSpanElement>))}
         onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
           onKeyDown && onKeyDown(event)
 
@@ -94,11 +99,6 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
         })}
         data-size={size}
         id={id?.toString()}
-        {...(Component === 'button'
-          ? (rest as React.ButtonHTMLAttributes<HTMLButtonElement>)
-          : Component === 'a'
-            ? (rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)
-            : (rest as React.HTMLAttributes<HTMLSpanElement>))}
         // TypeScript cannot resolve polymorphic ref types at compile time
         // This assertion is safe because the ref will match the actual rendered element
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index 232a9be1900..83bf6cc7559 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -11,13 +11,13 @@ const TokenTextContainer = ({
 }: React.PropsWithChildren<Partial<TokenBaseProps>>) => {
   return (
     <Component
-      className={clsx(classes.TokenTextContainer)}
-      id={id?.toString()}
       {...(Component === 'button'
         ? (props as React.ButtonHTMLAttributes<HTMLButtonElement>)
         : Component === 'a'
           ? (props as React.AnchorHTMLAttributes<HTMLAnchorElement>)
           : (props as React.HTMLAttributes<HTMLSpanElement>))}
+      className={clsx(classes.TokenTextContainer)}
+      id={id?.toString()}
     >
       {children}
     </Component>
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 8122db14ae5..9c74589c10b 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -42,7 +42,7 @@ const Tooltip = React.forwardRef(function Tooltip(
   return (
     // This provider is used to check if an icon button is wrapped with tooltip or not.
     <TooltipContext.Provider value={value}>
-      <Component role="tooltip" aria-label={text} id={tooltipId} {...rest} className={tooltipClasses} ref={ref}>
+      <Component {...rest} role="tooltip" aria-label={text} id={tooltipId} className={tooltipClasses} ref={ref}>
         {children}
       </Component>
     </TooltipContext.Provider>
diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
index a6a8e5eedd6..b3dea2b0e9b 100644
--- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
@@ -37,7 +37,7 @@ export const Playground: StoryFn = args => {
   const {text, type, ...rest} = args
   return (
     <div className={classes.TooltipContainer}>
-      <Tooltip text={text} type="description" {...rest}>
+      <Tooltip {...rest} text={text} type="description">
         <Button>Delete</Button>
       </Tooltip>
     </div>
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index cd4411a0dd9..820f3a4cfe0 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -327,10 +327,10 @@ export const Tooltip: ForwardRefExoticComponent<
               },
             })}
           <span
+            {...rest}
             className={clsx(className, classes.Tooltip)}
             ref={tooltipElRef}
             data-direction={calculatedDirection}
-            {...rest}
             // Only need tooltip role if the tooltip is a description for supplementary information
             role={type === 'description' ? 'tooltip' : undefined}
             // stop AT from announcing the tooltip twice: when it is a label type it will be announced with "aria-labelledby",when it is a description type it will be announced with "aria-describedby"
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index a548e0a519f..8ceb9997aaf 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -7,7 +7,7 @@ import {Button, IconButton, ActionMenu, ActionList, BaseStyles, ButtonGroup} fro
 import {XIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
-  <Tooltip text="Tooltip text" {...props}>
+  <Tooltip {...props} text="Tooltip text">
     <Button>Button Text</Button>
   </Tooltip>
 )
@@ -15,7 +15,7 @@ const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) =
 const TooltipComponentWithExistingDescription = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
   <>
     <span id="external-description">External description</span>
-    <Tooltip text="Tooltip text" {...props}>
+    <Tooltip {...props} text="Tooltip text">
       <Button aria-describedby="external-description">Button Text</Button>
     </Tooltip>
   </>
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
index e888ea5d70d..7f05a63875d 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
@@ -40,7 +40,7 @@ export default {
 
 export const Playground: StoryFn = args => {
   return (
-    <UnderlineNavItem aria-current="page" {...args}>
+    <UnderlineNavItem {...args} aria-current="page">
       {args.children}
     </UnderlineNavItem>
   )
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index c72f9c57577..4e38bf02ce6 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -387,6 +387,7 @@ export const UnderlineNav = forwardRef(
 
                     return (
                       <ActionList.LinkItem
+                        {...menuItemProps}
                         key={menuItemChildren}
                         style={menuItemStyles}
                         onClick={(
@@ -399,7 +400,6 @@ export const UnderlineNav = forwardRef(
                           // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
                           typeof onSelect === 'function' && onSelect(event)
                         }}
-                        {...menuItemProps}
                       >
                         <span className={classes.MenuItemContent}>
                           {menuItemChildren}
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index 963f7c033f1..065512c274a 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -100,6 +100,7 @@ export const UnderlineNavItem = forwardRef(
     return (
       <li className={classes.UnderlineNavItem}>
         <UnderlineItem
+          {...props}
           ref={ref}
           as={Component}
           href={href}
@@ -110,7 +111,6 @@ export const UnderlineNavItem = forwardRef(
           icon={Icon}
           loadingCounters={loadingCounters}
           iconsVisible={iconsVisible}
-          {...props}
         >
           {children}
         </UnderlineItem>
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 84b23110742..04a16a2feea 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -15,7 +15,7 @@ import classes from './VisuallyHidden.module.css'
  */
 export const VisuallyHidden = ({className, children, ...rest}: VisuallyHiddenProps) => {
   return (
-    <span className={clsx(className, classes.VisuallyHidden)} {...rest}>
+    <span {...rest} className={clsx(className, classes.VisuallyHidden)}>
       {children}
     </span>
   )
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 64b32f593e3..bae5df4d604 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -20,7 +20,7 @@ function VisuallyHidden<As extends ElementType = 'span'>({
 }: VisuallyHiddenProps<As>) {
   const Component = as || 'span'
   return (
-    <Component className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
+    <Component {...rest} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})}>
       {children}
     </Component>
   )
diff --git a/packages/react/src/deprecated/ActionList/Header.tsx b/packages/react/src/deprecated/ActionList/Header.tsx
index dc820d4eee8..1da5b0f61b6 100644
--- a/packages/react/src/deprecated/ActionList/Header.tsx
+++ b/packages/react/src/deprecated/ActionList/Header.tsx
@@ -38,11 +38,11 @@ export function Header({
 }: HeaderProps): JSX.Element {
   return (
     <div
+      {...props}
       role="heading"
       className={clsx(className, classes.Header)}
       data-filled={variant === 'filled' ? '' : undefined}
       data-component="ActionList.Header"
-      {...props}
     >
       {title}
       {auxiliaryText && <span>{auxiliaryText}</span>}
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 0b4a1ed7816..5058840d7df 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -175,6 +175,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
 
   return (
     <Component
+      {...props}
       ref={ref}
       tabIndex={disabled ? undefined : -1}
       data-variant={variant}
@@ -182,7 +183,6 @@ export const Item = React.forwardRef((itemProps, ref) => {
       aria-labelledby={text ? labelId : undefined}
       aria-describedby={description ? descriptionId : undefined}
       data-divider={showDivider ? '' : undefined}
-      {...props}
       data-id={id}
       onKeyPress={keyPressHandler}
       onClick={clickHandler}
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index a598e596745..6c49ed5a1a8 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -173,9 +173,9 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwarde
     const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString()
     return (
       <ItemComponent
+        {...itemProps}
         showDivider={restProps.showItemDividers}
         selectionVariant={restProps.selectionVariant}
-        {...itemProps}
         key={key}
         style={itemStyle}
         item={item}
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index c86c401ee9b..ac28ab65baf 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -42,7 +42,7 @@ interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListP
 
 export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
 
-const ActionMenuItem = (props: ItemProps) => <Item role="menuitem" {...props} />
+const ActionMenuItem = (props: ItemProps) => <Item {...props} role="menuitem" />
 
 ActionMenuItem.displayName = 'ActionMenu.Item'
 
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index b39af5aa2da..fdc7a5dd38b 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -72,12 +72,12 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
       <>
         <span className={classes.Overlay} ref={overlayRef} />
         <Component
+          {...props}
+          {...getDialogProps()}
           tabIndex={-1}
           ref={modalRef}
           role="dialog"
           aria-modal="true"
-          {...props}
-          {...getDialogProps()}
           className={clsx(classes.Dialog, className)}
           data-width={props.wide ? 'wide' : props.narrow ? 'narrow' : 'default'}
         >
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index 96e11bf7a53..eef4a59c7f8 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -18,7 +18,7 @@ function UnderlineNav({actions, className, align, children, full, label, ...rest
     'PRC-UnderlineNav--right': align,
   })
   return (
-    <nav className={navClasses} aria-label={label} {...rest}>
+    <nav {...rest} className={navClasses} aria-label={label}>
       <div className={clsx(classes.UnderlineNavBody, 'PRC-UnderlineNav-body')}>{children}</div>
       {actions && <div className={clsx(classes.UnderlineNavActions, 'PRC-UnderlineNav-actions')}>{actions}</div>}
     </nav>
@@ -37,7 +37,7 @@ const UnderlineNavLink = React.forwardRef<HTMLAnchorElement, UnderlineNavLinkPro
   forwardRef,
 ) {
   const linkClasses = clsx(classes.UnderlineNavItem, className, classes.UnderlineNavLink)
-  return <a ref={forwardRef} data-selected={selected ? '' : undefined} className={linkClasses} {...props} />
+  return <a {...props} ref={forwardRef} data-selected={selected ? '' : undefined} className={linkClasses} />
 })
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link'
diff --git a/packages/react/src/experimental/CSSComponent/index.tsx b/packages/react/src/experimental/CSSComponent/index.tsx
index b20a6bef159..744ec61b598 100644
--- a/packages/react/src/experimental/CSSComponent/index.tsx
+++ b/packages/react/src/experimental/CSSComponent/index.tsx
@@ -3,5 +3,5 @@ import {clsx} from 'clsx'
 import classNames from './component.module.css'
 
 export const Component: React.FC<React.HTMLProps<HTMLDivElement>> = ({className, ...props}) => {
-  return <div className={clsx(classNames.Component, className)} {...props} />
+  return <div {...props} className={clsx(classNames.Component, className)} />
 }
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index e6c7ca8ac0b..e04d24e33eb 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -95,7 +95,7 @@ function IssueLabel<As extends React.ElementType>({
 
   if ('onClick' in props) {
     return (
-      <button type="button" {...props} {...sharedProps}>
+      <button {...props} {...sharedProps} type="button">
         {children}
       </button>
     )
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 04667c2b5d2..276e4e39fef 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -253,6 +253,7 @@ const Panel: React.FC<SelectPanelProps> = ({
       {Anchor}
 
       <BaseOverlay
+        {...props}
         as="dialog"
         ref={dialogRef}
         aria-labelledby={`${panelId}--title`}
@@ -271,7 +272,6 @@ const Panel: React.FC<SelectPanelProps> = ({
           } as React.CSSProperties
         }
         className={clsx(classes.Overlay, className)}
-        {...props}
         onClick={(event: React.MouseEvent<HTMLElement>) => {
           if (event.target === event.currentTarget) onClickOutside()
         }}
@@ -332,13 +332,13 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop
   if (labelText) {
     return (
       <Button
+        {...inputProps}
         ref={anchorRef}
         aria-label={`${(anchorRef as MutableRefObject<HTMLButtonElement>).current.textContent}, ${labelText}`}
-        {...inputProps}
       />
     )
   } else {
-    return <Button ref={anchorRef} {...props} />
+    return <Button {...props} ref={anchorRef} />
   }
 }) as WithSlotMarker<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>
 
@@ -357,7 +357,7 @@ const SelectPanelHeader: FCWithSlotMarker<React.ComponentPropsWithoutRef<'div'>
   const {title, description, panelId, onCancel, onClearSelection} = React.useContext(SelectPanelContext)
 
   return (
-    <div className={clsx(classes.Header, className)} {...props}>
+    <div {...props} className={clsx(classes.Header, className)}>
       <div
         className={classes.HeaderContent}
         data-description={description ? true : undefined}
@@ -444,6 +444,7 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
 
   return (
     <TextInput
+      {...props}
       ref={inputRef}
       block
       leadingVisual={SearchIcon}
@@ -466,7 +467,6 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
       className={clsx(classes.TextInput, className)}
       onChange={internalOnChange}
       onKeyDown={internalKeyDown}
-      {...props}
     />
   )
 }
@@ -512,7 +512,7 @@ SelectPanelFooter.__SLOT__ = Symbol('SelectPanel.Footer')
 
 const SecondaryButton: React.FC<ButtonProps> = props => {
   const size = useResponsiveValue(responsiveButtonSizes, 'small')
-  return <Button type="button" size={size} block {...props} />
+  return <Button {...props} type="button" size={size} block />
 }
 
 const SecondaryLink: React.FC<LinkProps> = ({className, ...props}) => {
@@ -520,7 +520,7 @@ const SecondaryLink: React.FC<LinkProps> = ({className, ...props}) => {
 
   return (
     // @ts-ignore TODO: is as prop is not recognised by button?
-    <Button as={Link} size={size} variant="invisible" block {...props} className={clsx(classes.SmallText, className)}>
+    <Button {...props} as={Link} size={size} variant="invisible" block className={clsx(classes.SmallText, className)}>
       {props.children}
     </Button>
   )
@@ -538,7 +538,7 @@ const SecondaryCheckbox: React.FC<CheckboxProps> = ({id, children, className, ..
 
   return (
     <div className={classes.SecondaryCheckbox}>
-      <Checkbox id={checkboxId} className={clsx(classes.Checkbox, className)} {...props} />
+      <Checkbox {...props} id={checkboxId} className={clsx(classes.Checkbox, className)} />
       <InputLabel htmlFor={checkboxId} className={classes.SmallText}>
         {children}
       </InputLabel>
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 7dd02c34482..4c676cfd9ef 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -172,11 +172,11 @@ const UnderlinePanels: FCWithSlotMarker<UnderlinePanelsProps> = ({
   return (
     <TabContainerComponent>
       <UnderlineWrapper
+        {...props}
         ref={wrapperRef}
         slot="tablist-wrapper"
         data-icons-visible={iconsVisible}
         className={clsx(className, classes.StyledUnderlineWrapper)}
-        {...props}
       >
         <UnderlineItemList ref={listRef} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} role="tablist">
           {tabs}
@@ -207,6 +207,7 @@ const Tab: FCWithSlotMarker<TabProps> = ({'aria-selected': ariaSelected, onSelec
 
   return (
     <UnderlineItem
+      {...props}
       as="button"
       role="tab"
       tabIndex={ariaSelected ? 0 : -1}
@@ -214,7 +215,6 @@ const Tab: FCWithSlotMarker<TabProps> = ({'aria-selected': ariaSelected, onSelec
       type="button"
       onClick={clickHandler}
       onKeyDown={keyDownHandler}
-      {...props}
     />
   )
 }
@@ -223,7 +223,7 @@ Tab.displayName = 'UnderlinePanels.Tab'
 
 const Panel: FCWithSlotMarker<PanelProps> = ({children, ...rest}) => {
   return (
-    <div role="tabpanel" {...rest}>
+    <div {...rest} role="tabpanel">
       {children}
     </div>
   )
diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx
index b68987bb9e8..413c153c57a 100644
--- a/packages/react/src/internal/components/ButtonReset.tsx
+++ b/packages/react/src/internal/components/ButtonReset.tsx
@@ -6,7 +6,7 @@ import {clsx} from 'clsx'
  */
 export const Button = ({children, className, ...rest}: React.ComponentPropsWithoutRef<'button'>) => {
   return (
-    <button className={clsx(className, classes.ButtonReset)} type="button" {...rest}>
+    <button {...rest} className={clsx(className, classes.ButtonReset)} type="button">
       {children}
     </button>
   )
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 744d71f2237..000268ecbb8 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -89,13 +89,13 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
     >
       <div>
         <Component
-          className={clsx(className, classes.GroupFieldset)}
-          data-validation={validationChild ? '' : undefined}
           {...(labelChild
             ? {
                 disabled,
               }
             : {})}
+          className={clsx(className, classes.GroupFieldset)}
+          data-validation={validationChild ? '' : undefined}
         >
           {labelChild ? (
             /*
@@ -120,7 +120,6 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
           )}
 
           <div
-            className={classes.Body}
             {...(!labelChild
               ? {
                   ['aria-labelledby']: ariaLabelledby,
@@ -129,6 +128,7 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
                   role: 'group',
                 }
               : {})}
+            className={classes.Body}
           >
             {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
           </div>
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 5f8924ce1a3..f36d5266255 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -41,12 +41,12 @@ function InputLabel({
 
   return (
     <Component
+      {...props}
       data-control-disabled={disabled ? '' : undefined}
       data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
       id={id}
       className={clsx(className, classes.Label)}
-      {...props}
     >
       {required || requiredText ? (
         <span className={classes.RequiredText}>
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 22d45d0b6d0..3c73f61945e 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -79,18 +79,18 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
         {icon && !children && ariaLabel ? (
           <IconButton
             {...accessibleLabel}
+            {...styleProps}
+            {...rest}
             tooltipDirection={tooltipDirection ?? 's'}
             variant={variant}
             type="button"
             icon={icon}
             size="small"
-            {...styleProps}
-            {...rest}
             ref={forwardedRef}
           />
         ) : (
           <ConditionalTooltip aria-label={ariaLabel}>
-            <Button variant={variant} type="button" {...styleProps} {...rest} ref={forwardedRef}>
+            <Button {...styleProps} {...rest} variant={variant} type="button" ref={forwardedRef}>
               {children}
             </Button>
           </ConditionalTooltip>
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index a88bb698e3d..b9b7f372dfc 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -66,6 +66,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
 
     return (
       <span
+        {...restProps}
         ref={forwardRef}
         className={clsx(className, styles.TextInputBaseWrapper)}
         data-block={block || undefined}
@@ -78,7 +79,6 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
         data-validation={validationStatus || undefined}
         data-variant={variant || undefined}
         style={memoizedStyle}
-        {...restProps}
       />
     )
   },
@@ -91,11 +91,11 @@ export const TextInputWrapper = React.forwardRef<HTMLElement, StyledBaseWrapperP
 ) {
   return (
     <TextInputBaseWrapper
+      {...restProps}
       ref={forwardRef}
       className={clsx(className, styles.TextInputWrapper)}
       data-leading-visual={hasLeadingVisual || undefined}
       data-trailing-visual={hasTrailingVisual || undefined}
-      {...restProps}
     />
   )
 })
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 6bb6a388cae..402abeff236 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -24,9 +24,9 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
   const {children, className, as: Component = 'nav', ...rest} = props
   return (
     <Component
+      {...rest}
       className={clsx(classes.UnderlineWrapper, className)}
       ref={ref as ForwardedRef<HTMLDivElement>}
-      {...rest}
     >
       {children}
     </Component>
@@ -35,7 +35,7 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
 
 export const UnderlineItemList = forwardRef(({children, ...rest}: PropsWithChildren, forwardedRef) => {
   return (
-    <ul className={classes.UnderlineItemList} ref={forwardedRef} {...rest}>
+    <ul {...rest} className={classes.UnderlineItemList} ref={forwardedRef}>
       {children}
     </ul>
   )
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index bb419f84f71..e0c2aa87468 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -9,7 +9,7 @@ const UnstyledTextInput = React.forwardRef<HTMLInputElement, ToggledUnstyledText
   {className, ...rest},
   forwardRef,
 ) {
-  return <input ref={forwardRef} {...rest} className={clsx(className, styles.Input)} />
+  return <input {...rest} ref={forwardRef} className={clsx(className, styles.Input)} />
 })
 UnstyledTextInput.displayName = 'UnstyledTextInput'
 
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index 8bca8a2c3db..9c1bdd2eeb6 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -36,10 +36,10 @@ export default meta
 
 const ErsatzOverlay = ({maxWidth, children, ...props}: {maxWidth?: string; children: React.ReactNode}) => (
   <div
+    {...props}
     className={classes.ErsatzOverlay}
     style={maxWidth ? ({'--ersatz-overlay-max-width': maxWidth} as React.CSSProperties) : undefined}
     data-max-width={maxWidth ? '' : undefined}
-    {...props}
   >
     {children}
   </div>
@@ -367,21 +367,21 @@ export function LinkItemStory(): JSX.Element {
           items={[
             {
               text: 'A. Vanilla action',
-              renderItem: props => <ActionList.Item onAction={() => alert('hi?')} {...props} />,
+              renderItem: props => <ActionList.Item {...props} onAction={() => alert('hi?')} />,
             },
             {
               text: 'B. Vanilla link',
-              renderItem: props => <ActionList.Item as="a" href="/about" {...props} />,
+              renderItem: props => <ActionList.Item {...props} as="a" href="/about" />,
             },
             {
               text: 'C. React Router link',
-              renderItem: props => <ActionList.Item as={ReactRouterLikeLink} to="/about" {...props} />,
+              renderItem: props => <ActionList.Item {...props} as={ReactRouterLikeLink} to="/about" />,
             },
             {
               text: 'D. NextJS style',
               renderItem: props => (
                 <NextJSLikeLink href="/about">
-                  <ActionList.Item as="a" {...props} />
+                  <ActionList.Item {...props} as="a" />
                 </NextJSLikeLink>
               ),
             },
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 0ae257473fa..47393c5aa09 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -32,7 +32,7 @@ const meta: Meta = {
 export default meta
 
 const ErsatzOverlay = ({children, ...props}: {children: React.ReactNode}) => (
-  <div className={classes.ErsatzOverlay} {...props}>
+  <div {...props} className={classes.ErsatzOverlay}>
     {children}
   </div>
 )
@@ -163,7 +163,7 @@ export function ComplexListStory(): JSX.Element {
             {groupId: '0'},
             {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
             {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
-            {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
+            {groupId: '3', renderItem: props => <ActionList.Item {...props} style={{fontWeight: 'bold'}} />},
             {groupId: '4'},
           ]}
           items={[
@@ -173,7 +173,7 @@ export function ComplexListStory(): JSX.Element {
               leadingVisual: SearchIcon,
               text: 'repo:github/github',
               groupId: '1',
-              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
+              renderItem: props => <ActionList.Item {...props} style={{color: 'rebeccapurple'}} />,
               trailingVisual: (
                 <>
                   ⌘S
@@ -185,7 +185,7 @@ export function ComplexListStory(): JSX.Element {
               leadingVisual: SearchIcon,
               text: 'repo:github/github',
               groupId: '1',
-              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
+              renderItem: props => <ActionList.Item {...props} style={{color: 'rebeccapurple'}} />,
               trailingText: '⌘S', // backward compatible
               trailingVisual: ArrowRightIcon, // backward compatible
             },
@@ -286,7 +286,7 @@ const DoubleClickableAnchor: Exclude<ActionMenuProps['renderAnchor'], null | und
     [callback],
   )
   return (
-    <Button trailingAction={TriangleDownIcon} onClick={onClick} {...rest}>
+    <Button {...rest} trailingAction={TriangleDownIcon} onClick={onClick}>
       {children}
     </Button>
   )
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index b312d8a5348..3042cf73c83 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -69,6 +69,7 @@ interface AnchorProps extends React.ComponentPropsWithRef<'div'> {
 
 const Float = ({children, top, left, width, height, sx, style, ...props}: FloatProps) => (
   <div
+    {...props}
     className={classes.Float}
     style={
       {
@@ -84,7 +85,6 @@ const Float = ({children, top, left, width, height, sx, style, ...props}: FloatP
         visibility: sx?.visibility,
       } as React.CSSProperties
     }
-    {...props}
   >
     {children}
   </div>
@@ -92,6 +92,7 @@ const Float = ({children, top, left, width, height, sx, style, ...props}: FloatP
 
 const Anchor = ({children, top, left, width, height, style, ...props}: AnchorProps) => (
   <div
+    {...props}
     className={classes.Anchor}
     style={{
       ...style,
@@ -100,7 +101,6 @@ const Anchor = ({children, top, left, width, height, style, ...props}: AnchorPro
       width: width !== undefined ? `${width}px` : undefined,
       height: height !== undefined ? `${height}px` : undefined,
     }}
-    {...props}
   >
     {children}
   </div>
@@ -225,13 +225,13 @@ export const ComplexAncestry = () => {
 }
 
 const Nav = ({children, ...props}: React.ComponentPropsWithoutRef<'nav'>) => (
-  <nav className={classes.Nav} {...props}>
+  <nav {...props} className={classes.Nav}>
     {children}
   </nav>
 )
 
 const Main = ({children, ...props}: React.ComponentPropsWithRef<'main'>) => (
-  <main className={classes.Main} {...props}>
+  <main {...props} className={classes.Main}>
     {children}
   </main>
 )
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index 6df61bdf5e6..68fd05df829 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -27,7 +27,7 @@ const HelperGlobalStyling = () => (
 )
 
 const MarginButton = ({children, ...props}: React.ComponentProps<typeof Button>) => (
-  <Button className={classes.MarginButton} {...props}>
+  <Button {...props} className={classes.MarginButton}>
     {children}
   </Button>
 )
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 8c679511cf2..1caa643b272 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -13,7 +13,7 @@ export default {
 } as Meta
 
 const MarginButton = ({children, ...props}: React.ComponentProps<typeof Button>) => (
-  <Button className={classes.MarginButton} {...props}>
+  <Button {...props} className={classes.MarginButton}>
     {children}
   </Button>
 )
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 44358b1c8e3..9d575b9b817 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -45,7 +45,7 @@ const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React
   {as, ...rest}: ActionListProps<As>,
   ref: React.ComponentPropsWithRef<As>['ref'],
 ) {
-  return <StyledActionList ref={ref} {...rest} {...(as ? {forwardedAs: as} : {})} />
+  return <StyledActionList {...rest} {...(as ? {forwardedAs: as} : {})} ref={ref} />
 })
 
 const StyledActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker = styled(
@@ -58,7 +58,7 @@ const StyledActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps
 
 const ActionListLinkItem = React.forwardRef<HTMLAnchorElement, ActionListLinkItemProps>(
   ({children, as, ...props}, ref) => (
-    <StyledActionListLinkItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
+    <StyledActionListLinkItem {...props} {...(as ? {forwardedAs: as} : {})} ref={ref}>
       {children}
     </StyledActionListLinkItem>
   ),
@@ -94,7 +94,7 @@ const StyledActionListItem: ForwardRefComponent<'li', ActionListItemProps> = sty
 `
 
 const ActionListItem = React.forwardRef<HTMLLIElement, ActionListItemProps>(({children, as, ...props}, ref) => (
-  <StyledActionListItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
+  <StyledActionListItem {...props} {...(as ? {forwardedAs: as} : {})} ref={ref}>
     {children}
   </StyledActionListItem>
 )) as ForwardRefComponent<'li', ActionListItemProps> & SlotMarker
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
index bad340bf8bf..4c587681aea 100644
--- a/packages/styled-react/src/components/Avatar.tsx
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -5,7 +5,7 @@ import {Box} from './Box'
 
 type AvatarProps = PrimerAvatarProps & StyledProps
 const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(props, ref) {
-  return <Box as={PrimerAvatar} ref={ref} {...props} />
+  return <Box {...props} as={PrimerAvatar} ref={ref} />
 })
 
 export {Avatar}
diff --git a/packages/styled-react/src/components/BaseStyles.tsx b/packages/styled-react/src/components/BaseStyles.tsx
index e58f33100e8..9d11a88325e 100644
--- a/packages/styled-react/src/components/BaseStyles.tsx
+++ b/packages/styled-react/src/components/BaseStyles.tsx
@@ -129,13 +129,14 @@ export function BaseStyles({
 
   return (
     <Component
+      {...rest}
       className={clsx('BaseStyles', className)}
-      data-portal-root
       /**
        * We need to map valid primer/react color modes onto valid color modes for primer/primitives
        * valid color modes for primer/primitives: auto | light | dark
        * valid color modes for primer/primer: auto | day | night | light | dark
        */
+      data-portal-root
       data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
@@ -143,7 +144,6 @@ export function BaseStyles({
         ...baseStyles,
         ...style,
       }}
-      {...rest}
     >
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
       {children}
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
index 7d49c8ed618..b97530a9540 100644
--- a/packages/styled-react/src/components/Button.tsx
+++ b/packages/styled-react/src/components/Button.tsx
@@ -28,7 +28,7 @@ const ButtonComponent = forwardRef(({as, sx, style: propStyle, ...props}: Button
     if (color) style['--button-color'] = color
   }
 
-  return <StyledButtonComponent style={style} sx={sxStyles} ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
+  return <StyledButtonComponent {...props} {...(as ? {forwardedAs: as} : {})} style={style} sx={sxStyles} ref={ref} />
 }) as ForwardRefComponent<'button', ButtonComponentProps> & SlotMarker
 
 // This function is used to generate a custom cssSelector for the sxProp
diff --git a/packages/styled-react/src/components/Checkbox.tsx b/packages/styled-react/src/components/Checkbox.tsx
index 3cdd244603b..2ff48042657 100644
--- a/packages/styled-react/src/components/Checkbox.tsx
+++ b/packages/styled-react/src/components/Checkbox.tsx
@@ -6,6 +6,6 @@ import {type SxProp} from '../sx'
 export type CheckboxProps = PrimerCheckboxProps & SxProp
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
-  return <Box as={PrimerCheckbox} ref={ref} {...props} />
+  return <Box {...props} as={PrimerCheckbox} ref={ref} />
 })
 ;(Checkbox as typeof Checkbox & SlotMarker).__SLOT__ = PrimerCheckbox.__SLOT__
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
index b8f9eabdf86..086cc73d74f 100644
--- a/packages/styled-react/src/components/CheckboxGroup.tsx
+++ b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -6,7 +6,7 @@ import Box from './Box'
 export type CheckboxGroupProps = PropsWithChildren<PrimerCheckboxGroupProps> & SxProp
 
 const CheckboxGroupImpl = (props: CheckboxGroupProps) => {
-  return <Box as={PrimerCheckboxGroup} {...props} />
+  return <Box {...props} as={PrimerCheckboxGroup} />
 }
 
 // Define local types based on the internal component props
@@ -17,7 +17,7 @@ type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
-  return <Box as={PrimerCheckboxGroup.Label} {...props} />
+  return <Box {...props} as={PrimerCheckboxGroup.Label} />
 }
 
 type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
@@ -26,7 +26,7 @@ type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
-  return <Box as={PrimerCheckboxGroup.Caption} {...props} />
+  return <Box {...props} as={PrimerCheckboxGroup.Caption} />
 }
 
 type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
@@ -36,7 +36,7 @@ type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
-  return <Box as={PrimerCheckboxGroup.Validation} {...props} />
+  return <Box {...props} as={PrimerCheckboxGroup.Validation} />
 }
 
 export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx
index ec07906fa56..29bbf0b525a 100644
--- a/packages/styled-react/src/components/CounterLabel.tsx
+++ b/packages/styled-react/src/components/CounterLabel.tsx
@@ -6,5 +6,5 @@ import {type SxProp} from '../sx'
 export type CounterLabelProps = PrimerCounterLabelProps & SxProp
 
 export const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(function CounterLabel(props, ref) {
-  return <Box as={PrimerCounterLabel} ref={ref} {...props} />
+  return <Box {...props} as={PrimerCounterLabel} ref={ref} />
 })
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 827be448318..7c43d2a7838 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -8,26 +8,26 @@ type DialogProps = PropsWithChildren<PrimerDialogProps> & SxProp
 
 const DialogImpl = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props, ref) {
   // @ts-expect-error - PrimerDialog is not recognized as a valid component type
-  return <Box as={PrimerDialog} ref={ref} {...props} />
+  return <Box {...props} as={PrimerDialog} ref={ref} />
 })
 
 type DialogHeaderProps = ComponentPropsWithoutRef<'div'> & SxProp
 
 const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
-  return <Box as={PrimerDialog.Header} ref={ref} {...props} />
+  return <Box {...props} as={PrimerDialog.Header} ref={ref} />
 })
 
 type StyledBodyProps = React.ComponentProps<'div'> & SxProp
 
 const DialogBody = forwardRef<HTMLDivElement, StyledBodyProps>(function DialogBody(props, ref) {
   // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
-  return <Box as={PrimerDialog.Body} ref={ref} {...props} />
+  return <Box {...props} as={PrimerDialog.Body} ref={ref} />
 })
 
 type StyledFooterProps = React.ComponentProps<'div'> & SxProp
 
 const DialogFooter = forwardRef<HTMLDivElement, StyledFooterProps>(function DialogFooter(props, ref) {
-  return <Box as={PrimerDialog.Footer} ref={ref} {...props} />
+  return <Box {...props} as={PrimerDialog.Footer} ref={ref} />
 })
 
 const Dialog = Object.assign(DialogImpl, {
diff --git a/packages/styled-react/src/components/Header.tsx b/packages/styled-react/src/components/Header.tsx
index da906c45477..5edc48eba37 100644
--- a/packages/styled-react/src/components/Header.tsx
+++ b/packages/styled-react/src/components/Header.tsx
@@ -13,6 +13,7 @@ import type {SxProp} from '../sx'
 type HeaderProps = PrimerHeaderProps & SxProp
 
 const StyledHeader = forwardRef(function Header(props, ref) {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerHeader} ref={ref} {...props} />
 }) as ForwardRefComponent<'header', HeaderProps>
 
@@ -23,10 +24,12 @@ const HeaderImpl = forwardRef(({as, ...props}: HeaderProps, ref) => (
 type HeaderItemProps = PrimerHeaderItemProps & SxProp
 
 const HeaderItem = forwardRef<HTMLDivElement, HeaderItemProps>(function HeaderItem(props, ref) {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerHeader.Item} ref={ref} {...props} />
 })
 
 const StyledHeaderLink = forwardRef<HTMLAnchorElement, PrimerHeaderLinkProps>(function HeaderLink(props, ref) {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerHeader.Link} ref={ref} {...props} />
 })
 
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
index 9c68b165c86..e82c1fae236 100644
--- a/packages/styled-react/src/components/IconButton.tsx
+++ b/packages/styled-react/src/components/IconButton.tsx
@@ -26,7 +26,7 @@ const IconButton = forwardRef(({as, sx, ...props}: IconButtonProps, ref) => {
     sxStyles = generateCustomSxProp({size}, sx)
   }
 
-  return <StyledIconButton sx={sxStyles} {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+  return <StyledIconButton {...props} {...(as ? {forwardedAs: as} : {})} sx={sxStyles} ref={ref} />
 }) as ForwardRefComponent<'a' | 'button', IconButtonProps> & SlotMarker
 
 IconButton.__SLOT__ = PrimerIconButton.__SLOT__
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index d3b15272463..f699025e188 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -20,7 +20,7 @@ const StyledNavListImpl = styled(PrimerNavList).withConfig({
 `
 
 const NavListImpl = forwardRef<HTMLElement, NavListProps>(function NavList({as, ...props}, ref) {
-  return <StyledNavListImpl ref={ref} {...(as ? {forwardedAs: as} : {})} {...props} />
+  return <StyledNavListImpl {...(as ? {forwardedAs: as} : {})} {...props} ref={ref} />
 })
 
 type NavListItemProps = PropsWithChildren<PrimerNavListItemProps> &
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 2d296ca8620..8662743bb34 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -17,18 +17,21 @@ type PageLayoutProps = PropsWithChildren<PrimerPageLayoutProps> & SxProp
 
 const PageLayoutImpl = React.forwardRef<HTMLDivElement, PageLayoutProps>((props, ref) => {
   // @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Wrapper as={PrimerPageLayout} ref={ref} {...props} />
 })
 
 type PageLayoutContentProps = PropsWithChildren<PrimerPageLayoutContentProps> & SxProp
 
 const PageLayoutContent = React.forwardRef<HTMLDivElement, PageLayoutContentProps>((props, ref) => {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Wrapper as={PrimerPageLayout.Content} ref={ref} {...props} />
 })
 
 type PageLayoutPaneProps = PropsWithChildren<PrimerPageLayoutPaneProps> & SxProp
 
 const PageLayoutPane = React.forwardRef<HTMLDivElement, PageLayoutPaneProps>((props, ref) => {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Wrapper as={PrimerPageLayout.Pane} ref={ref} {...props} />
 })
 
diff --git a/packages/styled-react/src/components/RadioGroup.tsx b/packages/styled-react/src/components/RadioGroup.tsx
index 84a6a8c29bc..8fd93b08f9f 100644
--- a/packages/styled-react/src/components/RadioGroup.tsx
+++ b/packages/styled-react/src/components/RadioGroup.tsx
@@ -6,7 +6,7 @@ import Box from './Box'
 export type RadioGroupProps = PropsWithChildren<PrimerRadioGroupProps> & SxProp
 
 const RadioGroupImpl = (props: RadioGroupProps) => {
-  return <Box as={PrimerRadioGroup} {...props} />
+  return <Box {...props} as={PrimerRadioGroup} />
 }
 
 // Define local types based on the internal component props
@@ -17,7 +17,7 @@ type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
-  return <Box as={PrimerRadioGroup.Label} {...props} />
+  return <Box {...props} as={PrimerRadioGroup.Label} />
 }
 
 type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
@@ -26,7 +26,7 @@ type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
-  return <Box as={PrimerRadioGroup.Caption} {...props} />
+  return <Box {...props} as={PrimerRadioGroup.Caption} />
 }
 
 type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
@@ -36,7 +36,7 @@ type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
-  return <Box as={PrimerRadioGroup.Validation} {...props} />
+  return <Box {...props} as={PrimerRadioGroup.Validation} />
 }
 
 export const RadioGroup = Object.assign(RadioGroupImpl, {
diff --git a/packages/styled-react/src/components/RelativeTime.tsx b/packages/styled-react/src/components/RelativeTime.tsx
index 3d8c0a0d625..e4df4ff20e1 100644
--- a/packages/styled-react/src/components/RelativeTime.tsx
+++ b/packages/styled-react/src/components/RelativeTime.tsx
@@ -7,5 +7,5 @@ export type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
 
 export function RelativeTime(props: RelativeTimeProps) {
   // @ts-expect-error the types for Box are not correctly inferred here
-  return <Box as={PrimerRelativeTime} {...props} />
+  return <Box {...props} as={PrimerRelativeTime} />
 }
diff --git a/packages/styled-react/src/components/SegmentedControl.tsx b/packages/styled-react/src/components/SegmentedControl.tsx
index cc6a50efe52..28e51cdb291 100644
--- a/packages/styled-react/src/components/SegmentedControl.tsx
+++ b/packages/styled-react/src/components/SegmentedControl.tsx
@@ -13,15 +13,15 @@ type SegmentedControlButtonProps = PropsWithChildren<PrimerSegmentedControlButto
 type SegmentedControlIconButtonProps = PropsWithChildren<PrimerSegmentedControlIconButtonProps> & SxProp
 
 const SegmentedControlButton = (props: SegmentedControlButtonProps) => {
-  return <Box as={PrimerSegmentedControl.Button} {...props} />
+  return <Box {...props} as={PrimerSegmentedControl.Button} />
 }
 
 const SegmentedControlIconButton = (props: SegmentedControlIconButtonProps) => {
-  return <Box as={PrimerSegmentedControl.IconButton} {...props} />
+  return <Box {...props} as={PrimerSegmentedControl.IconButton} />
 }
 
 const SegmentedControlImpl = (props: SegmentedControlProps) => {
-  return <Box as={PrimerSegmentedControl} {...props} />
+  return <Box {...props} as={PrimerSegmentedControl} />
 }
 
 const SegmentedControl = Object.assign(SegmentedControlImpl, {
diff --git a/packages/styled-react/src/components/StateLabel.tsx b/packages/styled-react/src/components/StateLabel.tsx
index 75e28432400..26eff4193b3 100644
--- a/packages/styled-react/src/components/StateLabel.tsx
+++ b/packages/styled-react/src/components/StateLabel.tsx
@@ -6,7 +6,7 @@ import type {SxProp} from '../sx'
 type StateLabelProps = PrimerStateLabelProps & SxProp
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
-  return <Box as={PrimerStateLabel} ref={ref} {...props} />
+  return <Box {...props} as={PrimerStateLabel} ref={ref} />
 })
 
 export {StateLabel, type StateLabelProps}
diff --git a/packages/styled-react/src/components/SubNav.tsx b/packages/styled-react/src/components/SubNav.tsx
index b5d07b599e8..caf5ea2078e 100644
--- a/packages/styled-react/src/components/SubNav.tsx
+++ b/packages/styled-react/src/components/SubNav.tsx
@@ -11,13 +11,13 @@ import type {SxProp} from '../sx'
 type SubNavProps = PrimerSubNavProps & SxProp
 
 const SubNavImpl = forwardRef<HTMLElement, SubNavProps>(function SubNav(props, ref) {
-  return <Box as={PrimerSubNav} ref={ref} {...props} />
+  return <Box {...props} as={PrimerSubNav} ref={ref} />
 })
 
 type SubNavLinkProps = PrimerSubNavLinkProps & SxProp
 
 const SubNavLink = forwardRef<HTMLAnchorElement, SubNavLinkProps>(function SubNavLink(props, ref) {
-  return <Box as={PrimerSubNav.Link} ref={ref} {...props} />
+  return <Box {...props} as={PrimerSubNav.Link} ref={ref} />
 })
 
 const SubNav = Object.assign(SubNavImpl, {
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 1777d704137..635b842754f 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -18,7 +18,7 @@ const StyledTextInput: ForwardRefComponent<'input', TextInputProps> = styled(Pri
 `
 
 const TextInputImpl = forwardRef<HTMLInputElement, TextInputProps>(({as, ...props}, ref) => {
-  return <StyledTextInput ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
+  return <StyledTextInput {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
 })
 
 const TextInputAction: ForwardRefComponent<'button', TextInputActionProps> = styled(PrimerTextInput.Action).withConfig({
diff --git a/packages/styled-react/src/components/Timeline.tsx b/packages/styled-react/src/components/Timeline.tsx
index cdd42e60662..b1c1284e8c8 100644
--- a/packages/styled-react/src/components/Timeline.tsx
+++ b/packages/styled-react/src/components/Timeline.tsx
@@ -17,23 +17,23 @@ export type TimelineBodyProps = PrimerTimelineBodyProps & SxProp
 export type TimelineBreakProps = PrimerTimelineBreakProps & SxProp
 
 const TimelineImpl = forwardRef<HTMLDivElement, TimelineProps>(function Timeline(props, ref) {
-  return <Box as={PrimerTimeline} ref={ref} {...props} />
+  return <Box {...props} as={PrimerTimeline} ref={ref} />
 })
 
 const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(function TimelineItem(props, ref) {
-  return <Box as={PrimerTimeline.Item} ref={ref} {...props} />
+  return <Box {...props} as={PrimerTimeline.Item} ref={ref} />
 })
 
 function TimelineBadge(props: TimelineBadgeProps) {
-  return <Box as={PrimerTimeline.Badge} {...props} />
+  return <Box {...props} as={PrimerTimeline.Badge} />
 }
 
 const TimelineBody = forwardRef<HTMLDivElement, TimelineBodyProps>(function TimelineBody(props, ref) {
-  return <Box as={PrimerTimeline.Body} ref={ref} {...props} />
+  return <Box {...props} as={PrimerTimeline.Body} ref={ref} />
 })
 
 const TimelineBreak = forwardRef<HTMLDivElement, TimelineBreakProps>(function TimelineBreak(props, ref) {
-  return <Box as={PrimerTimeline.Break} ref={ref} {...props} />
+  return <Box {...props} as={PrimerTimeline.Break} ref={ref} />
 })
 
 export const Timeline = Object.assign(TimelineImpl, {
diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx
index 53974f63d85..a45f92cefec 100644
--- a/packages/styled-react/src/components/ToggleSwitch.tsx
+++ b/packages/styled-react/src/components/ToggleSwitch.tsx
@@ -6,7 +6,7 @@ import type {StyledProps} from '../styled-props'
 type ToggleSwitchProps = PrimerToggleSwitchProps & Omit<StyledProps, keyof PrimerToggleSwitchProps>
 
 const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function ToggleSwitch(props, ref) {
-  return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
+  return <Box {...props} as={PrimerToggleSwitch} ref={ref} />
 })
 
 export {ToggleSwitch, type ToggleSwitchProps}
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
index 466e9299e08..6bd82e160cf 100644
--- a/packages/styled-react/src/components/Tooltip.tsx
+++ b/packages/styled-react/src/components/Tooltip.tsx
@@ -9,7 +9,7 @@ const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivEle
   HTMLDivElement,
   TooltipProps
 >(function Tooltip(props, ref) {
-  return <Box as={PrimerTooltip} ref={ref} {...props} />
+  return <Box {...props} as={PrimerTooltip} ref={ref} />
 })
 
 Tooltip.__SLOT__ = PrimerTooltip.__SLOT__
diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx
index 8ccbb31a960..3311a3a96a5 100644
--- a/packages/styled-react/src/components/UnderlineNav.tsx
+++ b/packages/styled-react/src/components/UnderlineNav.tsx
@@ -12,7 +12,7 @@ import {sx, type SxProp} from '../sx'
 export type UnderlineNavProps = PrimerUnderlineNavProps & SxProp
 
 const StyledUnderlineNav = forwardRef<HTMLElement, UnderlineNavProps>(function UnderlineNav(props, ref) {
-  return <Box as={PrimerUnderlineNav} ref={ref} {...props} />
+  return <Box {...props} as={PrimerUnderlineNav} ref={ref} />
 })
 
 export const UnderlineNavImpl = forwardRef(({as, ...props}: UnderlineNavProps, ref) => (
diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx
index 18ae4676051..c50af96fdfe 100644
--- a/packages/styled-react/src/components/UnderlinePanels.tsx
+++ b/packages/styled-react/src/components/UnderlinePanels.tsx
@@ -17,7 +17,7 @@ const StyledUnderlinePanels = styled(PrimerUnderlinePanels).withConfig<Underline
 
 // @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
 const UnderlinePanelsImpl = ({as, ...props}: UnderlinePanelsProps) => (
-  <StyledUnderlinePanels forwardedAs={as} {...props} />
+  <StyledUnderlinePanels {...props} forwardedAs={as} />
 )
 
 UnderlinePanelsImpl.displayName = 'UnderlinePanels'
diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx
index 88908a51ac0..edcd2e1051d 100644
--- a/packages/styled-react/src/components/deprecated/ActionList.tsx
+++ b/packages/styled-react/src/components/deprecated/ActionList.tsx
@@ -16,7 +16,7 @@ type ActionListItemProps = PropsWithChildren<PrimerActionListItemProps & SxProp
 type ActionListGroupProps = PropsWithChildren<PrimerActionListGroupProps & SxProp>
 
 const ActionListImpl = forwardRef<HTMLDivElement, ActionListProps>(function ActionList(props, ref) {
-  return <Box as={PrimerActionList} ref={ref} {...props} />
+  return <Box {...props} as={PrimerActionList} ref={ref} />
 })
 
 const StyledActionListItem = styled(PrimerActionList.Item).withConfig({
@@ -30,11 +30,11 @@ const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(({as, ...p
 ))
 
 function ActionListGroup(props: ActionListGroupProps) {
-  return <Box as={PrimerActionList.Group} {...props} />
+  return <Box {...props} as={PrimerActionList.Group} />
 }
 
 function ActionListDivider(props: ActionListDividerProps) {
-  return <Box as={PrimerActionList.Divider} {...props} />
+  return <Box {...props} as={PrimerActionList.Divider} />
 }
 
 const ActionList = Object.assign(ActionListImpl, {
diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx
index 98eba8edcb1..e8ff0121835 100644
--- a/packages/styled-react/src/components/deprecated/DialogV1.tsx
+++ b/packages/styled-react/src/components/deprecated/DialogV1.tsx
@@ -11,6 +11,7 @@ import type {ForwardRefComponent} from '../../polymorphic'
 type DialogProps = PrimerDialogProps & SxProp
 
 const StyledDialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props, ref) {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerDialog} ref={ref} {...props} />
 })
 
@@ -21,6 +22,7 @@ const DialogImpl = forwardRef(({as, ...props}: DialogProps, ref) => (
 type DialogHeaderProps = PrimerDialogHeaderProps & SxProp
 
 const StyledDialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
+  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 

From 0469266923da3e6d8a30052816d049eb4085d547 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 08:07:53 +0000
Subject: [PATCH 04/12] Change spread-props-first to warn and revert all
 auto-fixes

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 eslint.config.mjs                             |  2 +-
 packages/react/src/ActionBar/ActionBar.tsx    |  2 +-
 .../src/ActionList/ActionList.dev.stories.tsx |  4 +-
 .../ActionList.features.stories.tsx           |  2 +-
 packages/react/src/ActionList/Group.tsx       | 10 ++---
 packages/react/src/ActionList/Heading.tsx     |  4 +-
 packages/react/src/ActionList/Item.tsx        |  4 +-
 packages/react/src/ActionList/LinkItem.tsx    |  2 +-
 packages/react/src/ActionList/List.tsx        |  2 +-
 .../react/src/ActionList/TrailingAction.tsx   |  4 +-
 packages/react/src/ActionList/Visuals.tsx     |  6 +--
 packages/react/src/ActionMenu/ActionMenu.tsx  |  6 +--
 .../src/AnchoredOverlay/AnchoredOverlay.tsx   |  8 ++--
 .../Autocomplete.features.stories.tsx         |  4 +-
 .../src/Autocomplete/Autocomplete.stories.tsx |  8 ++--
 .../src/Autocomplete/Autocomplete.test.tsx    |  4 +-
 .../src/Autocomplete/AutocompleteInput.tsx    |  2 +-
 .../src/Autocomplete/AutocompleteMenu.tsx     |  2 +-
 .../src/Autocomplete/AutocompleteOverlay.tsx  |  2 +-
 packages/react/src/Avatar/Avatar.tsx          |  2 +-
 packages/react/src/Banner/Banner.stories.tsx  |  4 +-
 packages/react/src/Banner/Banner.tsx          |  4 +-
 packages/react/src/BaseStyles.tsx             |  4 +-
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     |  4 +-
 packages/react/src/Button/Button.tsx          |  2 +-
 packages/react/src/Button/ButtonBase.tsx      |  2 +-
 packages/react/src/Button/IconButton.tsx      |  6 +--
 packages/react/src/Button/LinkButton.tsx      |  2 +-
 .../src/Button/__tests__/Button.test.tsx      |  2 +-
 .../src/ButtonGroup/ButtonGroup.stories.tsx   |  2 +-
 .../react/src/ButtonGroup/ButtonGroup.tsx     |  2 +-
 .../react/src/Checkbox/Checkbox.stories.tsx   |  2 +-
 .../react/src/CheckboxGroup/CheckboxGroup.tsx |  2 +-
 .../react/src/CircleBadge/CircleBadge.tsx     |  2 +-
 .../ConfirmationDialog.stories.tsx            |  2 +-
 packages/react/src/Details/Details.tsx        |  4 +-
 .../src/Details/__tests__/Details.test.tsx    |  2 +-
 packages/react/src/Dialog/Dialog.tsx          | 16 ++++----
 .../FilteredActionList/FilteredActionList.tsx | 13 +++----
 .../FilteredActionListLoaders.tsx             |  2 +-
 .../FormControl.features.stories.tsx          |  6 +--
 packages/react/src/Header/Header.tsx          |  6 +--
 packages/react/src/Heading/Heading.tsx        |  2 +-
 .../KeybindingHint/components/Sequence.tsx    |  2 +-
 packages/react/src/Label/Label.tsx            |  2 +-
 .../LabelGroup.features.stories.tsx           |  2 +-
 .../src/LabelGroup/LabelGroup.stories.tsx     |  2 +-
 packages/react/src/LabelGroup/LabelGroup.tsx  |  2 +-
 packages/react/src/Link/Link.tsx              |  2 +-
 .../src/NavList/NavList.features.stories.tsx  |  4 +-
 packages/react/src/NavList/NavList.tsx        |  6 +--
 .../react/src/Octicon/Octicon.stories.tsx     |  2 +-
 .../react/src/Overlay/Overlay.dev.stories.tsx |  2 +-
 .../react/src/Overlay/Overlay.stories.tsx     |  2 +-
 packages/react/src/Overlay/Overlay.tsx        | 18 ++++-----
 packages/react/src/PageHeader/PageHeader.tsx  | 28 +++++++-------
 packages/react/src/PageLayout/PageLayout.tsx  |  2 +-
 packages/react/src/Pagehead/Pagehead.tsx      |  2 +-
 .../Pagination.features.stories.tsx           |  2 +-
 .../src/Pagination/Pagination.stories.tsx     |  2 +-
 .../react/src/Pagination/Pagination.test.tsx  |  2 +-
 packages/react/src/Pagination/Pagination.tsx  |  4 +-
 .../src/Pagination/mocks/ReactRouterLink.tsx  |  2 +-
 packages/react/src/Popover/Popover.tsx        |  2 +-
 .../react/src/ProgressBar/ProgressBar.tsx     |  6 +--
 packages/react/src/Radio/Radio.stories.tsx    |  2 +-
 packages/react/src/Radio/Radio.tsx            |  2 +-
 packages/react/src/RadioGroup/RadioGroup.tsx  |  2 +-
 .../RelativeTime.features.stories.tsx         |  6 +--
 .../src/RelativeTime/RelativeTime.stories.tsx |  2 +-
 .../src/SegmentedControl/SegmentedControl.tsx |  8 ++--
 .../SegmentedControlButton.tsx                |  2 +-
 .../SegmentedControlIconButton.tsx            |  6 +--
 .../SelectPanel/SelectPanel.dev.stories.tsx   | 12 +++---
 .../SelectPanel.examples.stories.tsx          | 18 ++++-----
 .../SelectPanel.features.stories.tsx          | 38 +++++++++----------
 .../src/SelectPanel/SelectPanel.stories.tsx   |  2 +-
 .../src/SelectPanel/SelectPanel.test.tsx      |  4 +-
 .../react/src/SelectPanel/SelectPanel.tsx     |  6 +--
 packages/react/src/SideNav.tsx                |  2 +-
 packages/react/src/Skeleton/SkeletonBox.tsx   |  2 +-
 .../src/SkeletonAvatar/SkeletonAvatar.tsx     |  2 +-
 .../react/src/SkeletonText/SkeletonText.tsx   |  4 +-
 packages/react/src/Spinner/Spinner.tsx        |  2 +-
 .../src/SplitPageLayout/SplitPageLayout.tsx   | 10 ++---
 packages/react/src/Stack/Stack.tsx            |  8 ++--
 packages/react/src/SubNav/SubNav.tsx          |  6 +--
 packages/react/src/TabNav/TabNav.tsx          |  2 +-
 packages/react/src/Text/Text.tsx              |  2 +-
 .../TextInput/TextInput.features.stories.tsx  | 24 ++++++------
 .../react/src/TextInput/TextInput.stories.tsx |  2 +-
 packages/react/src/TextInput/TextInput.tsx    |  2 +-
 .../TextInputWithTokens.test.tsx              |  2 +-
 .../TextInputWithTokens.tsx                   |  4 +-
 packages/react/src/Textarea/Textarea.tsx      |  2 +-
 .../react/src/ToggleSwitch/ToggleSwitch.tsx   |  2 +-
 packages/react/src/Token/IssueLabelToken.tsx  |  4 +-
 .../src/Token/Token.features.stories.tsx      |  6 +--
 packages/react/src/Token/Token.tsx            |  4 +-
 packages/react/src/Token/TokenBase.tsx        | 10 ++---
 .../react/src/Token/_TokenTextContainer.tsx   |  4 +-
 packages/react/src/Tooltip/Tooltip.tsx        |  2 +-
 .../TooltipV2/Tooltip.playground.stories.tsx  |  2 +-
 packages/react/src/TooltipV2/Tooltip.tsx      |  2 +-
 .../src/TooltipV2/__tests__/Tooltip.test.tsx  |  4 +-
 .../UnderlineNav.Item.stories.tsx             |  2 +-
 .../react/src/UnderlineNav/UnderlineNav.tsx   |  2 +-
 .../src/UnderlineNav/UnderlineNavItem.tsx     |  2 +-
 .../src/VisuallyHidden/VisuallyHidden.tsx     |  2 +-
 packages/react/src/_VisuallyHidden.tsx        |  2 +-
 .../src/deprecated/ActionList/Header.tsx      |  2 +-
 .../react/src/deprecated/ActionList/Item.tsx  |  2 +-
 .../react/src/deprecated/ActionList/List.tsx  |  2 +-
 packages/react/src/deprecated/ActionMenu.tsx  |  2 +-
 .../react/src/deprecated/DialogV1/Dialog.tsx  |  4 +-
 .../deprecated/UnderlineNav/UnderlineNav.tsx  |  4 +-
 .../src/experimental/CSSComponent/index.tsx   |  2 +-
 .../experimental/IssueLabel/IssueLabel.tsx    |  2 +-
 .../experimental/SelectPanel2/SelectPanel.tsx | 16 ++++----
 .../UnderlinePanels/UnderlinePanels.tsx       |  6 +--
 .../src/internal/components/ButtonReset.tsx   |  2 +-
 .../CheckboxOrRadioGroup.tsx                  |  6 +--
 .../src/internal/components/InputLabel.tsx    |  2 +-
 .../components/TextInputInnerAction.tsx       |  6 +--
 .../internal/components/TextInputWrapper.tsx  |  4 +-
 .../components/UnderlineTabbedInterface.tsx   |  4 +-
 .../internal/components/UnstyledTextInput.tsx |  2 +-
 .../stories/deprecated/ActionList.stories.tsx | 10 ++---
 .../stories/deprecated/ActionMenu.stories.tsx | 10 ++---
 .../stories/useAnchoredPosition.stories.tsx   |  8 ++--
 .../src/stories/useFocusTrap.stories.tsx      |  2 +-
 .../src/stories/useFocusZone.stories.tsx      |  2 +-
 .../src/components/ActionList.tsx             |  6 +--
 .../styled-react/src/components/Avatar.tsx    |  2 +-
 .../src/components/BaseStyles.tsx             |  4 +-
 .../styled-react/src/components/Button.tsx    |  2 +-
 .../styled-react/src/components/Checkbox.tsx  |  2 +-
 .../src/components/CheckboxGroup.tsx          |  8 ++--
 .../src/components/CounterLabel.tsx           |  2 +-
 .../styled-react/src/components/Dialog.tsx    |  8 ++--
 .../styled-react/src/components/Header.tsx    |  3 --
 .../src/components/IconButton.tsx             |  2 +-
 .../styled-react/src/components/NavList.tsx   |  2 +-
 .../src/components/PageLayout.tsx             |  3 --
 .../src/components/RadioGroup.tsx             |  8 ++--
 .../src/components/RelativeTime.tsx           |  2 +-
 .../src/components/SegmentedControl.tsx       |  6 +--
 .../src/components/StateLabel.tsx             |  2 +-
 .../styled-react/src/components/SubNav.tsx    |  4 +-
 .../styled-react/src/components/TextInput.tsx |  2 +-
 .../styled-react/src/components/Timeline.tsx  | 10 ++---
 .../src/components/ToggleSwitch.tsx           |  2 +-
 .../styled-react/src/components/Tooltip.tsx   |  2 +-
 .../src/components/UnderlineNav.tsx           |  2 +-
 .../src/components/UnderlinePanels.tsx        |  2 +-
 .../src/components/deprecated/ActionList.tsx  |  6 +--
 .../src/components/deprecated/DialogV1.tsx    |  2 -
 157 files changed, 346 insertions(+), 355 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 79ca8268452..fa12cbcf83c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -117,7 +117,7 @@ const config = defineConfig([
       'primer-react/a11y-use-next-tooltip': 'error',
       'primer-react/no-unnecessary-components': 'error',
       'primer-react/prefer-action-list-item-onselect': 'error',
-      'primer-react/spread-props-first': 'error',
+      'primer-react/spread-props-first': 'warn',
     },
   },
 
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 3ce7d9ff414..7046dc44984 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -408,11 +408,11 @@ export const ActionBarIconButton = forwardRef(
 
     return (
       <IconButton
-        {...props}
         aria-disabled={disabled}
         ref={ref}
         size={size}
         onClick={clickHandler}
+        {...props}
         variant="invisible"
         data-testid={id}
       />
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index 2b14654deab..ec560222be0 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -334,7 +334,7 @@ export const OverlayWrapping = () => {
         <AnchoredOverlay
           open
           renderAnchor={props => (
-            <button {...props} type="button">
+            <button type="button" {...props}>
               Overlay
             </button>
           )}
@@ -350,7 +350,7 @@ export const OverlayWrapping = () => {
           open
           width="small"
           renderAnchor={props => (
-            <button {...props} type="button">
+            <button type="button" {...props}>
               Overlay
             </button>
           )}
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 27ab410451b..e7ff8b11f50 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -711,7 +711,7 @@ export const InsideOverlay = () => {
       onOpen={toggle}
       onClose={toggle}
       renderAnchor={props => (
-        <button {...props} type="button">
+        <button type="button" {...props}>
           toggle overlay
         </button>
       )}
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index b51afebfa67..441e79302c9 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -24,13 +24,13 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
   ...rest
 }) => {
   return (
-    <Component {...rest} className={className} id={id}>
+    <Component className={className} id={id} {...rest}>
       {children}
     </Component>
   )
 }
 
-type HeadingWrapProps = React.HTMLAttributes<HTMLElement> & {
+type HeadingWrapProps = {
   as?: 'div' | 'li'
   className?: string
   children: React.ReactNode
@@ -98,7 +98,7 @@ export const Group: FCWithSlotMarker<React.PropsWithChildren<ActionListGroupProp
   }
 
   return (
-    <li {...props} className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined}>
+    <li className={clsx(className, groupClasses.Group)} role={listRole ? 'none' : undefined} {...props}>
       <GroupContext.Provider value={{selectionVariant, groupHeadingId}}>
         {title && !slots.groupHeading ? (
           // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
@@ -173,13 +173,13 @@ export const GroupHeading: FCWithSlotMarker<React.PropsWithChildren<ActionListGr
       {/* for listbox (SelectPanel) and menu (ActionMenu) roles, group titles are presentational. */}
       {listRole && listRole !== 'list' ? (
         <HeadingWrap
-          {...props}
           role="presentation"
           className={groupClasses.GroupHeadingWrap}
           aria-hidden="true"
           data-variant={variant}
           data-component="GroupHeadingWrap"
           as={headingWrapElement}
+          {...props}
         >
           <span className={clsx(className, groupClasses.GroupHeading)} id={groupHeadingId}>
             {_internalBackwardCompatibleTitle ?? children}
@@ -195,10 +195,10 @@ export const GroupHeading: FCWithSlotMarker<React.PropsWithChildren<ActionListGr
           data-component="GroupHeadingWrap"
         >
           <Heading
-            {...props}
             className={clsx(className, groupClasses.GroupHeading)}
             as={as || 'h3'}
             id={groupHeadingId}
+            {...props}
           >
             {_internalBackwardCompatibleTitle ?? children}
           </Heading>
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 63303d5f765..510c94231d8 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -35,14 +35,14 @@ export const Heading = forwardRef(({as, size, children, visuallyHidden = false,
   return (
     <VisuallyHidden isVisible={!visuallyHidden}>
       <HeadingComponent
-        {...props}
         as={as}
         variant={size}
-        // use custom id if it is provided. Otherwise, use the id from the context
         ref={innerRef}
+        // use custom id if it is provided. Otherwise, use the id from the context
         id={props.id ?? headingId}
         className={clsx(className, classes.ActionListHeader)}
         data-list-variant={listVariant}
+        {...props}
       >
         {children}
       </HeadingComponent>
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index 3bb61800763..b25a169bd50 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -30,7 +30,7 @@ SubItem.displayName = 'ActionList.SubItem'
 const ButtonItemContainerNoBox = React.forwardRef<HTMLButtonElement, React.HTMLAttributes<HTMLButtonElement>>(
   ({children, style, ...props}, forwardedRef) => {
     return (
-      <button {...props} type="button" ref={forwardedRef as React.Ref<HTMLButtonElement>} style={style}>
+      <button type="button" ref={forwardedRef as React.Ref<HTMLButtonElement>} style={style} {...props}>
         {children}
       </button>
     )
@@ -40,7 +40,7 @@ const ButtonItemContainerNoBox = React.forwardRef<HTMLButtonElement, React.HTMLA
 const DivItemContainerNoBox = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({children, ...props}, forwardedRef) => {
     return (
-      <div {...props} ref={forwardedRef as React.Ref<HTMLDivElement>}>
+      <div ref={forwardedRef as React.Ref<HTMLDivElement>} {...props}>
         {children}
       </div>
     )
diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index a879456569f..8939b450284 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -43,7 +43,7 @@ export const LinkItem = React.forwardRef(
           return inactiveText ? (
             <span {...rest}>{children}</span>
           ) : (
-            <Link {...rest} {...props} as={Component} onClick={clickHandler} ref={forwardedRef}>
+            <Link as={Component} {...rest} {...props} onClick={clickHandler} ref={forwardedRef}>
               {children}
             </Link>
           )
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index b296234dbc5..c5c3860f6fb 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -67,13 +67,13 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
     >
       {slots.heading}
       <Component
-        {...restProps}
         className={clsx(classes.ActionList, className)}
         role={listRole}
         aria-labelledby={ariaLabelledBy}
         ref={listRef}
         data-dividers={showDividers}
         data-variant={variant}
+        {...restProps}
       >
         {childrenWithoutSlots}
       </Component>
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 7006c2517d7..933c3a6f584 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -34,7 +34,6 @@ export const TrailingAction = forwardRef(
       <span className={clsx(className, classes.TrailingAction)} style={style}>
         {icon ? (
           <IconButton
-            {...props}
             as={as}
             aria-label={label}
             icon={icon}
@@ -46,11 +45,11 @@ export const TrailingAction = forwardRef(
             // @ts-expect-error StyledButton wants both Anchor and Button refs
             ref={forwardedRef}
             className={classes.TrailingActionButton}
+            {...props}
           />
         ) : (
           // @ts-expect-error shhh
           <Button
-            {...props}
             variant="invisible"
             as={as}
             href={href}
@@ -58,6 +57,7 @@ export const TrailingAction = forwardRef(
             data-loading={Boolean(loading)}
             ref={forwardedRef}
             className={classes.TrailingActionButton}
+            {...props}
           >
             {label}
           </Button>
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index 1b668e394d5..c091391e465 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -10,13 +10,13 @@ import type {FCWithSlotMarker} from '../utils/types/Slots'
 export type VisualProps = React.HTMLAttributes<HTMLSpanElement>
 
 export const VisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
-  return <span {...props} className={clsx(className, classes.VisualWrap)} />
+  return <span className={clsx(className, classes.VisualWrap)} {...props} />
 }
 
 export type ActionListLeadingVisualProps = VisualProps
 export const LeadingVisual: FCWithSlotMarker<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
   return (
-    <VisualContainer {...props} className={clsx(className, classes.LeadingVisual)}>
+    <VisualContainer className={clsx(className, classes.LeadingVisual)} {...props}>
       {props.children}
     </VisualContainer>
   )
@@ -26,7 +26,7 @@ export type ActionListTrailingVisualProps = VisualProps
 export const TrailingVisual: FCWithSlotMarker<React.PropsWithChildren<VisualProps>> = ({className, ...props}) => {
   const {trailingVisualId} = React.useContext(ItemContext)
   return (
-    <VisualContainer {...props} className={clsx(className, classes.TrailingVisual)} id={trailingVisualId}>
+    <VisualContainer className={clsx(className, classes.TrailingVisual)} id={trailingVisualId} {...props}>
       {props.children}
     </VisualContainer>
   )
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 0c78b64465a..c2c722cb895 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -242,7 +242,7 @@ export type ActionMenuButtonProps = ButtonProps
 const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button {...props} type="button" trailingAction={TriangleDownIcon} />
+      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
     </Anchor>
   )
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
@@ -317,11 +317,11 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
       variant={variant}
     >
       <div
-        {...(overlayProps.overflow ? {[`data-overflow-${overlayProps.overflow}`]: ''} : {})}
-        {...(overlayProps.maxHeight ? {[`data-max-height-${overlayProps.maxHeight}`]: ''} : {})}
         ref={containerRef}
         className={styles.ActionMenuContainer}
         data-variant={responsiveVariant}
+        {...(overlayProps.overflow ? {[`data-overflow-${overlayProps.overflow}`]: ''} : {})}
+        {...(overlayProps.maxHeight ? {[`data-max-height-${overlayProps.maxHeight}`]: ''} : {})}
       >
         <ActionListContainerContext.Provider
           value={{
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index 8925c57a6ab..0ba6cf0b174 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -245,7 +245,6 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
         })}
       {open ? (
         <Overlay
-          {...overlayProps}
           returnFocusRef={anchorRef}
           onClickOutside={onClickOutside}
           ignoreClickRefs={[anchorRef]}
@@ -262,17 +261,18 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           anchorSide={position?.anchorSide}
           className={className}
           preventOverflow={preventOverflow}
+          {...overlayProps}
         >
           {showXIcon ? (
             <div className={classes.ResponsiveCloseButtonContainer}>
               <IconButton
                 {...(closeButtonProps as IconButtonProps)}
-                {...(XButtonAriaLabelledBy
-                  ? {'aria-labelledby': XButtonAriaLabelledBy, 'aria-label': undefined}
-                  : {'aria-label': XButtonAriaLabel ?? 'Close', 'aria-labelledby': undefined})}
                 type="button"
                 variant="invisible"
                 icon={XIcon}
+                {...(XButtonAriaLabelledBy
+                  ? {'aria-labelledby': XButtonAriaLabelledBy, 'aria-label': undefined}
+                  : {'aria-label': XButtonAriaLabel ?? 'Close', 'aria-labelledby': undefined})}
                 className={clsx(classes.ResponsiveCloseButton, closeButtonProps.className)}
                 onClick={() => {
                   onClose('close')
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index 5a46c74af8d..bf0577cee9b 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -414,16 +414,16 @@ export const AsyncLoadingOfItems = (args: FormControlArgs<AutocompleteArgs>) =>
   return (
     <form className={classes.FormPadding}>
       <FormControl {...parentArgs}>
-        <FormControl.Label {...labelArgs} id="autocompleteLabel" />
+        <FormControl.Label id="autocompleteLabel" {...labelArgs} />
         <Autocomplete>
           <Autocomplete.Input {...textInputArgs} size={textInputArgs.inputSize} />
           <Autocomplete.Overlay {...overlayArgs}>
             <Autocomplete.Menu
-              {...menuArgs}
               items={loadedItems}
               selectedItemIds={[]}
               onOpenChange={onOpenChange}
               aria-labelledby="autocompleteLabel"
+              {...menuArgs}
               loading={loadedItems.length === 0}
             />
           </Autocomplete.Overlay>
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 5273230f67f..4c8bda2827c 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -260,27 +260,27 @@ export const Playground = (args: FormControlArgs<AutocompleteArgs>) => {
   return (
     <form className={classes.DefaultForm} onSubmit={event => event.preventDefault()}>
       <FormControl {...parentArgs}>
-        <FormControl.Label {...labelArgs} id="autocompleteLabel" />
+        <FormControl.Label id="autocompleteLabel" {...labelArgs} />
         <Autocomplete>
           <Autocomplete.Input
-            {...autocompleteInput}
             aria-describedby={formValidationId}
+            {...autocompleteInput}
             size={textInputArgs.inputSize}
             data-testid="autocompleteInput"
           />
           <Autocomplete.Overlay {...overlayArgs}>
             <Autocomplete.Menu
-              {...menuArgs}
               items={items}
               selectedItemIds={isMultiselect ? selectedItemIds : []}
               onSelectedChange={isMultiselect ? onSelectedChange : undefined}
               aria-labelledby="autocompleteLabel"
+              {...menuArgs}
             />
           </Autocomplete.Overlay>
         </Autocomplete>
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
         {validationArgs.children && validationArgs.variant && (
-          <FormControl.Validation {...validationArgs} id={formValidationId} variant={validationArgs.variant} />
+          <FormControl.Validation id={formValidationId} {...validationArgs} variant={validationArgs.variant} />
         )}
       </FormControl>
     </form>
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index d730b50b501..5b97da8cdc9 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -36,9 +36,9 @@ const LabelledAutocomplete = <T extends AutocompleteMenuItem>({
         Autocomplete field
       </label>
       <Autocomplete id="autocompleteId">
-        <Autocomplete.Input {...inputPropsRest} id={id} />
+        <Autocomplete.Input id={id} {...inputPropsRest} />
         <Autocomplete.Overlay>
-          <Autocomplete.Menu {...menuPropsRest} aria-labelledby={ariaLabelledBy} />
+          <Autocomplete.Menu aria-labelledby={ariaLabelledBy} {...menuPropsRest} />
         </Autocomplete.Overlay>
       </Autocomplete>
     </BaseStyles>
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index 99787526a56..f95c4e7f7c2 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -163,7 +163,6 @@ const AutocompleteInput = React.forwardRef(
 
     return (
       <Component
-        {...props}
         onFocus={handleInputFocus}
         onBlur={handleInputBlur}
         onChange={handleInputChange}
@@ -179,6 +178,7 @@ const AutocompleteInput = React.forwardRef(
         aria-owns={`${id}-listbox`}
         autoComplete="off"
         id={id}
+        {...props}
       />
     )
   },
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index d1e2a95d6b1..69918c48e99 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -371,9 +371,9 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe
                 } = item
                 return (
                   <ActionList.Item
-                    {...itemProps}
                     key={(key ?? id) as string | number}
                     onSelect={() => onAction(item)}
+                    {...itemProps}
                     id={id}
                     data-id={id}
                     role={role as AriaRole}
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index c4176f24ee8..d72494a7545 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -56,7 +56,6 @@ function AutocompleteOverlay({
 
   return showMenu ? (
     <Overlay
-      {...overlayProps}
       returnFocusRef={inputRef}
       preventFocusOnOpen={true}
       onClickOutside={closeOptionList}
@@ -65,6 +64,7 @@ function AutocompleteOverlay({
       top={position?.top}
       left={position?.left}
       className={classes.Overlay}
+      {...overlayProps}
     >
       {children}
     </Overlay>
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index 575bb55de56..b9e501a8412 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -36,7 +36,6 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
 
   return (
     <img
-      {...rest}
       data-component="Avatar"
       className={clsx(className, classes.Avatar)}
       ref={ref}
@@ -53,6 +52,7 @@ const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(function Avatar(
             }
           : (cssSizeVars as React.CSSProperties)
       }
+      {...rest}
     />
   )
 })
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
index ba6ab78ca62..4a52e80cf63 100644
--- a/packages/react/src/Banner/Banner.stories.tsx
+++ b/packages/react/src/Banner/Banner.stories.tsx
@@ -37,25 +37,25 @@ export const Playground: StoryObj<typeof Banner> = {
       <PageLayout>
         <PageLayout.Pane divider="line" position="start">
           <Banner
-            {...rest}
             aria-label="Pane level banner"
             onDismiss={onDismiss ? action('onDismiss') : undefined}
             primaryAction={primaryAction ? <Banner.PrimaryAction>{primaryAction}</Banner.PrimaryAction> : null}
             secondaryAction={
               secondaryAction ? <Banner.SecondaryAction>{secondaryAction}</Banner.SecondaryAction> : null
             }
+            {...rest}
           />
         </PageLayout.Pane>
 
         <PageLayout.Content>
           <Banner
-            {...rest}
             aria-label="Content level banner"
             onDismiss={onDismiss ? action('onDismiss') : undefined}
             primaryAction={primaryAction ? <Banner.PrimaryAction>{primaryAction}</Banner.PrimaryAction> : null}
             secondaryAction={
               secondaryAction ? <Banner.SecondaryAction>{secondaryAction}</Banner.SecondaryAction> : null
             }
+            {...rest}
           />
         </PageLayout.Content>
       </PageLayout>
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 9905f301dea..81d04875cf6 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -234,7 +234,7 @@ export type BannerPrimaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerPrimaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button {...rest} ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default">
+    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="default" {...rest}>
       {children}
     </Button>
   )
@@ -246,7 +246,7 @@ export type BannerSecondaryActionProps = Omit<ButtonProps, 'variant'>
 
 const BannerSecondaryAction = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <Button {...rest} ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="link">
+    <Button ref={forwardedRef} className={clsx('BannerPrimaryAction', className)} variant="link" {...rest}>
       {children}
     </Button>
   )
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index d1f17dfc122..9077d733daf 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -38,14 +38,13 @@ function BaseStyles({
 
   return (
     <Component
-      {...rest}
       className={newClassName}
+      data-portal-root
       /**
        * We need to map valid primer/react color modes onto valid color modes for primer/primitives
        * valid color modes for primer/primitives: auto | light | dark
        * valid color modes for primer/primer: auto | day | night | light | dark
        */
-      data-portal-root
       data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
@@ -53,6 +52,7 @@ function BaseStyles({
         ...baseStyles,
         ...style,
       }}
+      {...rest}
     >
       {children}
     </Component>
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index d3ea1c3140c..b773b1f9596 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -101,7 +101,6 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
     return (
       <Details ref={detailsRefCallback} className={classes.MenuDetails}>
         <IconButton
-          {...rest}
           as="summary"
           role="button"
           ref={menuButtonRef}
@@ -112,6 +111,7 @@ const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenu
           size="small"
           icon={KebabHorizontalIcon}
           tooltipDirection="e"
+          {...rest}
         />
         <div ref={menuContainerRef} className={classes.MenuOverlay}>
           <ActionList>
@@ -354,10 +354,10 @@ function BreadcrumbsItemComponent<As extends React.ElementType>(
   const {as: Component = 'a', selected, className, ...rest} = props
   return (
     <Component
-      {...rest}
       className={clsx(className, classes.Item, selected && 'selected')}
       aria-current={selected ? 'page' : undefined}
       ref={ref}
+      {...rest}
     />
   )
 }
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 431f358065a..ad4c4968a61 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -5,7 +5,7 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 
 const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => {
   return (
-    <ButtonBase {...props} ref={forwardedRef} as="button" type="button">
+    <ButtonBase ref={forwardedRef} as="button" type="button" {...props}>
       {children}
     </ButtonBase>
   )
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 3785b2d55b8..97f3564e35c 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -87,8 +87,8 @@ const ButtonBase = forwardRef(({children, as: Component = 'button', ...props}, f
       data-loading-wrapper
     >
       <Component
-        {...rest}
         aria-disabled={loading ? true : undefined}
+        {...rest}
         // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
         ref={innerRef}
         className={clsx(classes.ButtonBase, className)}
diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx
index 521e25ab6dd..7c439047429 100644
--- a/packages/react/src/Button/IconButton.tsx
+++ b/packages/react/src/Button/IconButton.tsx
@@ -35,13 +35,13 @@ const IconButton = forwardRef(
     if (withoutTooltip) {
       return (
         <ButtonBase
-          {...props}
           icon={Icon}
           className={clsx(className, classes.IconButton)}
           data-component="IconButton"
           type="button"
           aria-label={ariaLabel}
           disabled={disabled}
+          {...props}
           // @ts-expect-error StyledButton wants both Anchor and Button refs
           ref={forwardedRef}
         />
@@ -57,14 +57,14 @@ const IconButton = forwardRef(
           keybindingHint={keybindingHint ?? keyshortcuts}
         >
           <ButtonBase
-            {...props}
             icon={Icon}
             className={clsx(className, classes.IconButton)}
             data-component="IconButton"
             type="button"
-            // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
             aria-keyshortcuts={keyshortcuts ?? undefined}
+            // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
             aria-label={description ? ariaLabel : undefined}
+            {...props}
           />
         </Tooltip>
       )
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index 5e1aded4a99..bac52d497b3 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -7,7 +7,7 @@ export type LinkButtonProps = BaseLinkButtonProps & ButtonProps
 
 const LinkButton = forwardRef(({children, as: Component = 'a', ...props}, forwardedRef): JSX.Element => {
   return (
-    <ButtonBase {...props} as={Component} ref={forwardedRef}>
+    <ButtonBase as={Component} ref={forwardedRef} {...props}>
       {children}
     </ButtonBase>
   )
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index e2e4edd8ecc..4250ff75396 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -17,7 +17,7 @@ const StatefulLoadingButton = (props: StatefulLoadingButtonProps) => {
     setIsLoading(true)
   }
 
-  return <Button {...props} loading={isLoading} onClick={handleClick} />
+  return <Button loading={isLoading} onClick={handleClick} {...props} />
 }
 
 describe('IconButton', () => {
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index c2238e72e45..095ac33d9cc 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -26,7 +26,7 @@ export const Default = () => (
 export const Playground: StoryFn<ButtonProps & {buttonCount: number}> = args => {
   const {buttonCount = 3, ...buttonProps} = args
   const buttons = Array.from({length: buttonCount}, (_, i) => (
-    <Button {...buttonProps} key={i}>
+    <Button key={i} {...buttonProps}>
       {`Button ${i + 1}`}
     </Button>
   ))
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index 7f02b17a99a..cd07d132175 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -27,7 +27,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    <BaseComponent {...rest} ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role}>
+    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
       {buttons}
     </BaseComponent>
   )
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index 982e167f4a7..1ffafd73c8e 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -19,7 +19,7 @@ export const Playground = ({value: _value, checked, ...args}: FormControlArgs<Ch
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Checkbox {...args} value="default" checked={checked} />
+        <Checkbox value="default" checked={checked} {...args} />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index 683c04c91a5..fd064c7973c 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -66,7 +66,7 @@ const CheckboxGroup: FCWithSlotMarker<React.PropsWithChildren<CheckboxGroupProps
         },
       }}
     >
-      <CheckboxOrRadioGroup {...rest} disabled={disabled}>
+      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
         {children}
       </CheckboxOrRadioGroup>
     </CheckboxGroupContext.Provider>
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index cdec15393b5..0d106c78d50 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -37,7 +37,7 @@ const CircleBadge = <As extends React.ElementType>({as: Component = 'div', ...pr
   />
 )
 
-const CircleBadgeIcon = (props: OcticonProps) => <Octicon {...props} className={styles.CircleBadgeIcon} />
+const CircleBadgeIcon = (props: OcticonProps) => <Octicon className={styles.CircleBadgeIcon} {...props} />
 
 CircleBadgeIcon.displayName = 'CircleBadge.Icon'
 
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index c67180f9ec0..1c6be800b36 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -49,11 +49,11 @@ export const Playground = ({open, ...args}: PlaygroundProps) => {
       </Button>
       {(isOpen || open) && (
         <ConfirmationDialog
-          {...args}
           title="Delete universe?"
           onClose={onDialogClose}
           confirmButtonContent="Delete it!"
           confirmButtonType="danger"
+          {...args}
         >
           Deleting the universe could have disastrous effects, including but not limited to destroying all life on
           Earth.
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index 03d948bfa39..f493bf495e1 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -26,7 +26,7 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
     }, [])
 
     return (
-      <details {...rest} className={clsx(className, classes.Details)} ref={ref}>
+      <details className={clsx(className, classes.Details)} {...rest} ref={ref}>
         {children}
       </details>
     )
@@ -46,7 +46,7 @@ export type SummaryProps<As extends React.ElementType> = {
 function Summary<As extends React.ElementType>({as, children, ...props}: SummaryProps<As>) {
   const Component = as ?? 'summary'
   return (
-    <Component {...props} as={Component === 'summary' ? null : 'summary'}>
+    <Component as={Component === 'summary' ? null : 'summary'} {...props}>
       {children}
     </Component>
   )
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index 17f8a11d02e..ead5d97a041 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -9,7 +9,7 @@ describe('Details', () => {
     const Component = () => {
       const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
       return (
-        <Details {...getDetailsProps()} data-testid="details">
+        <Details data-testid="details" {...getDetailsProps()}>
           <Details.Summary>hi</Details.Summary>
         </Details>
       )
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index a3695b81823..9bfacac1238 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -308,21 +308,21 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     <>
       <Portal>
         <div
-          {...positionDataAttributes}
           ref={backdropRef}
           className={classes.Backdrop}
+          {...positionDataAttributes}
           onClick={onBackdropClick}
           onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
             setLastMouseDownIsBackdrop(e.target === e.currentTarget)
           }}
         >
           <div
-            {...positionDataAttributes}
             ref={dialogRef}
             role={role}
             aria-labelledby={dialogLabelId}
             aria-describedby={dialogDescriptionId}
             aria-modal
+            {...positionDataAttributes}
             data-width={width}
             data-height={height}
             className={clsx(className, classes.Dialog)}
@@ -343,14 +343,14 @@ _Dialog.displayName = 'Dialog'
 type StyledHeaderProps = React.ComponentProps<'div'>
 
 const Header = React.forwardRef<HTMLDivElement, StyledHeaderProps>(function Header({className, ...rest}, forwardRef) {
-  return <div {...rest} ref={forwardRef} className={clsx(className, classes.Header)} />
+  return <div ref={forwardRef} className={clsx(className, classes.Header)} {...rest} />
 })
 Header.displayName = 'Dialog.Header'
 
 type StyledTitleProps = React.ComponentProps<'h1'>
 
 const Title = React.forwardRef<HTMLHeadingElement, StyledTitleProps>(function Title({className, ...rest}, forwardRef) {
-  return <h1 {...rest} ref={forwardRef} className={clsx(className, classes.Title)} />
+  return <h1 ref={forwardRef} className={clsx(className, classes.Title)} {...rest} />
 })
 Title.displayName = 'Dialog.Title'
 
@@ -360,14 +360,14 @@ const Subtitle = React.forwardRef<HTMLHeadingElement, StyledSubtitleProps>(funct
   {className, ...rest},
   forwardRef,
 ) {
-  return <h2 {...rest} ref={forwardRef} className={clsx(className, classes.Subtitle)} />
+  return <h2 ref={forwardRef} className={clsx(className, classes.Subtitle)} {...rest} />
 })
 Subtitle.displayName = 'Dialog.Subtitle'
 
 type StyledBodyProps = React.ComponentProps<'div'>
 
 const Body = React.forwardRef<HTMLDivElement, StyledBodyProps>(function Body({className, ...rest}, forwardRef) {
-  return <div {...rest} ref={forwardRef} className={clsx(className, classes.Body)} />
+  return <div ref={forwardRef} className={clsx(className, classes.Body)} {...rest} />
 }) as PolymorphicForwardRefComponent<'div', StyledBodyProps>
 
 Body.displayName = 'Dialog.Body'
@@ -375,7 +375,7 @@ Body.displayName = 'Dialog.Body'
 type StyledFooterProps = React.ComponentProps<'div'>
 
 const Footer = React.forwardRef<HTMLDivElement, StyledFooterProps>(function Footer({className, ...rest}, forwardRef) {
-  return <div {...rest} ref={forwardRef} className={clsx(className, classes.Footer)} />
+  return <div ref={forwardRef} className={clsx(className, classes.Footer)} {...rest} />
 })
 Footer.displayName = 'Dialog.Footer'
 
@@ -398,8 +398,8 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
         const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
         return (
           <Button
-            {...buttonProps}
             key={index}
+            {...buttonProps}
             // 'normal' value is equivalent to 'default', this is used for backwards compatibility
             variant={buttonType === 'normal' ? 'default' : buttonType}
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index 0a29ddfc0ad..61ccb33538e 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -265,10 +265,10 @@ export function FilteredActionList({
     let firstGroupIndex = 0
     const actionListContent = (
       <ActionList
-        {...listProps}
         ref={usingRemoveActiveDescendant ? listRef : listContainerRefCallback}
         showDividers={showItemDividers}
         selectionVariant={selectionVariant}
+        {...listProps}
         role="listbox"
         id={listId}
         className={classes.ActionList}
@@ -287,11 +287,11 @@ export function FilteredActionList({
                     const key = itemKey ?? item.id?.toString() ?? itemIndex.toString()
                     return (
                       <MappedActionListItem
-                        {...item}
                         key={key}
                         className={clsx(classes.ActionListItem, 'className' in item ? item.className : undefined)}
                         data-input-focused={isInputFocused ? '' : undefined}
                         data-first-child={index === firstGroupIndex && itemIndex === 0 ? '' : undefined}
+                        {...item}
                         renderItem={listProps.renderItem}
                       />
                     )
@@ -303,11 +303,11 @@ export function FilteredActionList({
               const key = itemKey ?? item.id?.toString() ?? index.toString()
               return (
                 <MappedActionListItem
-                  {...item}
                   key={key}
                   className={clsx(classes.ActionListItem, 'className' in item ? item.className : undefined)}
                   data-input-focused={isInputFocused ? '' : undefined}
                   data-first-child={index === 0 ? '' : undefined}
+                  {...item}
                   renderItem={listProps.renderItem}
                 />
               )
@@ -341,7 +341,6 @@ export function FilteredActionList({
     <div ref={inputAndListContainerRef} className={clsx(className, classes.Root)} data-testid="filtered-action-list">
       <div className={classes.Header}>
         <TextInput
-          {...restTextInputProps}
           ref={inputRef}
           block
           width="auto"
@@ -360,6 +359,7 @@ export function FilteredActionList({
           loaderPosition={'leading'}
           loading={loading && !loadingType.appearsInBody}
           className={clsx(textInputClassName, {[classes.FullScreenTextInput]: fullScreenOnNarrow})}
+          {...restTextInputProps}
         />
       </div>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
@@ -404,16 +404,15 @@ function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
   } = item
 
   return (
-    // @ts-expect-error - ItemInput props may not perfectly match ActionList.Item element type
     <ActionList.Item
-      {...rest}
-      // @ts-ignore - for now
       role="option"
+      // @ts-ignore - for now
       onSelect={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
         if (typeof onAction === 'function')
           onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
       }}
       data-id={id}
+      {...rest}
     >
       {LeadingVisual ? (
         <ActionList.LeadingVisual>
diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
index 4b6c54ebca9..bbd4d134a59 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
@@ -52,7 +52,7 @@ function LoadingSpinner({...props}): JSX.Element {
 function LoadingSkeleton({rows = 10, ...props}: {rows: number}): JSX.Element {
   return (
     <div className={classes.LoadingSkeletonContainer}>
-      <Stack {...props} direction="vertical" justify="center" gap="condensed">
+      <Stack direction="vertical" justify="center" gap="condensed" {...props}>
         {Array.from({length: rows}, (_, i) => (
           <Stack key={i} direction="horizontal" gap="condensed" align="center">
             <SkeletonBox width="16px" height="16px" />
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 5b24c295a0c..5a645dff7f1 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -111,12 +111,12 @@ const CustomTextInput = (
   props: React.JSX.IntrinsicAttributes &
     React.ClassAttributes<HTMLInputElement> &
     React.InputHTMLAttributes<HTMLInputElement>,
-) => <input {...props} type="text" />
+) => <input type="text" {...props} />
 const CustomCheckboxInput = (
   props: React.JSX.IntrinsicAttributes &
     React.ClassAttributes<HTMLInputElement> &
     React.InputHTMLAttributes<HTMLInputElement>,
-) => <input {...props} type="checkbox" />
+) => <input type="checkbox" {...props} />
 
 export const FormControlWithCustomInput = () => {
   const [value, setValue] = React.useState('mona lisa')
@@ -301,10 +301,10 @@ export const WithSelectPanel = () => {
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, id, ...anchorProps}) => (
           <Button
-            {...anchorProps}
             trailingAction={TriangleDownIcon}
             aria-labelledby={`select_panel_label selectpanel_wrapper`}
             id={id}
+            {...anchorProps}
             aria-haspopup="dialog"
           >
             <span id="selectpanel_wrapper">{children ?? 'Select Labels'}</span>
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index cb8a26bf09c..531938db66d 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -13,7 +13,7 @@ const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(
   forwardRef,
 ) {
   return (
-    <BaseComponent {...rest} ref={forwardRef} className={clsx(className, classes.Header)}>
+    <BaseComponent ref={forwardRef} className={clsx(className, classes.Header)} {...rest}>
       {children}
     </BaseComponent>
   )
@@ -26,7 +26,7 @@ const HeaderItem = React.forwardRef<HTMLDivElement, HeaderItemProps>(function He
   forwardRef,
 ) {
   return (
-    <div {...rest} ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full}>
+    <div ref={forwardRef} className={clsx(className, classes.HeaderItem)} data-full={full} {...rest}>
       {children}
     </div>
   )
@@ -39,7 +39,7 @@ const HeaderLink = React.forwardRef<HTMLAnchorElement, HeaderLinkProps>(function
   forwardRef,
 ) {
   return (
-    <BaseComponent {...rest} ref={forwardRef} className={clsx(className, classes.HeaderLink)}>
+    <BaseComponent ref={forwardRef} className={clsx(className, classes.HeaderLink)} {...rest}>
       {children}
     </BaseComponent>
   )
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index e3db911c595..56c7c7ed149 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -33,7 +33,7 @@ const Heading = forwardRef(({as: Component = 'h2', className, variant, ...props}
     }, [innerRef])
   }
 
-  return <Component {...props} className={clsx(className, classes.Heading)} data-variant={variant} ref={innerRef} />
+  return <Component className={clsx(className, classes.Heading)} data-variant={variant} {...props} ref={innerRef} />
 }) as PolymorphicForwardRefComponent<HeadingLevels, StyledHeadingProps>
 
 Heading.displayName = 'Heading'
diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx
index 2bd6d76578c..ff16fb8675d 100644
--- a/packages/react/src/KeybindingHint/components/Sequence.tsx
+++ b/packages/react/src/KeybindingHint/components/Sequence.tsx
@@ -16,7 +16,7 @@ export const Sequence = ({keys, ...chordProps}: KeybindingHintProps) =>
           </>
         )
       }
-      <Chord {...chordProps} keys={c} />
+      <Chord keys={c} {...chordProps} />
     </Fragment>
   ))
 
diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index 5a022e407e6..640d16e2de0 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -31,7 +31,7 @@ const Label = React.forwardRef(function Label(
   ref,
 ) {
   return (
-    <Component {...rest} className={clsx(className, classes.Label)} data-size={size} data-variant={variant} ref={ref} />
+    <Component className={clsx(className, classes.Label)} data-size={size} data-variant={variant} ref={ref} {...rest} />
   )
 }) as PolymorphicForwardRefComponent<'span', LabelProps>
 
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index ef96ff06de7..2b9c6ba4e73 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta = {
 }
 
 const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
-  <div {...props} className={classes.ResizableContainer}>
+  <div className={classes.ResizableContainer} {...props}>
     {children}
   </div>
 )
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index 30c43b022bd..fc13d4b834a 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta = {
 }
 
 const ResizableContainer = ({children, ...props}: {children: React.ReactNode}) => (
-  <div {...props} className={classes.ResizableContainer}>
+  <div className={classes.ResizableContainer} {...props}>
     {children}
   </div>
 )
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index c011f7383c9..7c0175b8fc1 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -86,7 +86,7 @@ const OverlayToggle: React.FC<
       anchorOffset={overlayPaddingPx * -1}
       alignmentOffset={overlayPaddingPx * -1}
       renderAnchor={props => (
-        <Button {...props} variant="invisible" size="small" ref={expandButtonRef}>
+        <Button variant="invisible" size="small" {...props} ref={expandButtonRef}>
           <VisuallyHidden>Show +{hiddenItemIds.length} more</VisuallyHidden>
           <span aria-hidden="true">+{hiddenItemIds.length}</span>
         </Button>
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index eae8b646539..59d218173c1 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -51,12 +51,12 @@ export const UnwrappedLink = <As extends React.ElementType = 'a'>(
 
   return (
     <Component
-      {...restProps}
       className={clsx(className, classes.Link)}
       data-muted={restProps.muted}
       data-inline={inline}
       data-underline={underline}
       data-hover-color={hoverColor}
+      {...restProps}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={innerRef as any}
     />
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 15ac5cab9ae..218d1135b1e 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -395,7 +395,7 @@ export const ExpandWithCustomItems: StoryFn = () => {
 
   const Item = ({leadingVisual, text, trailingVisual, ...rest}: CustomItemProps) => {
     return (
-      <NavList.Item {...rest} key={text} onClick={() => {}} href="#">
+      <NavList.Item key={text} onClick={() => {}} href="#" {...rest}>
         {leadingVisual ? (
           <NavList.LeadingVisual>
             <Octicon icon={leadingVisual} />
@@ -498,7 +498,7 @@ export const WithGroupExpand = () => {
 export const GroupWithExpandAndCustomItems = () => {
   const Item = ({leadingVisual: LeadingVisual, text, trailingVisual: TrailingVisual, ...rest}: CustomItemProps) => {
     return (
-      <NavList.Item {...rest} onClick={() => {}} href="#" key={text}>
+      <NavList.Item onClick={() => {}} href="#" {...rest} key={text}>
         {LeadingVisual ? (
           <NavList.LeadingVisual>
             <LeadingVisual />
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index d03ba5fe089..8648957d4aa 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -92,11 +92,11 @@ const Item = React.forwardRef<HTMLAnchorElement, NavListItemProps>(
 
     return (
       <ActionList.LinkItem
-        {...props}
         ref={ref}
         aria-current={ariaCurrent}
         active={Boolean(ariaCurrent) && ariaCurrent !== 'false'}
         style={{'--subitem-depth': depth} as React.CSSProperties}
+        {...props}
       >
         {children}
       </ActionList.LinkItem>
@@ -331,7 +331,6 @@ export const GroupExpand = React.forwardRef<HTMLButtonElement, NavListGroupExpan
 
         {currentPage < pages || currentPage === 0 ? (
           <ActionList.Item
-            {...props}
             as="button"
             aria-expanded="false"
             ref={forwardedRef}
@@ -347,6 +346,7 @@ export const GroupExpand = React.forwardRef<HTMLButtonElement, NavListGroupExpan
                 focusTarget[focusTarget.length - 1].focus()
               }
             }}
+            {...props}
           >
             {label}
             <TrailingVisual>
@@ -371,11 +371,11 @@ export type NavListGroupHeadingProps = ActionListGroupHeadingProps
 const GroupHeading: React.FC<NavListGroupHeadingProps> = ({as = 'h3', className, ...rest}) => {
   return (
     <ActionList.GroupHeading
-      {...rest}
       as={as}
       className={clsx(navListClasses.GroupHeading, className)}
       data-component="NavList.GroupHeading"
       headingWrapElement="li"
+      {...rest}
     />
   )
 }
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index 57c955744cb..ea024064a9d 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -11,7 +11,7 @@ export default meta
 export const Default = () => <Octicon icon={HeartFillIcon} aria-label="Like" size={32} />
 
 export const Playground: StoryFn<typeof Octicon> = ({'aria-label': ariaLabel, icon: _icon, ...args}) => {
-  return <Octicon {...args} icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} />
+  return <Octicon icon={HeartFillIcon} aria-label={ariaLabel ? ariaLabel : undefined} {...args} />
 }
 
 Playground.args = {
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
index 53a75691dad..55736b4e2b5 100644
--- a/packages/react/src/Overlay/Overlay.dev.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -40,7 +40,6 @@ export const PreventFocusOnOpen = (args: Args) => {
       </Button>
       {isOpen || args.open ? (
         <Overlay
-          {...args}
           initialFocusRef={confirmButtonRef}
           returnFocusRef={openButtonRef}
           ignoreClickRefs={[openButtonRef]}
@@ -52,6 +51,7 @@ export const PreventFocusOnOpen = (args: Args) => {
           aria-label={args.role === 'dialog' ? 'Sample overlay' : undefined}
           preventFocusOnOpen={args.preventFocusOnOpen}
           ref={containerRef}
+          {...args}
         >
           <div className={classes.ResponsiveWidth}>
             <div className={classes.OverlayContent}>
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index 16cc67f0066..8f31d3d8879 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -297,7 +297,6 @@ export const Playground = (args: Args) => {
       </Button>
       {isOpen || args.open ? (
         <Overlay
-          {...args}
           initialFocusRef={confirmButtonRef}
           returnFocusRef={buttonRef}
           ignoreClickRefs={[buttonRef]}
@@ -308,6 +307,7 @@ export const Playground = (args: Args) => {
           aria-modal={args.role === 'dialog'}
           aria-label={args.role === 'dialog' ? 'Sample overlay' : undefined}
           ref={containerRef}
+          {...args}
         >
           <div className={classes.ResponsiveWidth}>
             <div className={classes.FullHeightContent}>
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 9c15a1ce81a..89557b79c29 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -111,14 +111,6 @@ export const BaseOverlay = React.forwardRef(
     return (
       <Component
         {...rest}
-        {...{
-          [`data-width-${width}`]: '',
-          [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined,
-          [`data-height-${height}`]: '',
-          [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined,
-          [`data-visibility-${visibility}`]: '',
-          [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined,
-        }}
         ref={forwardedRef}
         style={
           {
@@ -130,6 +122,14 @@ export const BaseOverlay = React.forwardRef(
             ...styleFromProps,
           } as React.CSSProperties
         }
+        {...{
+          [`data-width-${width}`]: '',
+          [`data-max-width-${maxWidth}`]: maxWidth ? '' : undefined,
+          [`data-height-${height}`]: '',
+          [`data-max-height-${maxHeight}`]: maxHeight ? '' : undefined,
+          [`data-visibility-${visibility}`]: '',
+          [`data-overflow-${rest.overflow}`]: rest.overflow ? '' : undefined,
+        }}
         className={clsx(className, classes.Overlay)}
       />
     )
@@ -233,7 +233,6 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
     return (
       <Portal containerName={portalContainerName}>
         <BaseOverlay
-          {...props}
           role={role}
           width={width}
           data-reflow-container={overflowEnabled || !preventOverflow ? true : undefined}
@@ -243,6 +242,7 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
           height={height}
           visibility={visibility}
           data-responsive={responsiveVariant}
+          {...props}
         />
       </Portal>
     )
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 5523af1ea18..2289585a79d 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -126,7 +126,7 @@ const ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.ContextArea, className)}>
+    <div className={clsx(classes.ContextArea, className)} {...getHiddenDataAttributes(hidden)}>
       {children}
     </div>
   )
@@ -148,12 +148,12 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
     return (
       <>
         <Link
-          {...getHiddenDataAttributes(hidden)}
           ref={ref}
           as={as}
           aria-label={ariaLabel}
           muted
           className={clsx(classes.ParentLink, className)}
+          {...getHiddenDataAttributes(hidden)}
           href={href}
         >
           <ArrowLeftIcon />
@@ -175,7 +175,7 @@ const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.ContextBar, className)}>
+    <div className={clsx(classes.ContextBar, className)} {...getHiddenDataAttributes(hidden)}>
       {children}
     </div>
   )
@@ -189,7 +189,7 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
   hidden = hiddenOnRegularAndWide,
 }) => {
   return (
-    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.ContextAreaActions, className)}>
+    <div className={clsx(classes.ContextAreaActions, className)} {...getHiddenDataAttributes(hidden)}>
       {children}
     </div>
   )
@@ -208,11 +208,11 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
     const currentVariant = useResponsiveValue(variant, 'medium')
     return (
       <div
-        {...getHiddenDataAttributes(hidden)}
         className={clsx(classes.TitleArea, className)}
         ref={titleAreaRef}
         data-component="TitleArea"
         data-size-variant={currentVariant}
+        {...getHiddenDataAttributes(hidden)}
       >
         {children}
       </div>
@@ -230,9 +230,9 @@ const LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>
 }) => {
   return (
     <div
-      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.LeadingAction, className)}
       data-component="PH_LeadingAction"
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -245,9 +245,9 @@ LeadingAction.__SLOT__ = Symbol('PageHeader.LeadingAction')
 const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
-      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.Breadcrumbs, className)}
       data-component="PH_Breadcrumbs"
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -258,9 +258,9 @@ const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({chil
 const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
-      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.LeadingVisual, className)}
       data-component="PH_LeadingVisual"
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -274,11 +274,11 @@ export type TitleProps = {
 const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, className, hidden = false, as = 'h2'}) => {
   return (
     <Heading
-      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.Title, className)}
       data-component="PH_Title"
       data-hidden={hidden}
       as={as}
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </Heading>
@@ -293,9 +293,9 @@ const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
-      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.TrailingVisual, className)}
       data-component="PH_TrailingVisual"
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -309,9 +309,9 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
-      {...getHiddenDataAttributes(hidden)}
       className={clsx(classes.TrailingAction, className)}
       data-component="PH_TrailingAction"
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </div>
@@ -322,7 +322,7 @@ export type ActionsProps = React.PropsWithChildren<ChildrenPropTypes>
 
 const Actions = ({children, className, hidden = false}: ActionsProps) => {
   return (
-    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.Actions, className)} data-component="PH_Actions">
+    <div className={clsx(classes.Actions, className)} data-component="PH_Actions" {...getHiddenDataAttributes(hidden)}>
       {children}
     </div>
   )
@@ -331,7 +331,7 @@ const Actions = ({children, className, hidden = false}: ActionsProps) => {
 // PageHeader.Description: The description area of the header. Visible on all viewports
 const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
-    <div {...getHiddenDataAttributes(hidden)} className={clsx(classes.Description, className)}>
+    <div className={clsx(classes.Description, className)} {...getHiddenDataAttributes(hidden)}>
       {children}
     </div>
   )
@@ -360,11 +360,11 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
   return (
     <BaseComponent
       // Render `aria-label` and `aria-labelledby` only on `nav` elements
-      {...getHiddenDataAttributes(hidden)}
       aria-label={BaseComponent === 'nav' ? ariaLabel : undefined}
       aria-labelledby={BaseComponent === 'nav' ? ariaLabelledBy : undefined}
       className={clsx(classes.Navigation, className)}
       data-component="PH_Navigation"
+      {...getHiddenDataAttributes(hidden)}
     >
       {children}
     </BaseComponent>
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 8b0ea140fb2..8d8ae16fbfd 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -687,10 +687,10 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           position={position}
         />
         <div
+          ref={paneRef}
           {...(hasOverflow ? overflowProps : {})}
           {...labelProp}
           {...(id && {id: paneId})}
-          ref={paneRef}
           className={classes.Pane}
           data-resizable={resizable || undefined}
           style={
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index 5f97d7cf497..c0bead6c382 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -3,7 +3,7 @@ import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
 
 const Pagehead = ({as: BaseComponent = 'div', className, ...rest}: PageheadProps) => {
-  return <BaseComponent {...rest} className={clsx(classes.Pagehead, className)} />
+  return <BaseComponent className={clsx(classes.Pagehead, className)} {...rest} />
 }
 
 /**
diff --git a/packages/react/src/Pagination/Pagination.features.stories.tsx b/packages/react/src/Pagination/Pagination.features.stories.tsx
index d6ae50cd921..0aeaac725ca 100644
--- a/packages/react/src/Pagination/Pagination.features.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.features.stories.tsx
@@ -45,7 +45,7 @@ export const RenderLinks = () => {
         e.preventDefault()
         setPage(n)
       }}
-      renderPage={({number, ...props}) => <ReactRouterLikeLink {...props} to={`#${number}`} />}
+      renderPage={({number, ...props}) => <ReactRouterLikeLink to={`#${number}`} {...props} />}
     />
   )
 }
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
index f85843ab45c..64a2047e6d4 100644
--- a/packages/react/src/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -45,9 +45,9 @@ export const Default = () => {
 export const Playground: StoryFn<ComponentProps<typeof Pagination>> = ({showPages, ...args}) => {
   return (
     <Pagination
-      {...args}
       onPageChange={e => e.preventDefault()}
       showPages={parseShowPagesArg(showPages as boolean | string)}
+      {...args}
     />
   )
 }
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index a4d63cb0a96..f2b1c62ad77 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -9,7 +9,7 @@ describe('Pagination', () => {
       <Pagination
         pageCount={10}
         currentPage={1}
-        renderPage={({key, number, ...props}) => <ReactRouterLikeLink {...props} key={key} to={`#${number}`} />}
+        renderPage={({key, number, ...props}) => <ReactRouterLikeLink key={key} to={`#${number}`} {...props} />}
       />,
     )
 
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index ce38aef7c94..1d362001705 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -87,7 +87,7 @@ function usePaginationPages({
 
       return (
         // @ts-ignore giving me grief about children and "as" props
-        <Component {...props} key={key} className={clsx(classes.Page)}>
+        <Component key={key} className={clsx(classes.Page)} {...props}>
           <PageLabel direction={key}>{content}</PageLabel>
         </Component>
       )
@@ -133,7 +133,7 @@ function Pagination({
   })
 
   return (
-    <nav {...rest} className={clsx(classes.PaginationContainer, className)} aria-label="Pagination">
+    <nav className={clsx(classes.PaginationContainer, className)} aria-label="Pagination" {...rest}>
       <div
         className={classes.TablePaginationSteps}
         data-hidden-viewport-ranges={getViewportRangesToHidePages(showPages).join(' ')}
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index be2de8dd4bf..9f6b8b3e65a 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -5,7 +5,7 @@ export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; c
 export const ReactRouterLikeLink = React.forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
   ({to, children, ...props}, ref) => {
     return (
-      <a {...props} ref={ref} href={to}>
+      <a ref={ref} href={to} {...props}>
         {children}
       </a>
     )
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index f2f2717bded..80e877afba4 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -59,7 +59,7 @@ const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = (
   height = 'fit-content',
   ...props
 }) => {
-  return <div {...props} data-width={width} data-height={height} className={clsx(className, classes.PopoverContent)} />
+  return <div data-width={width} data-height={height} className={clsx(className, classes.PopoverContent)} {...props} />
 }
 
 PopoverContent.displayName = 'Popover.Content'
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 5003a852f0b..4f6f9a117ee 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -54,13 +54,13 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItemProps>(
 
     return (
       <span
-        {...rest}
-        {...ariaAttributes}
         className={clsx(className, classes.ProgressBarItem)}
+        {...rest}
         role="progressbar"
         aria-label={ariaLabel}
         ref={forwardRef}
         style={{...styles, ...style}}
+        {...ariaAttributes}
       />
     )
   },
@@ -101,11 +101,11 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
 
     return (
       <span
-        {...rest}
         ref={forwardRef}
         className={clsx(className, classes.ProgressBarContainer)}
         data-progress-display={inline ? 'inline' : 'block'}
         data-progress-bar-size={barSize}
+        {...rest}
       >
         {validChildren ? (
           children
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index b1d8eae8edf..c7be73a83f4 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -22,7 +22,7 @@ export const Playground = ({value: _value, ...args}: FormControlArgs<RadioProps>
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Radio {...args} name="default-radio-name" value="default" />
+        <Radio name="default-radio-name" value="default" {...args} />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 467d1af42bd..16a98b94a53 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -68,7 +68,6 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
 
     return (
       <input
-        {...rest}
         type="radio"
         value={value}
         name={name}
@@ -79,6 +78,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         required={required}
         onChange={handleOnChange}
         className={clsx(className, sharedClasses.Input, classes.Radio)}
+        {...rest}
       />
     )
   },
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index f2c78291440..ff589e0a3c8 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -50,7 +50,7 @@ const RadioGroup: FC<React.PropsWithChildren<RadioGroupProps>> = ({children, dis
         },
       }}
     >
-      <CheckboxOrRadioGroup {...rest} disabled={disabled}>
+      <CheckboxOrRadioGroup disabled={disabled} {...rest}>
         {children}
       </CheckboxOrRadioGroup>
     </RadioGroupContext.Provider>
diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
index 66efc60a70f..c9ecb5a24e4 100644
--- a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -131,20 +131,20 @@ const meta: Meta = {
 
 export const MicroFormat: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} noTitle={true} date={new Date(date)} format="micro" />
+  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} format="micro" />
 }
 MicroFormat.args = {tense: 'past'}
 MicroFormat.argTypes = {format: {control: false}}
 
 export const RecentTime: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime {...rest} noTitle={true} date={new Date()} />
+  return <RelativeTime noTitle={true} {...rest} date={new Date()} />
 }
 RecentTime.argTypes = {date: {control: false}}
 
 export const CountDownTimer: StoryFn = args => {
   const {...rest} = args
-  return <RelativeTime {...rest} noTitle={true} />
+  return <RelativeTime noTitle={true} {...rest} />
 }
 CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
 CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}
diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
index 4a04284bedd..b5241465cd2 100644
--- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -18,7 +18,7 @@ export const Default: StoryFn = () => <RelativeTime date={new Date('2020-01-01T0
 
 export const Playground: StoryFn = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} noTitle={true} date={new Date(date)} />
+  return <RelativeTime noTitle={true} {...rest} date={new Date(date)} />
 }
 
 Playground.args = {
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index 9f14153a502..76d25fbb64c 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -154,13 +154,13 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   ) : (
     // Render a segmented control
     <ul
-      {...rest}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
       ref={segmentedControlContainerRef}
       className={clsx(classes.SegmentedControl, className)}
       data-full-width={isFullWidth || undefined}
       data-size={size}
+      {...rest}
     >
       {React.Children.map(children, (child, index) => {
         // Not a valid child element - skip rendering child
@@ -207,12 +207,12 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
           } else {
             return (
               <SegmentedControlIconButton
-                {...sharedChildProps}
-                {...restChildProps}
-                // Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
                 aria-label={childAriaLabel || childPropsChildren}
                 icon={visual}
+                // Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
                 className={classes.IconButton}
+                {...sharedChildProps}
+                {...restChildProps}
               />
             )
           }
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index bda9f0eca75..94803bb2152 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -39,7 +39,7 @@ const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<Segmented
 
   return (
     <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
-      <button {...rest} aria-current={selected} className={clsx(classes.Button, className)} type="button">
+      <button aria-current={selected} className={clsx(classes.Button, className)} type="button" {...rest}>
         <span className={clsx(classes.Content, 'segmentedControl-content')}>
           {LeadingVisual && (
             <div className={classes.LeadingIcon}>{isElement(LeadingVisual) ? LeadingVisual : <LeadingVisual />}</div>
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index 4b6b09fb03f..ee70b240efd 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -42,12 +42,12 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
           direction={tooltipDirection}
         >
           <button
-            {...rest}
             type="button"
-            // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
             aria-current={selected}
+            // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.
             aria-label={description ? ariaLabel : undefined}
             className={clsx(classes.Button, classes.IconButton)}
+            {...rest}
           >
             <span className={clsx(classes.Content, 'segmentedControl-content')}>
               {isElement(Icon) ? Icon : <Icon />}
@@ -61,11 +61,11 @@ export const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildre
     return (
       <li className={clsx(classes.Item, className)} data-selected={selected || undefined}>
         <button
-          {...rest}
           type="button"
           aria-label={ariaLabel}
           aria-current={selected}
           className={clsx(classes.Button, classes.IconButton)}
+          {...rest}
         >
           <span className={clsx(classes.Content, 'segmentedControl-content')}>{isElement(Icon) ? Icon : <Icon />}</span>
         </button>
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index 164dc502545..5db418a413a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -91,7 +91,7 @@ export const WithCss = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -133,7 +133,7 @@ const SingleSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
   return variant === 'anchored' ? (
     <SelectPanel
       renderAnchor={({children, ...anchorProps}) => (
-        <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+        <Button trailingAction={TriangleDownIcon} {...anchorProps}>
           {children ?? 'Select Labels'}
         </Button>
       )}
@@ -152,7 +152,7 @@ const SingleSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
   ) : (
     <SelectPanel
       renderAnchor={({children, ...anchorProps}) => (
-        <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+        <Button trailingAction={TriangleDownIcon} {...anchorProps}>
           {children ?? 'Select Labels'}
         </Button>
       )}
@@ -185,7 +185,7 @@ const MultiSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -206,7 +206,7 @@ const MultiSelectParams = ({variant, onCancel, secondaryAction}: ParamProps) =>
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -363,7 +363,7 @@ export const LotsOfItems = () => {
           placeholder="Select labels"
           subtitle="Use labels to organize issues and pull requests"
           renderAnchor={({children, ...anchorProps}) => (
-            <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+            <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
               {children}
             </Button>
           )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 943f11bdd8a..00b57ebcba3 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -64,7 +64,7 @@ export const HeightInitialWithOverflowingItemsStory = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -96,7 +96,7 @@ export const HeightInitialWithUnderflowingItemsStory = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -141,7 +141,7 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -173,7 +173,7 @@ export const AboveTallBody = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -224,7 +224,7 @@ export const HeightVariationsAndScroll = () => {
         <FormControl.Label>With height:medium</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
               {children ?? 'Select Labels'}
             </Button>
           )}
@@ -245,7 +245,7 @@ export const HeightVariationsAndScroll = () => {
         <FormControl.Label>With height:auto, maxheight:medium</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
               {children ?? 'Select Labels'}
             </Button>
           )}
@@ -287,7 +287,7 @@ export const CustomItemRenderer = () => {
       <SelectPanel
         title="Select files"
         renderAnchor={anchorProps => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             Select files
           </Button>
         )}
@@ -460,7 +460,7 @@ export const WithDefaultMessage = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -566,7 +566,7 @@ export const RenderMoreOnScroll = () => {
           placeholder="Select labels"
           subtitle="Use labels to organize issues and pull requests"
           renderAnchor={({children, ...anchorProps}) => (
-            <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+            <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
               {children}
             </Button>
           )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index c381b3c2915..dd1fa062d03 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -98,7 +98,7 @@ export const WithItemDividers = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -131,7 +131,7 @@ export const WithPlaceholderForSearchInput = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -160,7 +160,7 @@ export const SingleSelect = () => {
       <FormControl.Label>Label</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -192,7 +192,7 @@ export const MultiSelect = () => {
         placeholder="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -223,7 +223,7 @@ export const WithDisabledItem = () => {
         placeholder="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -281,7 +281,7 @@ export const WithSecondaryActionButton = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -312,7 +312,7 @@ export const WithSecondaryActionLink = () => {
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -385,7 +385,7 @@ export const WithNotice = () => {
         <FormControl.Label>SelectPanel with notice</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
               {children}
             </Button>
           )}
@@ -464,7 +464,7 @@ export const WithGroups = () => {
         title="Attach files and symbols"
         subtitle="Choose which files and symbols you want to chat about. Use fewer references for more accurate responses."
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -499,7 +499,7 @@ export const WithLabelVisuallyHidden = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -583,7 +583,7 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -652,7 +652,7 @@ export const CustomisedNoInitialItems = () => {
       <SelectPanel
         title="Set projects"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -705,7 +705,7 @@ export const CustomisedNoResults: StoryObj<typeof SelectPanel> = {
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -761,7 +761,7 @@ export const WithOnCancel = () => {
         placeholder="Select labels"
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -798,7 +798,7 @@ export const MultiSelectModal = () => {
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -827,7 +827,7 @@ export const SingleSelectModal = () => {
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
       renderAnchor={({children, ...anchorProps}) => (
-        <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+        <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
           {children}
         </Button>
       )}
@@ -874,7 +874,7 @@ export const WithInactiveItems = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
@@ -965,7 +965,7 @@ export const WithMessage = () => {
         <FormControl.Label>SelectPanel with message</FormControl.Label>
         <SelectPanel
           renderAnchor={({children, ...anchorProps}) => (
-            <Button {...anchorProps} trailingAction={TriangleDownIcon}>
+            <Button trailingAction={TriangleDownIcon} {...anchorProps}>
               {children}
             </Button>
           )}
@@ -1001,7 +1001,7 @@ export const WithSelectAll = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 4b5166545a7..9f2d4befe4a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -72,7 +72,7 @@ export const Default = () => {
         placeholder="Select labels" // button text when no items are selected
         subtitle="Use labels to organize issues and pull requests"
         renderAnchor={({children, ...anchorProps}) => (
-          <Button {...anchorProps} trailingAction={TriangleDownIcon} aria-haspopup="dialog">
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children}
           </Button>
         )}
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index 3b6bba06fbb..ccffe06d79c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -54,7 +54,6 @@ function BasicSelectPanel(passthroughProps: Record<string, unknown>) {
 
   return (
     <SelectPanel
-      {...passthroughProps}
       title="test title"
       subtitle="test subtitle"
       items={items}
@@ -70,6 +69,7 @@ function BasicSelectPanel(passthroughProps: Record<string, unknown>) {
       onOpenChange={isOpen => {
         setOpen(isOpen)
       }}
+      {...passthroughProps}
     />
   )
 }
@@ -1246,7 +1246,6 @@ for (const usingRemoveActiveDescendant of [false, true]) {
 
         return (
           <SelectPanel
-            {...passthroughProps}
             title="test title"
             subtitle="test subtitle"
             items={items}
@@ -1260,6 +1259,7 @@ for (const usingRemoveActiveDescendant of [false, true]) {
             }}
             open={open}
             onOpenChange={open => setOpen(open)}
+            {...passthroughProps}
           />
         )
       }
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 1f876fa649f..7aa5fef65ce 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -148,7 +148,7 @@ const doesItemsIncludeItem = (items: ItemInput[], item: ItemInput) => {
 const defaultRenderAnchor: NonNullable<SelectPanelProps['renderAnchor']> = props => {
   const {children, ...rest} = props
   return (
-    <Button {...rest} trailingAction={TriangleDownIcon}>
+    <Button trailingAction={TriangleDownIcon} {...rest}>
       {children}
     </Button>
   )
@@ -848,12 +848,12 @@ function Panel({
             </div>
           )}
           <FilteredActionList
-            {...listProps}
             filterValue={filterValue}
             onFilterChange={onFilterChange}
             onListContainerRefChanged={onListContainerRefChanged}
             onInputRefChanged={onInputRefChanged}
             placeholderText={placeholderText}
+            {...listProps}
             variant={listProps.groupMetadata?.length ? 'horizontal-inset' : 'inset'}
             role="listbox"
             // browsers give aria-labelledby precedence over aria-label so we need to make sure
@@ -947,7 +947,7 @@ function Panel({
 
 const SecondaryButton: React.FC<ButtonProps> = props => {
   return (
-    <Button {...props} block>
+    <Button block {...props}>
       {props.children}
     </Button>
   )
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 972c4d1579d..0e80ceb2855 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -55,7 +55,7 @@ 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 (
-    <Link {...rest} aria-current={isReactRouter || selected ? 'page' : undefined} className={newClassName}>
+    <Link aria-current={isReactRouter || selected ? 'page' : undefined} className={newClassName} {...rest}>
       {children}
     </Link>
   )
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index dcc93561d49..eb52dc7800b 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -18,10 +18,10 @@ export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(funct
 ) {
   return (
     <div
-      {...props}
       ref={ref as React.RefObject<HTMLDivElement>}
       className={clsx(className, classes.SkeletonBox)}
       style={{height, width, ...(style || {})}}
+      {...props}
     />
   )
 })
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
index ad9b430f90d..e3724053d5f 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
@@ -27,8 +27,8 @@ function SkeletonAvatar({size = DEFAULT_AVATAR_SIZE, square, className, style, .
 
   return (
     <SkeletonBox
-      {...rest}
       className={clsx(className, classes.SkeletonAvatar)}
+      {...rest}
       data-component="SkeletonAvatar"
       data-responsive={responsive ? '' : undefined}
       data-square={square ? '' : undefined}
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index 1d2a679f1a6..37ebb21b013 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -19,7 +19,6 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
   if (lines < 2) {
     return (
       <SkeletonBox
-        {...rest}
         data-component="SkeletonText"
         data-text-skeleton-size={size}
         width="100%"
@@ -28,6 +27,7 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
           ...style,
           maxWidth,
         }}
+        {...rest}
       />
     )
   }
@@ -43,12 +43,12 @@ function SkeletonText({lines = 1, maxWidth, size = 'bodyMedium', className, styl
     >
       {Array.from({length: lines}, (_, index) => (
         <SkeletonBox
-          {...rest}
           key={index}
           data-component="SkeletonText"
           data-in-multiline="true"
           data-text-skeleton-size={size}
           className={clsx(className, classes.SkeletonText)}
+          {...rest}
         />
       ))}
     </div>
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index b4f51e50ee8..d87ff3e10b9 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -38,7 +38,6 @@ function Spinner({
     /* inline-flex removes the extra line height */
     <span className={classes.Box}>
       <svg
-        {...props}
         height={size}
         width={size}
         viewBox="0 0 16 16"
@@ -48,6 +47,7 @@ function Spinner({
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
         className={clsx(className, classes.SpinnerAnimation)}
         style={style}
+        {...props}
       >
         <circle
           cx="8"
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 099d34f57fb..1e902129248 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -15,7 +15,6 @@ export type SplitPageLayoutProps = {className?: string}
 export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = props => {
   return (
     <PageLayout
-      {...props}
       containerWidth="full"
       padding="none"
       columnGap="none"
@@ -24,6 +23,7 @@ export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = pro
         header: Header,
         footer: Footer,
       }}
+      {...props}
     />
   )
 }
@@ -41,7 +41,7 @@ export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Header {...props} padding={padding} divider={divider} />
+  return <PageLayout.Header padding={padding} divider={divider} {...props} />
 }
 
 Header.displayName = 'SplitPageLayout.Header'
@@ -56,7 +56,7 @@ export const Content: React.FC<React.PropsWithChildren<SplitPageLayoutContentPro
   padding = 'normal',
   ...props
 }) => {
-  return <PageLayout.Content {...props} width={width} padding={padding} />
+  return <PageLayout.Content width={width} padding={padding} {...props} />
 }
 
 Content.displayName = 'SplitPageLayout.Content'
@@ -75,11 +75,11 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
 }) => {
   return (
     <PageLayout.Pane
-      {...props}
       position={position}
       sticky={sticky}
       padding={padding}
       divider={divider}
+      {...props}
     ></PageLayout.Pane>
   )
 }
@@ -96,7 +96,7 @@ export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps
   ...props
 }) => {
   // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Footer {...props} padding={padding} divider={divider} />
+  return <PageLayout.Footer padding={padding} divider={divider} {...props} />
 }
 
 Footer.displayName = 'SplitPageLayout.Footer'
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index ceaea8d52e1..75a4bbc383e 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -85,15 +85,15 @@ const Stack = forwardRef(
   ) => {
     return (
       <Component
+        ref={forwardedRef}
         {...rest}
+        className={clsx(className, classes.Stack)}
         {...getResponsiveAttributes('gap', gap)}
         {...getResponsiveAttributes('direction', direction)}
         {...getResponsiveAttributes('align', align)}
         {...getResponsiveAttributes('wrap', wrap)}
         {...getResponsiveAttributes('justify', justify)}
         {...getResponsiveAttributes('padding', padding)}
-        ref={forwardedRef}
-        className={clsx(className, classes.Stack)}
       >
         {children}
       </Component>
@@ -125,11 +125,11 @@ type StackItemProps<As> = React.PropsWithChildren<{
 const StackItem = forwardRef(({as: Component = 'div', children, grow, shrink, className, ...rest}, forwardedRef) => {
   return (
     <Component
+      ref={forwardedRef}
       {...rest}
+      className={clsx(className, classes.StackItem)}
       {...getResponsiveAttributes('grow', grow)}
       {...getResponsiveAttributes('shrink', shrink)}
-      ref={forwardedRef}
-      className={clsx(className, classes.StackItem)}
     >
       {children}
     </Component>
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 325b938df21..54b56942ad6 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -19,7 +19,7 @@ const SubNav = React.forwardRef<HTMLElement, SubNavProps>(function SubNav(
   forwardRef,
 ) {
   return (
-    <nav {...rest} ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label}>
+    <nav ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label} {...rest}>
       <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
       {actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
     </nav>
@@ -31,7 +31,7 @@ SubNav.displayName = 'SubNav'
 
 const SubNavLinks = React.forwardRef<HTMLDivElement, SubNavLinksProps>(({children, className, ...rest}, forwardRef) => {
   return (
-    <div {...rest} ref={forwardRef} className={clsx(className, styles.Links)}>
+    <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
       {children}
     </div>
   )
@@ -44,11 +44,11 @@ const SubNavLink = React.forwardRef<HTMLAnchorElement, SubNavLinkProps>(
   ({children, className, ...rest}, forwardRef) => {
     return (
       <a
-        {...rest}
         ref={forwardRef}
         className={clsx(className, styles.Link)}
         data-selected={rest.selected}
         aria-current={rest.selected}
+        {...rest}
       >
         {children}
       </a>
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 3e6439312c3..876e130160f 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -82,12 +82,12 @@ const TabNavLink = React.forwardRef(function TabNavLink(
 ) {
   return (
     <Component
-      {...rest}
       ref={ref}
       role="tab"
       tabIndex={-1}
       aria-selected={selected ? true : undefined}
       className={clsx('TabNav-item', styles.TabNavLink, selected && 'selected', selected && styles.Selected, className)}
+      {...rest}
     />
   )
 }) as PolymorphicForwardRefComponent<'a', TabNavLinkProps>
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 9a4186fd60e..6be84edb88d 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -22,10 +22,10 @@ function Text<As extends React.ElementType>(props: TextProps<As>, ref: Forwarded
 
   return (
     <Component
-      {...rest}
       className={clsx(className, classes.Text)}
       data-size={size}
       data-weight={weight}
+      {...rest}
       ref={innerRef}
     />
   )
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 1a071fbda0e..7f68ff98f1c 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -201,19 +201,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} value="auto" />
+          <TextInput value="auto" {...args} />
         </FormControl>
       </div>
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} value="leading" loaderPosition="leading" />
+          <TextInput value="leading" {...args} loaderPosition="leading" />
         </FormControl>
       </div>
       <div className={classes.MarginBottomLarge}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} value="trailing" loaderPosition="trailing" />
+          <TextInput value="trailing" {...args} loaderPosition="trailing" />
         </FormControl>
       </div>
 
@@ -222,19 +222,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} leadingVisual={Calendar} value="auto" />
+          <TextInput leadingVisual={Calendar} {...args} value="auto" />
         </FormControl>
       </div>
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} leadingVisual={Calendar} loaderPosition="leading" value="leading" />
+          <TextInput leadingVisual={Calendar} {...args} loaderPosition="leading" value="leading" />
         </FormControl>
       </div>
       <div className={classes.MarginBottomLarge}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} leadingVisual={Calendar} loaderPosition="trailing" value="trailing" />
+          <TextInput leadingVisual={Calendar} {...args} loaderPosition="trailing" value="trailing" />
         </FormControl>
       </div>
 
@@ -243,19 +243,19 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
         <div className={classes.MarginBottom}>
           <FormControl>
             <FormControl.Label>Default label</FormControl.Label>
-            <TextInput {...args} trailingVisual={Calendar} value="auto" />
+            <TextInput trailingVisual={Calendar} {...args} value="auto" />
           </FormControl>
         </div>
         <div className={classes.MarginBottom}>
           <FormControl>
             <FormControl.Label>Default label</FormControl.Label>
-            <TextInput {...args} trailingVisual={Calendar} loaderPosition="leading" value="leading" />
+            <TextInput trailingVisual={Calendar} {...args} loaderPosition="leading" value="leading" />
           </FormControl>
         </div>
         <div className={classes.MarginBottomLarge}>
           <FormControl>
             <FormControl.Label>Default label</FormControl.Label>
-            <TextInput {...args} trailingVisual={Calendar} loaderPosition="trailing" value="trailing" />
+            <TextInput trailingVisual={Calendar} {...args} loaderPosition="trailing" value="trailing" />
           </FormControl>
         </div>
       </FormControl>
@@ -265,16 +265,16 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
-          <TextInput {...args} size="small" leadingVisual={Calendar} trailingVisual={Calendar} value="auto" />
+          <TextInput size="small" leadingVisual={Calendar} trailingVisual={Calendar} {...args} value="auto" />
         </FormControl>
       </div>
       <div className={classes.MarginBottom}>
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
           <TextInput
-            {...args}
             leadingVisual={Calendar}
             trailingVisual={Calendar}
+            {...args}
             loaderPosition="leading"
             value="leading"
           />
@@ -284,10 +284,10 @@ export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
         <FormControl>
           <FormControl.Label>Default label</FormControl.Label>
           <TextInput
-            {...args}
             size="large"
             leadingVisual={Calendar}
             trailingVisual={Calendar}
+            {...args}
             loaderPosition="trailing"
             value="trailing"
           />
diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx
index 46b1854c646..74afc18adcc 100644
--- a/packages/react/src/TextInput/TextInput.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.stories.tsx
@@ -32,7 +32,7 @@ export const Playground = (args: FormControlArgs<TextInputProps>) => {
     <form className={classes.Container}>
       <FormControl {...parentArgs}>
         <FormControl.Label {...labelArgs} />
-        <TextInput {...args} value={value} onChange={handleChange} />
+        <TextInput value={value} onChange={handleChange} {...args} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
         {validationArgs.children && validationArgs.variant && (
           <FormControl.Validation {...validationArgs} variant={validationArgs.variant} />
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index b3ec004654e..5aa61e3040a 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -157,7 +157,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>
         <UnstyledTextInput
-          {...inputProps}
           ref={inputRef}
           disabled={disabled}
           onFocus={handleInputFocus}
@@ -165,6 +164,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           type={type}
           aria-required={required}
           aria-invalid={validationStatus === 'error' ? 'true' : undefined}
+          {...inputProps}
           aria-describedby={inputDescribedBy}
           data-component="input"
         />
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
index 9ca3052e26d..1b923e86094 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
@@ -28,7 +28,7 @@ const LabelledTextInputWithTokens: React.FC<React.PropsWithChildren<TextInputWit
     <label htmlFor="tokenInput" id="tokenLabel">
       Tokens
     </label>
-    <TextInputWithTokens {...rest} tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" />
+    <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" {...rest} />
   </>
 )
 
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 717b7df4d10..6d72072fa04 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -288,7 +288,6 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       >
         <div className={styles.InputWrapper}>
           <UnstyledTextInput
-            {...inputPropsRest}
             ref={ref}
             disabled={disabled}
             onFocus={handleInputFocus}
@@ -297,11 +296,11 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             type="text"
             className={styles.UnstyledTextInput}
             aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
+            {...inputPropsRest}
           />
         </div>
         {visibleTokens.map(({id, ...tokenRest}, i) => (
           <TokenComponent
-            {...tokenRest}
             disabled={disabled}
             key={id}
             onFocus={handleTokenFocus(i)}
@@ -315,6 +314,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
             hideRemoveButton={disabled || hideTokenRemoveButtons}
             size={size}
             tabIndex={0}
+            {...tokenRest}
           />
         ))}
         {tokensAreTruncated && tokens.length - visibleTokens.length ? (
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 55ebf9b2fec..39d86684372 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -81,7 +81,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         className={className}
       >
         <textarea
-          {...rest}
           value={value}
           data-resize={resize}
           aria-required={required}
@@ -96,6 +95,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             maxHeight,
             ...style,
           }}
+          {...rest}
         />
       </TextInputBaseWrapper>
     )
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index 8268cf7a700..5d151a05f33 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -137,7 +137,7 @@ const ToggleSwitch = React.forwardRef<HTMLButtonElement, ToggleSwitchProps>(func
   if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`
 
   return (
-    <div {...rest} className={clsx(classes.ToggleSwitch, className)} data-status-label-position={statusLabelPosition}>
+    <div className={clsx(classes.ToggleSwitch, className)} data-status-label-position={statusLabelPosition} {...rest}>
       <VisuallyHidden>
         <AriaStatus announceOnShow id={loadingLabelId}>
           {isLoadingLabelVisible && loadingLabel}
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
index ed5aab378c2..7959f79346f 100644
--- a/packages/react/src/Token/IssueLabelToken.tsx
+++ b/packages/react/src/Token/IssueLabelToken.tsx
@@ -59,8 +59,6 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
 
   return (
     <TokenBase
-      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-      {...rest}
       onRemove={onRemove}
       id={id?.toString()}
       isSelected={isSelected}
@@ -70,6 +68,8 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
       style={customProperties}
       data-has-remove-button={!hideRemoveButton && !!onRemove}
       data-selected={isSelected}
+      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
+      {...rest}
       ref={forwardedRef}
     >
       <TokenTextContainer {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</TokenTextContainer>
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
index 98d38918ec9..25cd2278749 100644
--- a/packages/react/src/Token/Token.features.stories.tsx
+++ b/packages/react/src/Token/Token.features.stories.tsx
@@ -26,15 +26,15 @@ export const TokenWithLeadingVisual = () => {
 export const TokenWithOnRemoveFn = ({...args}) => {
   return (
     <div className={classes.TokenRow}>
-      <Token {...args} text="token" onRemove={action('remove me')} />
+      <Token text="token" onRemove={action('remove me')} {...args} />
       <Token
-        {...args}
         as="a"
         href="/?path=/story/components-token-features--issue-label-token-custom-colors"
         onRemove={action('remove me')}
         text="Link"
+        {...args}
       />
-      <Token {...args} as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" />
+      <Token as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" {...args} />
     </div>
   )
 }
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index 5a87030c50d..b89f6b0d9c7 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -59,8 +59,6 @@ const Token = forwardRef((props, forwardedRef) => {
   }
   return (
     <TokenBase
-      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
-      {...rest}
       onRemove={onRemove}
       id={id?.toString()}
       className={clsx(className, classes.Token)}
@@ -68,6 +66,8 @@ const Token = forwardRef((props, forwardedRef) => {
       size={size}
       data-is-selected={props.isSelected}
       data-is-remove-btn={!(hideRemoveButton || !onRemove)}
+      {...(!hasMultipleActionTargets ? interactiveTokenProps : {})}
+      {...rest}
       ref={forwardedRef}
       style={{borderWidth: `${tokenBorderWidthPx}px`, ...style}}
     >
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
index 4803c17e370..6ea5de040e7 100644
--- a/packages/react/src/Token/TokenBase.tsx
+++ b/packages/react/src/Token/TokenBase.tsx
@@ -77,11 +77,6 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
   ) => {
     return (
       <Component
-        {...(Component === 'button'
-          ? (rest as React.ButtonHTMLAttributes<HTMLButtonElement>)
-          : Component === 'a'
-            ? (rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)
-            : (rest as React.HTMLAttributes<HTMLSpanElement>))}
         onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
           onKeyDown && onKeyDown(event)
 
@@ -99,6 +94,11 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
         })}
         data-size={size}
         id={id?.toString()}
+        {...(Component === 'button'
+          ? (rest as React.ButtonHTMLAttributes<HTMLButtonElement>)
+          : Component === 'a'
+            ? (rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)
+            : (rest as React.HTMLAttributes<HTMLSpanElement>))}
         // TypeScript cannot resolve polymorphic ref types at compile time
         // This assertion is safe because the ref will match the actual rendered element
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index 83bf6cc7559..232a9be1900 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -11,13 +11,13 @@ const TokenTextContainer = ({
 }: React.PropsWithChildren<Partial<TokenBaseProps>>) => {
   return (
     <Component
+      className={clsx(classes.TokenTextContainer)}
+      id={id?.toString()}
       {...(Component === 'button'
         ? (props as React.ButtonHTMLAttributes<HTMLButtonElement>)
         : Component === 'a'
           ? (props as React.AnchorHTMLAttributes<HTMLAnchorElement>)
           : (props as React.HTMLAttributes<HTMLSpanElement>))}
-      className={clsx(classes.TokenTextContainer)}
-      id={id?.toString()}
     >
       {children}
     </Component>
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 9c74589c10b..8122db14ae5 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -42,7 +42,7 @@ const Tooltip = React.forwardRef(function Tooltip(
   return (
     // This provider is used to check if an icon button is wrapped with tooltip or not.
     <TooltipContext.Provider value={value}>
-      <Component {...rest} role="tooltip" aria-label={text} id={tooltipId} className={tooltipClasses} ref={ref}>
+      <Component role="tooltip" aria-label={text} id={tooltipId} {...rest} className={tooltipClasses} ref={ref}>
         {children}
       </Component>
     </TooltipContext.Provider>
diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
index b3dea2b0e9b..a6a8e5eedd6 100644
--- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
@@ -37,7 +37,7 @@ export const Playground: StoryFn = args => {
   const {text, type, ...rest} = args
   return (
     <div className={classes.TooltipContainer}>
-      <Tooltip {...rest} text={text} type="description">
+      <Tooltip text={text} type="description" {...rest}>
         <Button>Delete</Button>
       </Tooltip>
     </div>
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index 820f3a4cfe0..cd4411a0dd9 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -327,10 +327,10 @@ export const Tooltip: ForwardRefExoticComponent<
               },
             })}
           <span
-            {...rest}
             className={clsx(className, classes.Tooltip)}
             ref={tooltipElRef}
             data-direction={calculatedDirection}
+            {...rest}
             // Only need tooltip role if the tooltip is a description for supplementary information
             role={type === 'description' ? 'tooltip' : undefined}
             // stop AT from announcing the tooltip twice: when it is a label type it will be announced with "aria-labelledby",when it is a description type it will be announced with "aria-describedby"
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index 8ceb9997aaf..a548e0a519f 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -7,7 +7,7 @@ import {Button, IconButton, ActionMenu, ActionList, BaseStyles, ButtonGroup} fro
 import {XIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
-  <Tooltip {...props} text="Tooltip text">
+  <Tooltip text="Tooltip text" {...props}>
     <Button>Button Text</Button>
   </Tooltip>
 )
@@ -15,7 +15,7 @@ const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) =
 const TooltipComponentWithExistingDescription = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
   <>
     <span id="external-description">External description</span>
-    <Tooltip {...props} text="Tooltip text">
+    <Tooltip text="Tooltip text" {...props}>
       <Button aria-describedby="external-description">Button Text</Button>
     </Tooltip>
   </>
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
index 7f05a63875d..e888ea5d70d 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
@@ -40,7 +40,7 @@ export default {
 
 export const Playground: StoryFn = args => {
   return (
-    <UnderlineNavItem {...args} aria-current="page">
+    <UnderlineNavItem aria-current="page" {...args}>
       {args.children}
     </UnderlineNavItem>
   )
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 4e38bf02ce6..c72f9c57577 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -387,7 +387,6 @@ export const UnderlineNav = forwardRef(
 
                     return (
                       <ActionList.LinkItem
-                        {...menuItemProps}
                         key={menuItemChildren}
                         style={menuItemStyles}
                         onClick={(
@@ -400,6 +399,7 @@ export const UnderlineNav = forwardRef(
                           // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
                           typeof onSelect === 'function' && onSelect(event)
                         }}
+                        {...menuItemProps}
                       >
                         <span className={classes.MenuItemContent}>
                           {menuItemChildren}
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index 065512c274a..963f7c033f1 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -100,7 +100,6 @@ export const UnderlineNavItem = forwardRef(
     return (
       <li className={classes.UnderlineNavItem}>
         <UnderlineItem
-          {...props}
           ref={ref}
           as={Component}
           href={href}
@@ -111,6 +110,7 @@ export const UnderlineNavItem = forwardRef(
           icon={Icon}
           loadingCounters={loadingCounters}
           iconsVisible={iconsVisible}
+          {...props}
         >
           {children}
         </UnderlineItem>
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 04a16a2feea..84b23110742 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -15,7 +15,7 @@ import classes from './VisuallyHidden.module.css'
  */
 export const VisuallyHidden = ({className, children, ...rest}: VisuallyHiddenProps) => {
   return (
-    <span {...rest} className={clsx(className, classes.VisuallyHidden)}>
+    <span className={clsx(className, classes.VisuallyHidden)} {...rest}>
       {children}
     </span>
   )
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index bae5df4d604..64b32f593e3 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -20,7 +20,7 @@ function VisuallyHidden<As extends ElementType = 'span'>({
 }: VisuallyHiddenProps<As>) {
   const Component = as || 'span'
   return (
-    <Component {...rest} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})}>
+    <Component className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}
     </Component>
   )
diff --git a/packages/react/src/deprecated/ActionList/Header.tsx b/packages/react/src/deprecated/ActionList/Header.tsx
index 1da5b0f61b6..dc820d4eee8 100644
--- a/packages/react/src/deprecated/ActionList/Header.tsx
+++ b/packages/react/src/deprecated/ActionList/Header.tsx
@@ -38,11 +38,11 @@ export function Header({
 }: HeaderProps): JSX.Element {
   return (
     <div
-      {...props}
       role="heading"
       className={clsx(className, classes.Header)}
       data-filled={variant === 'filled' ? '' : undefined}
       data-component="ActionList.Header"
+      {...props}
     >
       {title}
       {auxiliaryText && <span>{auxiliaryText}</span>}
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 5058840d7df..0b4a1ed7816 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -175,7 +175,6 @@ export const Item = React.forwardRef((itemProps, ref) => {
 
   return (
     <Component
-      {...props}
       ref={ref}
       tabIndex={disabled ? undefined : -1}
       data-variant={variant}
@@ -183,6 +182,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
       aria-labelledby={text ? labelId : undefined}
       aria-describedby={description ? descriptionId : undefined}
       data-divider={showDivider ? '' : undefined}
+      {...props}
       data-id={id}
       onKeyPress={keyPressHandler}
       onClick={clickHandler}
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index 6c49ed5a1a8..a598e596745 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -173,9 +173,9 @@ export const List = React.forwardRef<HTMLDivElement, ListProps>((props, forwarde
     const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString()
     return (
       <ItemComponent
-        {...itemProps}
         showDivider={restProps.showItemDividers}
         selectionVariant={restProps.selectionVariant}
+        {...itemProps}
         key={key}
         style={itemStyle}
         item={item}
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index ac28ab65baf..c86c401ee9b 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -42,7 +42,7 @@ interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListP
 
 export type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps
 
-const ActionMenuItem = (props: ItemProps) => <Item {...props} role="menuitem" />
+const ActionMenuItem = (props: ItemProps) => <Item role="menuitem" {...props} />
 
 ActionMenuItem.displayName = 'ActionMenu.Item'
 
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index fdc7a5dd38b..b39af5aa2da 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -72,12 +72,12 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
       <>
         <span className={classes.Overlay} ref={overlayRef} />
         <Component
-          {...props}
-          {...getDialogProps()}
           tabIndex={-1}
           ref={modalRef}
           role="dialog"
           aria-modal="true"
+          {...props}
+          {...getDialogProps()}
           className={clsx(classes.Dialog, className)}
           data-width={props.wide ? 'wide' : props.narrow ? 'narrow' : 'default'}
         >
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index eef4a59c7f8..96e11bf7a53 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -18,7 +18,7 @@ function UnderlineNav({actions, className, align, children, full, label, ...rest
     'PRC-UnderlineNav--right': align,
   })
   return (
-    <nav {...rest} className={navClasses} aria-label={label}>
+    <nav className={navClasses} aria-label={label} {...rest}>
       <div className={clsx(classes.UnderlineNavBody, 'PRC-UnderlineNav-body')}>{children}</div>
       {actions && <div className={clsx(classes.UnderlineNavActions, 'PRC-UnderlineNav-actions')}>{actions}</div>}
     </nav>
@@ -37,7 +37,7 @@ const UnderlineNavLink = React.forwardRef<HTMLAnchorElement, UnderlineNavLinkPro
   forwardRef,
 ) {
   const linkClasses = clsx(classes.UnderlineNavItem, className, classes.UnderlineNavLink)
-  return <a {...props} ref={forwardRef} data-selected={selected ? '' : undefined} className={linkClasses} />
+  return <a ref={forwardRef} data-selected={selected ? '' : undefined} className={linkClasses} {...props} />
 })
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link'
diff --git a/packages/react/src/experimental/CSSComponent/index.tsx b/packages/react/src/experimental/CSSComponent/index.tsx
index 744ec61b598..b20a6bef159 100644
--- a/packages/react/src/experimental/CSSComponent/index.tsx
+++ b/packages/react/src/experimental/CSSComponent/index.tsx
@@ -3,5 +3,5 @@ import {clsx} from 'clsx'
 import classNames from './component.module.css'
 
 export const Component: React.FC<React.HTMLProps<HTMLDivElement>> = ({className, ...props}) => {
-  return <div {...props} className={clsx(classNames.Component, className)} />
+  return <div className={clsx(classNames.Component, className)} {...props} />
 }
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index e04d24e33eb..e6c7ca8ac0b 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -95,7 +95,7 @@ function IssueLabel<As extends React.ElementType>({
 
   if ('onClick' in props) {
     return (
-      <button {...props} {...sharedProps} type="button">
+      <button type="button" {...props} {...sharedProps}>
         {children}
       </button>
     )
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 276e4e39fef..04667c2b5d2 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -253,7 +253,6 @@ const Panel: React.FC<SelectPanelProps> = ({
       {Anchor}
 
       <BaseOverlay
-        {...props}
         as="dialog"
         ref={dialogRef}
         aria-labelledby={`${panelId}--title`}
@@ -272,6 +271,7 @@ const Panel: React.FC<SelectPanelProps> = ({
           } as React.CSSProperties
         }
         className={clsx(classes.Overlay, className)}
+        {...props}
         onClick={(event: React.MouseEvent<HTMLElement>) => {
           if (event.target === event.currentTarget) onClickOutside()
         }}
@@ -332,13 +332,13 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop
   if (labelText) {
     return (
       <Button
-        {...inputProps}
         ref={anchorRef}
         aria-label={`${(anchorRef as MutableRefObject<HTMLButtonElement>).current.textContent}, ${labelText}`}
+        {...inputProps}
       />
     )
   } else {
-    return <Button {...props} ref={anchorRef} />
+    return <Button ref={anchorRef} {...props} />
   }
 }) as WithSlotMarker<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>
 
@@ -357,7 +357,7 @@ const SelectPanelHeader: FCWithSlotMarker<React.ComponentPropsWithoutRef<'div'>
   const {title, description, panelId, onCancel, onClearSelection} = React.useContext(SelectPanelContext)
 
   return (
-    <div {...props} className={clsx(classes.Header, className)}>
+    <div className={clsx(classes.Header, className)} {...props}>
       <div
         className={classes.HeaderContent}
         data-description={description ? true : undefined}
@@ -444,7 +444,6 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
 
   return (
     <TextInput
-      {...props}
       ref={inputRef}
       block
       leadingVisual={SearchIcon}
@@ -467,6 +466,7 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
       className={clsx(classes.TextInput, className)}
       onChange={internalOnChange}
       onKeyDown={internalKeyDown}
+      {...props}
     />
   )
 }
@@ -512,7 +512,7 @@ SelectPanelFooter.__SLOT__ = Symbol('SelectPanel.Footer')
 
 const SecondaryButton: React.FC<ButtonProps> = props => {
   const size = useResponsiveValue(responsiveButtonSizes, 'small')
-  return <Button {...props} type="button" size={size} block />
+  return <Button type="button" size={size} block {...props} />
 }
 
 const SecondaryLink: React.FC<LinkProps> = ({className, ...props}) => {
@@ -520,7 +520,7 @@ const SecondaryLink: React.FC<LinkProps> = ({className, ...props}) => {
 
   return (
     // @ts-ignore TODO: is as prop is not recognised by button?
-    <Button {...props} as={Link} size={size} variant="invisible" block className={clsx(classes.SmallText, className)}>
+    <Button as={Link} size={size} variant="invisible" block {...props} className={clsx(classes.SmallText, className)}>
       {props.children}
     </Button>
   )
@@ -538,7 +538,7 @@ const SecondaryCheckbox: React.FC<CheckboxProps> = ({id, children, className, ..
 
   return (
     <div className={classes.SecondaryCheckbox}>
-      <Checkbox {...props} id={checkboxId} className={clsx(classes.Checkbox, className)} />
+      <Checkbox id={checkboxId} className={clsx(classes.Checkbox, className)} {...props} />
       <InputLabel htmlFor={checkboxId} className={classes.SmallText}>
         {children}
       </InputLabel>
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 4c676cfd9ef..7dd02c34482 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -172,11 +172,11 @@ const UnderlinePanels: FCWithSlotMarker<UnderlinePanelsProps> = ({
   return (
     <TabContainerComponent>
       <UnderlineWrapper
-        {...props}
         ref={wrapperRef}
         slot="tablist-wrapper"
         data-icons-visible={iconsVisible}
         className={clsx(className, classes.StyledUnderlineWrapper)}
+        {...props}
       >
         <UnderlineItemList ref={listRef} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} role="tablist">
           {tabs}
@@ -207,7 +207,6 @@ const Tab: FCWithSlotMarker<TabProps> = ({'aria-selected': ariaSelected, onSelec
 
   return (
     <UnderlineItem
-      {...props}
       as="button"
       role="tab"
       tabIndex={ariaSelected ? 0 : -1}
@@ -215,6 +214,7 @@ const Tab: FCWithSlotMarker<TabProps> = ({'aria-selected': ariaSelected, onSelec
       type="button"
       onClick={clickHandler}
       onKeyDown={keyDownHandler}
+      {...props}
     />
   )
 }
@@ -223,7 +223,7 @@ Tab.displayName = 'UnderlinePanels.Tab'
 
 const Panel: FCWithSlotMarker<PanelProps> = ({children, ...rest}) => {
   return (
-    <div {...rest} role="tabpanel">
+    <div role="tabpanel" {...rest}>
       {children}
     </div>
   )
diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx
index 413c153c57a..b68987bb9e8 100644
--- a/packages/react/src/internal/components/ButtonReset.tsx
+++ b/packages/react/src/internal/components/ButtonReset.tsx
@@ -6,7 +6,7 @@ import {clsx} from 'clsx'
  */
 export const Button = ({children, className, ...rest}: React.ComponentPropsWithoutRef<'button'>) => {
   return (
-    <button {...rest} className={clsx(className, classes.ButtonReset)} type="button">
+    <button className={clsx(className, classes.ButtonReset)} type="button" {...rest}>
       {children}
     </button>
   )
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 000268ecbb8..744d71f2237 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -89,13 +89,13 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
     >
       <div>
         <Component
+          className={clsx(className, classes.GroupFieldset)}
+          data-validation={validationChild ? '' : undefined}
           {...(labelChild
             ? {
                 disabled,
               }
             : {})}
-          className={clsx(className, classes.GroupFieldset)}
-          data-validation={validationChild ? '' : undefined}
         >
           {labelChild ? (
             /*
@@ -120,6 +120,7 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
           )}
 
           <div
+            className={classes.Body}
             {...(!labelChild
               ? {
                   ['aria-labelledby']: ariaLabelledby,
@@ -128,7 +129,6 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
                   role: 'group',
                 }
               : {})}
-            className={classes.Body}
           >
             {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
           </div>
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index f36d5266255..5f8924ce1a3 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -41,12 +41,12 @@ function InputLabel({
 
   return (
     <Component
-      {...props}
       data-control-disabled={disabled ? '' : undefined}
       data-visually-hidden={visuallyHidden ? '' : undefined}
       htmlFor={htmlFor}
       id={id}
       className={clsx(className, classes.Label)}
+      {...props}
     >
       {required || requiredText ? (
         <span className={classes.RequiredText}>
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 3c73f61945e..22d45d0b6d0 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -79,18 +79,18 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
         {icon && !children && ariaLabel ? (
           <IconButton
             {...accessibleLabel}
-            {...styleProps}
-            {...rest}
             tooltipDirection={tooltipDirection ?? 's'}
             variant={variant}
             type="button"
             icon={icon}
             size="small"
+            {...styleProps}
+            {...rest}
             ref={forwardedRef}
           />
         ) : (
           <ConditionalTooltip aria-label={ariaLabel}>
-            <Button {...styleProps} {...rest} variant={variant} type="button" ref={forwardedRef}>
+            <Button variant={variant} type="button" {...styleProps} {...rest} ref={forwardedRef}>
               {children}
             </Button>
           </ConditionalTooltip>
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index b9b7f372dfc..a88bb698e3d 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -66,7 +66,6 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
 
     return (
       <span
-        {...restProps}
         ref={forwardRef}
         className={clsx(className, styles.TextInputBaseWrapper)}
         data-block={block || undefined}
@@ -79,6 +78,7 @@ export const TextInputBaseWrapper = React.forwardRef<HTMLElement, StyledTextInpu
         data-validation={validationStatus || undefined}
         data-variant={variant || undefined}
         style={memoizedStyle}
+        {...restProps}
       />
     )
   },
@@ -91,11 +91,11 @@ export const TextInputWrapper = React.forwardRef<HTMLElement, StyledBaseWrapperP
 ) {
   return (
     <TextInputBaseWrapper
-      {...restProps}
       ref={forwardRef}
       className={clsx(className, styles.TextInputWrapper)}
       data-leading-visual={hasLeadingVisual || undefined}
       data-trailing-visual={hasTrailingVisual || undefined}
+      {...restProps}
     />
   )
 })
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 402abeff236..6bb6a388cae 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -24,9 +24,9 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
   const {children, className, as: Component = 'nav', ...rest} = props
   return (
     <Component
-      {...rest}
       className={clsx(classes.UnderlineWrapper, className)}
       ref={ref as ForwardedRef<HTMLDivElement>}
+      {...rest}
     >
       {children}
     </Component>
@@ -35,7 +35,7 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
 
 export const UnderlineItemList = forwardRef(({children, ...rest}: PropsWithChildren, forwardedRef) => {
   return (
-    <ul {...rest} className={classes.UnderlineItemList} ref={forwardedRef}>
+    <ul className={classes.UnderlineItemList} ref={forwardedRef} {...rest}>
       {children}
     </ul>
   )
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index e0c2aa87468..bb419f84f71 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -9,7 +9,7 @@ const UnstyledTextInput = React.forwardRef<HTMLInputElement, ToggledUnstyledText
   {className, ...rest},
   forwardRef,
 ) {
-  return <input {...rest} ref={forwardRef} className={clsx(className, styles.Input)} />
+  return <input ref={forwardRef} {...rest} className={clsx(className, styles.Input)} />
 })
 UnstyledTextInput.displayName = 'UnstyledTextInput'
 
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index 9c1bdd2eeb6..8bca8a2c3db 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -36,10 +36,10 @@ export default meta
 
 const ErsatzOverlay = ({maxWidth, children, ...props}: {maxWidth?: string; children: React.ReactNode}) => (
   <div
-    {...props}
     className={classes.ErsatzOverlay}
     style={maxWidth ? ({'--ersatz-overlay-max-width': maxWidth} as React.CSSProperties) : undefined}
     data-max-width={maxWidth ? '' : undefined}
+    {...props}
   >
     {children}
   </div>
@@ -367,21 +367,21 @@ export function LinkItemStory(): JSX.Element {
           items={[
             {
               text: 'A. Vanilla action',
-              renderItem: props => <ActionList.Item {...props} onAction={() => alert('hi?')} />,
+              renderItem: props => <ActionList.Item onAction={() => alert('hi?')} {...props} />,
             },
             {
               text: 'B. Vanilla link',
-              renderItem: props => <ActionList.Item {...props} as="a" href="/about" />,
+              renderItem: props => <ActionList.Item as="a" href="/about" {...props} />,
             },
             {
               text: 'C. React Router link',
-              renderItem: props => <ActionList.Item {...props} as={ReactRouterLikeLink} to="/about" />,
+              renderItem: props => <ActionList.Item as={ReactRouterLikeLink} to="/about" {...props} />,
             },
             {
               text: 'D. NextJS style',
               renderItem: props => (
                 <NextJSLikeLink href="/about">
-                  <ActionList.Item {...props} as="a" />
+                  <ActionList.Item as="a" {...props} />
                 </NextJSLikeLink>
               ),
             },
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 47393c5aa09..0ae257473fa 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -32,7 +32,7 @@ const meta: Meta = {
 export default meta
 
 const ErsatzOverlay = ({children, ...props}: {children: React.ReactNode}) => (
-  <div {...props} className={classes.ErsatzOverlay}>
+  <div className={classes.ErsatzOverlay} {...props}>
     {children}
   </div>
 )
@@ -163,7 +163,7 @@ export function ComplexListStory(): JSX.Element {
             {groupId: '0'},
             {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
             {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
-            {groupId: '3', renderItem: props => <ActionList.Item {...props} style={{fontWeight: 'bold'}} />},
+            {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
             {groupId: '4'},
           ]}
           items={[
@@ -173,7 +173,7 @@ export function ComplexListStory(): JSX.Element {
               leadingVisual: SearchIcon,
               text: 'repo:github/github',
               groupId: '1',
-              renderItem: props => <ActionList.Item {...props} style={{color: 'rebeccapurple'}} />,
+              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
               trailingVisual: (
                 <>
                   ⌘S
@@ -185,7 +185,7 @@ export function ComplexListStory(): JSX.Element {
               leadingVisual: SearchIcon,
               text: 'repo:github/github',
               groupId: '1',
-              renderItem: props => <ActionList.Item {...props} style={{color: 'rebeccapurple'}} />,
+              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
               trailingText: '⌘S', // backward compatible
               trailingVisual: ArrowRightIcon, // backward compatible
             },
@@ -286,7 +286,7 @@ const DoubleClickableAnchor: Exclude<ActionMenuProps['renderAnchor'], null | und
     [callback],
   )
   return (
-    <Button {...rest} trailingAction={TriangleDownIcon} onClick={onClick}>
+    <Button trailingAction={TriangleDownIcon} onClick={onClick} {...rest}>
       {children}
     </Button>
   )
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index 3042cf73c83..b312d8a5348 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -69,7 +69,6 @@ interface AnchorProps extends React.ComponentPropsWithRef<'div'> {
 
 const Float = ({children, top, left, width, height, sx, style, ...props}: FloatProps) => (
   <div
-    {...props}
     className={classes.Float}
     style={
       {
@@ -85,6 +84,7 @@ const Float = ({children, top, left, width, height, sx, style, ...props}: FloatP
         visibility: sx?.visibility,
       } as React.CSSProperties
     }
+    {...props}
   >
     {children}
   </div>
@@ -92,7 +92,6 @@ const Float = ({children, top, left, width, height, sx, style, ...props}: FloatP
 
 const Anchor = ({children, top, left, width, height, style, ...props}: AnchorProps) => (
   <div
-    {...props}
     className={classes.Anchor}
     style={{
       ...style,
@@ -101,6 +100,7 @@ const Anchor = ({children, top, left, width, height, style, ...props}: AnchorPro
       width: width !== undefined ? `${width}px` : undefined,
       height: height !== undefined ? `${height}px` : undefined,
     }}
+    {...props}
   >
     {children}
   </div>
@@ -225,13 +225,13 @@ export const ComplexAncestry = () => {
 }
 
 const Nav = ({children, ...props}: React.ComponentPropsWithoutRef<'nav'>) => (
-  <nav {...props} className={classes.Nav}>
+  <nav className={classes.Nav} {...props}>
     {children}
   </nav>
 )
 
 const Main = ({children, ...props}: React.ComponentPropsWithRef<'main'>) => (
-  <main {...props} className={classes.Main}>
+  <main className={classes.Main} {...props}>
     {children}
   </main>
 )
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index 68fd05df829..6df61bdf5e6 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -27,7 +27,7 @@ const HelperGlobalStyling = () => (
 )
 
 const MarginButton = ({children, ...props}: React.ComponentProps<typeof Button>) => (
-  <Button {...props} className={classes.MarginButton}>
+  <Button className={classes.MarginButton} {...props}>
     {children}
   </Button>
 )
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 1caa643b272..8c679511cf2 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -13,7 +13,7 @@ export default {
 } as Meta
 
 const MarginButton = ({children, ...props}: React.ComponentProps<typeof Button>) => (
-  <Button {...props} className={classes.MarginButton}>
+  <Button className={classes.MarginButton} {...props}>
     {children}
   </Button>
 )
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 9d575b9b817..44358b1c8e3 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -45,7 +45,7 @@ const ActionListImpl = React.forwardRef(function ActionListImpl<As extends React
   {as, ...rest}: ActionListProps<As>,
   ref: React.ComponentPropsWithRef<As>['ref'],
 ) {
-  return <StyledActionList {...rest} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+  return <StyledActionList ref={ref} {...rest} {...(as ? {forwardedAs: as} : {})} />
 })
 
 const StyledActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps> & SlotMarker = styled(
@@ -58,7 +58,7 @@ const StyledActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps
 
 const ActionListLinkItem = React.forwardRef<HTMLAnchorElement, ActionListLinkItemProps>(
   ({children, as, ...props}, ref) => (
-    <StyledActionListLinkItem {...props} {...(as ? {forwardedAs: as} : {})} ref={ref}>
+    <StyledActionListLinkItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
       {children}
     </StyledActionListLinkItem>
   ),
@@ -94,7 +94,7 @@ const StyledActionListItem: ForwardRefComponent<'li', ActionListItemProps> = sty
 `
 
 const ActionListItem = React.forwardRef<HTMLLIElement, ActionListItemProps>(({children, as, ...props}, ref) => (
-  <StyledActionListItem {...props} {...(as ? {forwardedAs: as} : {})} ref={ref}>
+  <StyledActionListItem ref={ref} {...props} {...(as ? {forwardedAs: as} : {})}>
     {children}
   </StyledActionListItem>
 )) as ForwardRefComponent<'li', ActionListItemProps> & SlotMarker
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
index 4c587681aea..bad340bf8bf 100644
--- a/packages/styled-react/src/components/Avatar.tsx
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -5,7 +5,7 @@ import {Box} from './Box'
 
 type AvatarProps = PrimerAvatarProps & StyledProps
 const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(props, ref) {
-  return <Box {...props} as={PrimerAvatar} ref={ref} />
+  return <Box as={PrimerAvatar} ref={ref} {...props} />
 })
 
 export {Avatar}
diff --git a/packages/styled-react/src/components/BaseStyles.tsx b/packages/styled-react/src/components/BaseStyles.tsx
index 9d11a88325e..e58f33100e8 100644
--- a/packages/styled-react/src/components/BaseStyles.tsx
+++ b/packages/styled-react/src/components/BaseStyles.tsx
@@ -129,14 +129,13 @@ export function BaseStyles({
 
   return (
     <Component
-      {...rest}
       className={clsx('BaseStyles', className)}
+      data-portal-root
       /**
        * We need to map valid primer/react color modes onto valid color modes for primer/primitives
        * valid color modes for primer/primitives: auto | light | dark
        * valid color modes for primer/primer: auto | day | night | light | dark
        */
-      data-portal-root
       data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
       data-light-theme={dayScheme}
       data-dark-theme={nightScheme}
@@ -144,6 +143,7 @@ export function BaseStyles({
         ...baseStyles,
         ...style,
       }}
+      {...rest}
     >
       <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
       {children}
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
index b97530a9540..7d49c8ed618 100644
--- a/packages/styled-react/src/components/Button.tsx
+++ b/packages/styled-react/src/components/Button.tsx
@@ -28,7 +28,7 @@ const ButtonComponent = forwardRef(({as, sx, style: propStyle, ...props}: Button
     if (color) style['--button-color'] = color
   }
 
-  return <StyledButtonComponent {...props} {...(as ? {forwardedAs: as} : {})} style={style} sx={sxStyles} ref={ref} />
+  return <StyledButtonComponent style={style} sx={sxStyles} ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
 }) as ForwardRefComponent<'button', ButtonComponentProps> & SlotMarker
 
 // This function is used to generate a custom cssSelector for the sxProp
diff --git a/packages/styled-react/src/components/Checkbox.tsx b/packages/styled-react/src/components/Checkbox.tsx
index 2ff48042657..3cdd244603b 100644
--- a/packages/styled-react/src/components/Checkbox.tsx
+++ b/packages/styled-react/src/components/Checkbox.tsx
@@ -6,6 +6,6 @@ import {type SxProp} from '../sx'
 export type CheckboxProps = PrimerCheckboxProps & SxProp
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
-  return <Box {...props} as={PrimerCheckbox} ref={ref} />
+  return <Box as={PrimerCheckbox} ref={ref} {...props} />
 })
 ;(Checkbox as typeof Checkbox & SlotMarker).__SLOT__ = PrimerCheckbox.__SLOT__
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
index 086cc73d74f..b8f9eabdf86 100644
--- a/packages/styled-react/src/components/CheckboxGroup.tsx
+++ b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -6,7 +6,7 @@ import Box from './Box'
 export type CheckboxGroupProps = PropsWithChildren<PrimerCheckboxGroupProps> & SxProp
 
 const CheckboxGroupImpl = (props: CheckboxGroupProps) => {
-  return <Box {...props} as={PrimerCheckboxGroup} />
+  return <Box as={PrimerCheckboxGroup} {...props} />
 }
 
 // Define local types based on the internal component props
@@ -17,7 +17,7 @@ type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
-  return <Box {...props} as={PrimerCheckboxGroup.Label} />
+  return <Box as={PrimerCheckboxGroup.Label} {...props} />
 }
 
 type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
@@ -26,7 +26,7 @@ type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
-  return <Box {...props} as={PrimerCheckboxGroup.Caption} />
+  return <Box as={PrimerCheckboxGroup.Caption} {...props} />
 }
 
 type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
@@ -36,7 +36,7 @@ type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
-  return <Box {...props} as={PrimerCheckboxGroup.Validation} />
+  return <Box as={PrimerCheckboxGroup.Validation} {...props} />
 }
 
 export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx
index 29bbf0b525a..ec07906fa56 100644
--- a/packages/styled-react/src/components/CounterLabel.tsx
+++ b/packages/styled-react/src/components/CounterLabel.tsx
@@ -6,5 +6,5 @@ import {type SxProp} from '../sx'
 export type CounterLabelProps = PrimerCounterLabelProps & SxProp
 
 export const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(function CounterLabel(props, ref) {
-  return <Box {...props} as={PrimerCounterLabel} ref={ref} />
+  return <Box as={PrimerCounterLabel} ref={ref} {...props} />
 })
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 7c43d2a7838..827be448318 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -8,26 +8,26 @@ type DialogProps = PropsWithChildren<PrimerDialogProps> & SxProp
 
 const DialogImpl = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props, ref) {
   // @ts-expect-error - PrimerDialog is not recognized as a valid component type
-  return <Box {...props} as={PrimerDialog} ref={ref} />
+  return <Box as={PrimerDialog} ref={ref} {...props} />
 })
 
 type DialogHeaderProps = ComponentPropsWithoutRef<'div'> & SxProp
 
 const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
-  return <Box {...props} as={PrimerDialog.Header} ref={ref} />
+  return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 
 type StyledBodyProps = React.ComponentProps<'div'> & SxProp
 
 const DialogBody = forwardRef<HTMLDivElement, StyledBodyProps>(function DialogBody(props, ref) {
   // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
-  return <Box {...props} as={PrimerDialog.Body} ref={ref} />
+  return <Box as={PrimerDialog.Body} ref={ref} {...props} />
 })
 
 type StyledFooterProps = React.ComponentProps<'div'> & SxProp
 
 const DialogFooter = forwardRef<HTMLDivElement, StyledFooterProps>(function DialogFooter(props, ref) {
-  return <Box {...props} as={PrimerDialog.Footer} ref={ref} />
+  return <Box as={PrimerDialog.Footer} ref={ref} {...props} />
 })
 
 const Dialog = Object.assign(DialogImpl, {
diff --git a/packages/styled-react/src/components/Header.tsx b/packages/styled-react/src/components/Header.tsx
index 5edc48eba37..da906c45477 100644
--- a/packages/styled-react/src/components/Header.tsx
+++ b/packages/styled-react/src/components/Header.tsx
@@ -13,7 +13,6 @@ import type {SxProp} from '../sx'
 type HeaderProps = PrimerHeaderProps & SxProp
 
 const StyledHeader = forwardRef(function Header(props, ref) {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerHeader} ref={ref} {...props} />
 }) as ForwardRefComponent<'header', HeaderProps>
 
@@ -24,12 +23,10 @@ const HeaderImpl = forwardRef(({as, ...props}: HeaderProps, ref) => (
 type HeaderItemProps = PrimerHeaderItemProps & SxProp
 
 const HeaderItem = forwardRef<HTMLDivElement, HeaderItemProps>(function HeaderItem(props, ref) {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerHeader.Item} ref={ref} {...props} />
 })
 
 const StyledHeaderLink = forwardRef<HTMLAnchorElement, PrimerHeaderLinkProps>(function HeaderLink(props, ref) {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerHeader.Link} ref={ref} {...props} />
 })
 
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
index e82c1fae236..9c68b165c86 100644
--- a/packages/styled-react/src/components/IconButton.tsx
+++ b/packages/styled-react/src/components/IconButton.tsx
@@ -26,7 +26,7 @@ const IconButton = forwardRef(({as, sx, ...props}: IconButtonProps, ref) => {
     sxStyles = generateCustomSxProp({size}, sx)
   }
 
-  return <StyledIconButton {...props} {...(as ? {forwardedAs: as} : {})} sx={sxStyles} ref={ref} />
+  return <StyledIconButton sx={sxStyles} {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
 }) as ForwardRefComponent<'a' | 'button', IconButtonProps> & SlotMarker
 
 IconButton.__SLOT__ = PrimerIconButton.__SLOT__
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index f699025e188..d3b15272463 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -20,7 +20,7 @@ const StyledNavListImpl = styled(PrimerNavList).withConfig({
 `
 
 const NavListImpl = forwardRef<HTMLElement, NavListProps>(function NavList({as, ...props}, ref) {
-  return <StyledNavListImpl {...(as ? {forwardedAs: as} : {})} {...props} ref={ref} />
+  return <StyledNavListImpl ref={ref} {...(as ? {forwardedAs: as} : {})} {...props} />
 })
 
 type NavListItemProps = PropsWithChildren<PrimerNavListItemProps> &
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 8662743bb34..2d296ca8620 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -17,21 +17,18 @@ type PageLayoutProps = PropsWithChildren<PrimerPageLayoutProps> & SxProp
 
 const PageLayoutImpl = React.forwardRef<HTMLDivElement, PageLayoutProps>((props, ref) => {
   // @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Wrapper as={PrimerPageLayout} ref={ref} {...props} />
 })
 
 type PageLayoutContentProps = PropsWithChildren<PrimerPageLayoutContentProps> & SxProp
 
 const PageLayoutContent = React.forwardRef<HTMLDivElement, PageLayoutContentProps>((props, ref) => {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Wrapper as={PrimerPageLayout.Content} ref={ref} {...props} />
 })
 
 type PageLayoutPaneProps = PropsWithChildren<PrimerPageLayoutPaneProps> & SxProp
 
 const PageLayoutPane = React.forwardRef<HTMLDivElement, PageLayoutPaneProps>((props, ref) => {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Wrapper as={PrimerPageLayout.Pane} ref={ref} {...props} />
 })
 
diff --git a/packages/styled-react/src/components/RadioGroup.tsx b/packages/styled-react/src/components/RadioGroup.tsx
index 8fd93b08f9f..84a6a8c29bc 100644
--- a/packages/styled-react/src/components/RadioGroup.tsx
+++ b/packages/styled-react/src/components/RadioGroup.tsx
@@ -6,7 +6,7 @@ import Box from './Box'
 export type RadioGroupProps = PropsWithChildren<PrimerRadioGroupProps> & SxProp
 
 const RadioGroupImpl = (props: RadioGroupProps) => {
-  return <Box {...props} as={PrimerRadioGroup} />
+  return <Box as={PrimerRadioGroup} {...props} />
 }
 
 // Define local types based on the internal component props
@@ -17,7 +17,7 @@ type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
-  return <Box {...props} as={PrimerRadioGroup.Label} />
+  return <Box as={PrimerRadioGroup.Label} {...props} />
 }
 
 type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
@@ -26,7 +26,7 @@ type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
-  return <Box {...props} as={PrimerRadioGroup.Caption} />
+  return <Box as={PrimerRadioGroup.Caption} {...props} />
 }
 
 type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
@@ -36,7 +36,7 @@ type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
   } & SxProp
 >
 const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
-  return <Box {...props} as={PrimerRadioGroup.Validation} />
+  return <Box as={PrimerRadioGroup.Validation} {...props} />
 }
 
 export const RadioGroup = Object.assign(RadioGroupImpl, {
diff --git a/packages/styled-react/src/components/RelativeTime.tsx b/packages/styled-react/src/components/RelativeTime.tsx
index e4df4ff20e1..3d8c0a0d625 100644
--- a/packages/styled-react/src/components/RelativeTime.tsx
+++ b/packages/styled-react/src/components/RelativeTime.tsx
@@ -7,5 +7,5 @@ export type RelativeTimeProps = PrimerRelativeTimeProps & SxProp
 
 export function RelativeTime(props: RelativeTimeProps) {
   // @ts-expect-error the types for Box are not correctly inferred here
-  return <Box {...props} as={PrimerRelativeTime} />
+  return <Box as={PrimerRelativeTime} {...props} />
 }
diff --git a/packages/styled-react/src/components/SegmentedControl.tsx b/packages/styled-react/src/components/SegmentedControl.tsx
index 28e51cdb291..cc6a50efe52 100644
--- a/packages/styled-react/src/components/SegmentedControl.tsx
+++ b/packages/styled-react/src/components/SegmentedControl.tsx
@@ -13,15 +13,15 @@ type SegmentedControlButtonProps = PropsWithChildren<PrimerSegmentedControlButto
 type SegmentedControlIconButtonProps = PropsWithChildren<PrimerSegmentedControlIconButtonProps> & SxProp
 
 const SegmentedControlButton = (props: SegmentedControlButtonProps) => {
-  return <Box {...props} as={PrimerSegmentedControl.Button} />
+  return <Box as={PrimerSegmentedControl.Button} {...props} />
 }
 
 const SegmentedControlIconButton = (props: SegmentedControlIconButtonProps) => {
-  return <Box {...props} as={PrimerSegmentedControl.IconButton} />
+  return <Box as={PrimerSegmentedControl.IconButton} {...props} />
 }
 
 const SegmentedControlImpl = (props: SegmentedControlProps) => {
-  return <Box {...props} as={PrimerSegmentedControl} />
+  return <Box as={PrimerSegmentedControl} {...props} />
 }
 
 const SegmentedControl = Object.assign(SegmentedControlImpl, {
diff --git a/packages/styled-react/src/components/StateLabel.tsx b/packages/styled-react/src/components/StateLabel.tsx
index 26eff4193b3..75e28432400 100644
--- a/packages/styled-react/src/components/StateLabel.tsx
+++ b/packages/styled-react/src/components/StateLabel.tsx
@@ -6,7 +6,7 @@ import type {SxProp} from '../sx'
 type StateLabelProps = PrimerStateLabelProps & SxProp
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
-  return <Box {...props} as={PrimerStateLabel} ref={ref} />
+  return <Box as={PrimerStateLabel} ref={ref} {...props} />
 })
 
 export {StateLabel, type StateLabelProps}
diff --git a/packages/styled-react/src/components/SubNav.tsx b/packages/styled-react/src/components/SubNav.tsx
index caf5ea2078e..b5d07b599e8 100644
--- a/packages/styled-react/src/components/SubNav.tsx
+++ b/packages/styled-react/src/components/SubNav.tsx
@@ -11,13 +11,13 @@ import type {SxProp} from '../sx'
 type SubNavProps = PrimerSubNavProps & SxProp
 
 const SubNavImpl = forwardRef<HTMLElement, SubNavProps>(function SubNav(props, ref) {
-  return <Box {...props} as={PrimerSubNav} ref={ref} />
+  return <Box as={PrimerSubNav} ref={ref} {...props} />
 })
 
 type SubNavLinkProps = PrimerSubNavLinkProps & SxProp
 
 const SubNavLink = forwardRef<HTMLAnchorElement, SubNavLinkProps>(function SubNavLink(props, ref) {
-  return <Box {...props} as={PrimerSubNav.Link} ref={ref} />
+  return <Box as={PrimerSubNav.Link} ref={ref} {...props} />
 })
 
 const SubNav = Object.assign(SubNavImpl, {
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 635b842754f..1777d704137 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -18,7 +18,7 @@ const StyledTextInput: ForwardRefComponent<'input', TextInputProps> = styled(Pri
 `
 
 const TextInputImpl = forwardRef<HTMLInputElement, TextInputProps>(({as, ...props}, ref) => {
-  return <StyledTextInput {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+  return <StyledTextInput ref={ref} {...props} {...(as ? {forwardedAs: as} : {})} />
 })
 
 const TextInputAction: ForwardRefComponent<'button', TextInputActionProps> = styled(PrimerTextInput.Action).withConfig({
diff --git a/packages/styled-react/src/components/Timeline.tsx b/packages/styled-react/src/components/Timeline.tsx
index b1c1284e8c8..cdd42e60662 100644
--- a/packages/styled-react/src/components/Timeline.tsx
+++ b/packages/styled-react/src/components/Timeline.tsx
@@ -17,23 +17,23 @@ export type TimelineBodyProps = PrimerTimelineBodyProps & SxProp
 export type TimelineBreakProps = PrimerTimelineBreakProps & SxProp
 
 const TimelineImpl = forwardRef<HTMLDivElement, TimelineProps>(function Timeline(props, ref) {
-  return <Box {...props} as={PrimerTimeline} ref={ref} />
+  return <Box as={PrimerTimeline} ref={ref} {...props} />
 })
 
 const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(function TimelineItem(props, ref) {
-  return <Box {...props} as={PrimerTimeline.Item} ref={ref} />
+  return <Box as={PrimerTimeline.Item} ref={ref} {...props} />
 })
 
 function TimelineBadge(props: TimelineBadgeProps) {
-  return <Box {...props} as={PrimerTimeline.Badge} />
+  return <Box as={PrimerTimeline.Badge} {...props} />
 }
 
 const TimelineBody = forwardRef<HTMLDivElement, TimelineBodyProps>(function TimelineBody(props, ref) {
-  return <Box {...props} as={PrimerTimeline.Body} ref={ref} />
+  return <Box as={PrimerTimeline.Body} ref={ref} {...props} />
 })
 
 const TimelineBreak = forwardRef<HTMLDivElement, TimelineBreakProps>(function TimelineBreak(props, ref) {
-  return <Box {...props} as={PrimerTimeline.Break} ref={ref} />
+  return <Box as={PrimerTimeline.Break} ref={ref} {...props} />
 })
 
 export const Timeline = Object.assign(TimelineImpl, {
diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx
index a45f92cefec..53974f63d85 100644
--- a/packages/styled-react/src/components/ToggleSwitch.tsx
+++ b/packages/styled-react/src/components/ToggleSwitch.tsx
@@ -6,7 +6,7 @@ import type {StyledProps} from '../styled-props'
 type ToggleSwitchProps = PrimerToggleSwitchProps & Omit<StyledProps, keyof PrimerToggleSwitchProps>
 
 const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function ToggleSwitch(props, ref) {
-  return <Box {...props} as={PrimerToggleSwitch} ref={ref} />
+  return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
 export {ToggleSwitch, type ToggleSwitchProps}
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
index 6bd82e160cf..466e9299e08 100644
--- a/packages/styled-react/src/components/Tooltip.tsx
+++ b/packages/styled-react/src/components/Tooltip.tsx
@@ -9,7 +9,7 @@ const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivEle
   HTMLDivElement,
   TooltipProps
 >(function Tooltip(props, ref) {
-  return <Box {...props} as={PrimerTooltip} ref={ref} />
+  return <Box as={PrimerTooltip} ref={ref} {...props} />
 })
 
 Tooltip.__SLOT__ = PrimerTooltip.__SLOT__
diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx
index 3311a3a96a5..8ccbb31a960 100644
--- a/packages/styled-react/src/components/UnderlineNav.tsx
+++ b/packages/styled-react/src/components/UnderlineNav.tsx
@@ -12,7 +12,7 @@ import {sx, type SxProp} from '../sx'
 export type UnderlineNavProps = PrimerUnderlineNavProps & SxProp
 
 const StyledUnderlineNav = forwardRef<HTMLElement, UnderlineNavProps>(function UnderlineNav(props, ref) {
-  return <Box {...props} as={PrimerUnderlineNav} ref={ref} />
+  return <Box as={PrimerUnderlineNav} ref={ref} {...props} />
 })
 
 export const UnderlineNavImpl = forwardRef(({as, ...props}: UnderlineNavProps, ref) => (
diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx
index c50af96fdfe..18ae4676051 100644
--- a/packages/styled-react/src/components/UnderlinePanels.tsx
+++ b/packages/styled-react/src/components/UnderlinePanels.tsx
@@ -17,7 +17,7 @@ const StyledUnderlinePanels = styled(PrimerUnderlinePanels).withConfig<Underline
 
 // @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
 const UnderlinePanelsImpl = ({as, ...props}: UnderlinePanelsProps) => (
-  <StyledUnderlinePanels {...props} forwardedAs={as} />
+  <StyledUnderlinePanels forwardedAs={as} {...props} />
 )
 
 UnderlinePanelsImpl.displayName = 'UnderlinePanels'
diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx
index edcd2e1051d..88908a51ac0 100644
--- a/packages/styled-react/src/components/deprecated/ActionList.tsx
+++ b/packages/styled-react/src/components/deprecated/ActionList.tsx
@@ -16,7 +16,7 @@ type ActionListItemProps = PropsWithChildren<PrimerActionListItemProps & SxProp
 type ActionListGroupProps = PropsWithChildren<PrimerActionListGroupProps & SxProp>
 
 const ActionListImpl = forwardRef<HTMLDivElement, ActionListProps>(function ActionList(props, ref) {
-  return <Box {...props} as={PrimerActionList} ref={ref} />
+  return <Box as={PrimerActionList} ref={ref} {...props} />
 })
 
 const StyledActionListItem = styled(PrimerActionList.Item).withConfig({
@@ -30,11 +30,11 @@ const ActionListItem = forwardRef<HTMLLIElement, ActionListItemProps>(({as, ...p
 ))
 
 function ActionListGroup(props: ActionListGroupProps) {
-  return <Box {...props} as={PrimerActionList.Group} />
+  return <Box as={PrimerActionList.Group} {...props} />
 }
 
 function ActionListDivider(props: ActionListDividerProps) {
-  return <Box {...props} as={PrimerActionList.Divider} />
+  return <Box as={PrimerActionList.Divider} {...props} />
 }
 
 const ActionList = Object.assign(ActionListImpl, {
diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx
index e8ff0121835..98eba8edcb1 100644
--- a/packages/styled-react/src/components/deprecated/DialogV1.tsx
+++ b/packages/styled-react/src/components/deprecated/DialogV1.tsx
@@ -11,7 +11,6 @@ import type {ForwardRefComponent} from '../../polymorphic'
 type DialogProps = PrimerDialogProps & SxProp
 
 const StyledDialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(props, ref) {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerDialog} ref={ref} {...props} />
 })
 
@@ -22,7 +21,6 @@ const DialogImpl = forwardRef(({as, ...props}: DialogProps, ref) => (
 type DialogHeaderProps = PrimerDialogHeaderProps & SxProp
 
 const StyledDialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(function DialogHeader(props, ref) {
-  // eslint-disable-next-line primer-react/spread-props-first -- `as` must come before spread for styled-components type inference
   return <Box as={PrimerDialog.Header} ref={ref} {...props} />
 })
 

From b80a38448eb9e3595ad55789e840198bf7c95421 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 08:57:43 +0000
Subject: [PATCH 05/12] Add eslint-disable comments for spread-props-first
 warnings

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 eslint.config.mjs                                                | 1 +
 packages/react/src/ActionBar/ActionBar.tsx                       | 1 +
 packages/react/src/ActionList/ActionList.dev.stories.tsx         | 1 +
 packages/react/src/ActionList/ActionList.features.stories.tsx    | 1 +
 packages/react/src/ActionList/Group.tsx                          | 1 +
 packages/react/src/ActionList/Heading.tsx                        | 1 +
 packages/react/src/ActionList/Item.tsx                           | 1 +
 packages/react/src/ActionList/LinkItem.tsx                       | 1 +
 packages/react/src/ActionList/List.tsx                           | 1 +
 packages/react/src/ActionList/TrailingAction.tsx                 | 1 +
 packages/react/src/ActionList/Visuals.tsx                        | 1 +
 packages/react/src/ActionMenu/ActionMenu.tsx                     | 1 +
 packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx           | 1 +
 .../react/src/Autocomplete/Autocomplete.features.stories.tsx     | 1 +
 packages/react/src/Autocomplete/Autocomplete.stories.tsx         | 1 +
 packages/react/src/Autocomplete/Autocomplete.test.tsx            | 1 +
 packages/react/src/Autocomplete/AutocompleteInput.tsx            | 1 +
 packages/react/src/Autocomplete/AutocompleteMenu.tsx             | 1 +
 packages/react/src/Autocomplete/AutocompleteOverlay.tsx          | 1 +
 packages/react/src/Avatar/Avatar.tsx                             | 1 +
 packages/react/src/Banner/Banner.stories.tsx                     | 1 +
 packages/react/src/Banner/Banner.tsx                             | 1 +
 packages/react/src/BaseStyles.tsx                                | 1 +
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx                   | 1 +
 packages/react/src/Button/Button.tsx                             | 1 +
 packages/react/src/Button/ButtonBase.tsx                         | 1 +
 packages/react/src/Button/IconButton.tsx                         | 1 +
 packages/react/src/Button/LinkButton.tsx                         | 1 +
 packages/react/src/Button/__tests__/Button.test.tsx              | 1 +
 packages/react/src/ButtonGroup/ButtonGroup.stories.tsx           | 1 +
 packages/react/src/ButtonGroup/ButtonGroup.tsx                   | 1 +
 packages/react/src/Checkbox/Checkbox.stories.tsx                 | 1 +
 packages/react/src/CheckboxGroup/CheckboxGroup.tsx               | 1 +
 packages/react/src/CircleBadge/CircleBadge.tsx                   | 1 +
 .../react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx  | 1 +
 packages/react/src/Details/Details.tsx                           | 1 +
 packages/react/src/Details/__tests__/Details.test.tsx            | 1 +
 packages/react/src/Dialog/Dialog.tsx                             | 1 +
 packages/react/src/FilteredActionList/FilteredActionList.tsx     | 1 +
 .../react/src/FilteredActionList/FilteredActionListLoaders.tsx   | 1 +
 packages/react/src/FormControl/FormControl.features.stories.tsx  | 1 +
 packages/react/src/Header/Header.tsx                             | 1 +
 packages/react/src/Heading/Heading.tsx                           | 1 +
 packages/react/src/KeybindingHint/components/Sequence.tsx        | 1 +
 packages/react/src/Label/Label.tsx                               | 1 +
 packages/react/src/LabelGroup/LabelGroup.features.stories.tsx    | 1 +
 packages/react/src/LabelGroup/LabelGroup.stories.tsx             | 1 +
 packages/react/src/LabelGroup/LabelGroup.tsx                     | 1 +
 packages/react/src/Link/Link.tsx                                 | 1 +
 packages/react/src/NavList/NavList.features.stories.tsx          | 1 +
 packages/react/src/NavList/NavList.tsx                           | 1 +
 packages/react/src/Octicon/Octicon.stories.tsx                   | 1 +
 packages/react/src/Overlay/Overlay.dev.stories.tsx               | 1 +
 packages/react/src/Overlay/Overlay.stories.tsx                   | 1 +
 packages/react/src/Overlay/Overlay.tsx                           | 1 +
 packages/react/src/PageHeader/PageHeader.tsx                     | 1 +
 packages/react/src/PageLayout/PageLayout.tsx                     | 1 +
 packages/react/src/Pagehead/Pagehead.tsx                         | 1 +
 packages/react/src/Pagination/Pagination.features.stories.tsx    | 1 +
 packages/react/src/Pagination/Pagination.stories.tsx             | 1 +
 packages/react/src/Pagination/Pagination.test.tsx                | 1 +
 packages/react/src/Pagination/Pagination.tsx                     | 1 +
 packages/react/src/Pagination/mocks/ReactRouterLink.tsx          | 1 +
 packages/react/src/Popover/Popover.tsx                           | 1 +
 packages/react/src/ProgressBar/ProgressBar.tsx                   | 1 +
 packages/react/src/Radio/Radio.stories.tsx                       | 1 +
 packages/react/src/Radio/Radio.tsx                               | 1 +
 packages/react/src/RadioGroup/RadioGroup.tsx                     | 1 +
 .../react/src/RelativeTime/RelativeTime.features.stories.tsx     | 1 +
 packages/react/src/RelativeTime/RelativeTime.stories.tsx         | 1 +
 packages/react/src/SegmentedControl/SegmentedControl.tsx         | 1 +
 packages/react/src/SegmentedControl/SegmentedControlButton.tsx   | 1 +
 .../react/src/SegmentedControl/SegmentedControlIconButton.tsx    | 1 +
 packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx       | 1 +
 packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx  | 1 +
 packages/react/src/SelectPanel/SelectPanel.features.stories.tsx  | 1 +
 packages/react/src/SelectPanel/SelectPanel.stories.tsx           | 1 +
 packages/react/src/SelectPanel/SelectPanel.test.tsx              | 1 +
 packages/react/src/SelectPanel/SelectPanel.tsx                   | 1 +
 packages/react/src/SideNav.tsx                                   | 1 +
 packages/react/src/Skeleton/SkeletonBox.tsx                      | 1 +
 packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx             | 1 +
 packages/react/src/SkeletonText/SkeletonText.tsx                 | 1 +
 packages/react/src/Spinner/Spinner.tsx                           | 1 +
 packages/react/src/SplitPageLayout/SplitPageLayout.tsx           | 1 +
 packages/react/src/Stack/Stack.tsx                               | 1 +
 packages/react/src/SubNav/SubNav.tsx                             | 1 +
 packages/react/src/TabNav/TabNav.tsx                             | 1 +
 packages/react/src/Text/Text.tsx                                 | 1 +
 packages/react/src/TextInput/TextInput.features.stories.tsx      | 1 +
 packages/react/src/TextInput/TextInput.stories.tsx               | 1 +
 packages/react/src/TextInput/TextInput.tsx                       | 1 +
 .../react/src/TextInputWithTokens/TextInputWithTokens.test.tsx   | 1 +
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx   | 1 +
 packages/react/src/Textarea/Textarea.tsx                         | 1 +
 packages/react/src/ToggleSwitch/ToggleSwitch.tsx                 | 1 +
 packages/react/src/Token/IssueLabelToken.tsx                     | 1 +
 packages/react/src/Token/Token.features.stories.tsx              | 1 +
 packages/react/src/Token/Token.tsx                               | 1 +
 packages/react/src/Token/TokenBase.tsx                           | 1 +
 packages/react/src/Token/_TokenTextContainer.tsx                 | 1 +
 packages/react/src/Tooltip/Tooltip.tsx                           | 1 +
 packages/react/src/TooltipV2/Tooltip.playground.stories.tsx      | 1 +
 packages/react/src/TooltipV2/Tooltip.tsx                         | 1 +
 packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx          | 1 +
 packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx    | 1 +
 packages/react/src/UnderlineNav/UnderlineNav.tsx                 | 1 +
 packages/react/src/UnderlineNav/UnderlineNavItem.tsx             | 1 +
 packages/react/src/VisuallyHidden/VisuallyHidden.tsx             | 1 +
 packages/react/src/_VisuallyHidden.tsx                           | 1 +
 packages/react/src/deprecated/ActionList/Header.tsx              | 1 +
 packages/react/src/deprecated/ActionList/Item.tsx                | 1 +
 packages/react/src/deprecated/ActionList/List.tsx                | 1 +
 packages/react/src/deprecated/ActionMenu.tsx                     | 1 +
 packages/react/src/deprecated/DialogV1/Dialog.tsx                | 1 +
 packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx      | 1 +
 packages/react/src/experimental/CSSComponent/index.tsx           | 1 +
 packages/react/src/experimental/IssueLabel/IssueLabel.tsx        | 1 +
 packages/react/src/experimental/SelectPanel2/SelectPanel.tsx     | 1 +
 .../react/src/experimental/UnderlinePanels/UnderlinePanels.tsx   | 1 +
 packages/react/src/internal/components/ButtonReset.tsx           | 1 +
 .../components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx     | 1 +
 packages/react/src/internal/components/InputLabel.tsx            | 1 +
 packages/react/src/internal/components/TextInputInnerAction.tsx  | 1 +
 packages/react/src/internal/components/TextInputWrapper.tsx      | 1 +
 .../react/src/internal/components/UnderlineTabbedInterface.tsx   | 1 +
 packages/react/src/internal/components/UnstyledTextInput.tsx     | 1 +
 packages/react/src/stories/deprecated/ActionList.stories.tsx     | 1 +
 packages/react/src/stories/deprecated/ActionMenu.stories.tsx     | 1 +
 packages/react/src/stories/useAnchoredPosition.stories.tsx       | 1 +
 packages/react/src/stories/useFocusTrap.stories.tsx              | 1 +
 packages/react/src/stories/useFocusZone.stories.tsx              | 1 +
 packages/styled-react/src/components/ActionList.tsx              | 1 +
 packages/styled-react/src/components/Avatar.tsx                  | 1 +
 packages/styled-react/src/components/BaseStyles.tsx              | 1 +
 packages/styled-react/src/components/Button.tsx                  | 1 +
 packages/styled-react/src/components/Checkbox.tsx                | 1 +
 packages/styled-react/src/components/CheckboxGroup.tsx           | 1 +
 packages/styled-react/src/components/CounterLabel.tsx            | 1 +
 packages/styled-react/src/components/Dialog.tsx                  | 1 +
 packages/styled-react/src/components/Header.tsx                  | 1 +
 packages/styled-react/src/components/IconButton.tsx              | 1 +
 packages/styled-react/src/components/NavList.tsx                 | 1 +
 packages/styled-react/src/components/PageLayout.tsx              | 1 +
 packages/styled-react/src/components/RadioGroup.tsx              | 1 +
 packages/styled-react/src/components/RelativeTime.tsx            | 1 +
 packages/styled-react/src/components/SegmentedControl.tsx        | 1 +
 packages/styled-react/src/components/StateLabel.tsx              | 1 +
 packages/styled-react/src/components/SubNav.tsx                  | 1 +
 packages/styled-react/src/components/TextInput.tsx               | 1 +
 packages/styled-react/src/components/Timeline.tsx                | 1 +
 packages/styled-react/src/components/ToggleSwitch.tsx            | 1 +
 packages/styled-react/src/components/Tooltip.tsx                 | 1 +
 packages/styled-react/src/components/UnderlineNav.tsx            | 1 +
 packages/styled-react/src/components/UnderlinePanels.tsx         | 1 +
 packages/styled-react/src/components/deprecated/ActionList.tsx   | 1 +
 packages/styled-react/src/components/deprecated/DialogV1.tsx     | 1 +
 157 files changed, 157 insertions(+)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index fa12cbcf83c..c8459d8786a 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -149,6 +149,7 @@ const config = defineConfig([
       'react/display-name': 'off',
       'react/jsx-uses-react': 'error',
       'react-hooks/exhaustive-deps': 'error',
+      'eslint-comments/no-use': 'off',
       camelcase: [
         'error',
         {
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 7046dc44984..6ba6e505328 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {RefObject, MouseEventHandler} from 'react'
 import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index ec560222be0..ee933cb9fe9 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index e7ff8b11f50..9dd98ecf8b7 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 441e79302c9..759cd2d5922 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {useId} from '../hooks/useId'
 import {ListContext, type ActionListProps} from './shared'
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 510c94231d8..fd88b9d6265 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index b25a169bd50..df7e0350547 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index 8939b450284..2263247bc72 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Link from '../Link'
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index c5c3860f6fb..bde4a1bfbda 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 933c3a6f584..535a8b8d7e6 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index c091391e465..f002bcf7230 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {AlertIcon} from '@primer/octicons-react'
 import Spinner from '../Spinner'
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index c2c722cb895..5e117b16095 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useContext, useMemo, useEffect, useState} from 'react'
 import {TriangleDownIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index 0ba6cf0b174..d51d9ba791a 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useEffect} from 'react'
 import type {OverlayProps} from '../Overlay'
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index bf0577cee9b..f7241ef966e 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 4c8bda2827c..8af392d23d6 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index 5b97da8cdc9..d66baec0913 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {render, fireEvent, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index f95c4e7f7c2..7099ab0c94d 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, FocusEventHandler, KeyboardEventHandler} from 'react'
 import React, {useCallback, useContext, useEffect, useState} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index 69918c48e99..d5466f63258 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'
 import {debounce} from '@github/mini-throttle'
 import {announce} from '@primer/live-region-element'
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index d72494a7545..16622939ae7 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useContext} from 'react'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index b9e501a8412..3a0b16acb0d 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
index 4a52e80cf63..b6fe19fcb80 100644
--- a/packages/react/src/Banner/Banner.stories.tsx
+++ b/packages/react/src/Banner/Banner.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import Link from '../Link'
 import {Banner} from '../Banner'
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 81d04875cf6..ec8ca2a45b1 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 9077d733daf..96b27432182 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index b773b1f9596..7e95402b978 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useState, useRef, useCallback, useEffect, useMemo, type ForwardedRef} from 'react'
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index ad4c4968a61..1f5f1fa6a20 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 97f3564e35c..376145c6bdb 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import type {ButtonProps} from './types'
diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx
index 7c439047429..74280d288a9 100644
--- a/packages/react/src/Button/IconButton.tsx
+++ b/packages/react/src/Button/IconButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {IconButtonProps} from './types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index bac52d497b3..f64600e5db3 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 4250ff75396..35b8d5e19a6 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, HeartIcon} from '@primer/octicons-react'
 import {render, screen, fireEvent} from '@testing-library/react'
 import {describe, it, expect, vi} from 'vitest'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 095ac33d9cc..97a29536d6b 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {StoryFn, Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import type {ButtonProps} from '../Button'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index cd07d132175..bbab84968dc 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import classes from './ButtonGroup.module.css'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index 1ffafd73c8e..a1857be92d6 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {CheckboxProps} from '..'
 import {Checkbox} from '..'
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index fd064c7973c..19a9434371d 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler} from 'react'
 import React from 'react'
 import type {CheckboxOrRadioGroupProps} from '../internal/components/CheckboxOrRadioGroup'
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index 0d106c78d50..f95d0b63ddd 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import Octicon from '../Octicon'
 import isNumeric from '../utils/isNumeric'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 1c6be800b36..813a00cc93d 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '..'
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index f493bf495e1..50ea2814614 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, type ComponentPropsWithoutRef, type ReactElement} from 'react'
 import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index ead5d97a041..e235fee58c3 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {describe, expect, it} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 9bfacac1238..fefc9c31a18 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import type {ButtonProps} from '../Button'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index 61ccb33538e..e02e5a7c669 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler} from 'react'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
index bbd4d134a59..5b507c2197c 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import Spinner from '../Spinner'
 import {Stack} from '../Stack/Stack'
 import {SkeletonBox} from '../Skeleton/SkeletonBox'
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 5a645dff7f1..9c759b14677 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 531938db66d..639c1ae84d3 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Location, Pathname} from 'history'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 56c7c7ed149..26303dddacb 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx
index ff16fb8675d..ca86f87cf42 100644
--- a/packages/react/src/KeybindingHint/components/Sequence.tsx
+++ b/packages/react/src/KeybindingHint/components/Sequence.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Fragment} from 'react'
 import type {KeybindingHintProps} from '../props'
 import VisuallyHidden from '../../_VisuallyHidden'
diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index 640d16e2de0..cbf4123a792 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -1,5 +1,6 @@
 // TODO: merge https://github.com/primer/react/pull/6631 which removes `Box` usage
 
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Label.module.css'
 import React from 'react'
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index 2b9c6ba4e73..3db334af474 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index fc13d4b834a..de4b583b6c6 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {LabelGroupProps} from './LabelGroup'
 import LabelGroup from './LabelGroup'
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 7c0175b8fc1..3d58cd7c513 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import {getFocusableChild} from '@primer/behaviors/utils'
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 59d218173c1..41f494bae4e 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useEffect, type ForwardedRef, type ElementRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 218d1135b1e..4d807d7fa5c 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import React from 'react'
 import {PageLayout} from '../PageLayout'
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 8648957d4aa..9df411e09cd 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {ChevronDownIcon, PlusIcon, type Icon} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React, {isValidElement} from 'react'
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index ea024064a9d..91cbdd7c66e 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
index 55736b4e2b5..dfa0f47e366 100644
--- a/packages/react/src/Overlay/Overlay.dev.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import Text from '../Text'
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index 8f31d3d8879..66bd0bed9bc 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useState, useRef, type ComponentProps} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import {XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 89557b79c29..9cd249a7472 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ComponentPropsWithRef, ReactElement} from 'react'
 import React, {useEffect, useRef} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 2289585a79d..c16cefb497d 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 8d8ae16fbfd..d548a335cea 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useRef} from 'react'
 import {clsx} from 'clsx'
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index c0bead6c382..3228c652c1b 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
diff --git a/packages/react/src/Pagination/Pagination.features.stories.tsx b/packages/react/src/Pagination/Pagination.features.stories.tsx
index 0aeaac725ca..2f6acc72a55 100644
--- a/packages/react/src/Pagination/Pagination.features.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
index 64a2047e6d4..250c4c80262 100644
--- a/packages/react/src/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index f2b1c62ad77..446c4772e99 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {render as HTMLRender} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 import Pagination from '../Pagination'
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 1d362001705..9ea9b5b5b9f 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
 import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index 9f6b8b3e65a..e0d60e5d691 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; className?: string}
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 80e877afba4..b950505bcbf 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Popover.module.css'
 import type {HTMLProps} from 'react'
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 4f6f9a117ee..1746a73c667 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {clsx} from 'clsx'
 import classes from './ProgressBar.module.css'
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index c7be73a83f4..b811d7cf9ea 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {RadioProps} from '..'
 import {FormControl, Radio} from '..'
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 16a98b94a53..6e6c6421f94 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
 import React, {useContext} from 'react'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index ff589e0a3c8..50c2de4eb34 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler, FC} from 'react'
 import type React from 'react'
 import {createContext} from 'react'
diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
index c9ecb5a24e4..0a0726d5f7a 100644
--- a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
index b5241465cd2..2a45c7c4679 100644
--- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index 76d25fbb64c..feb1b5ad6cc 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useRef, useState} from 'react'
 import type {SegmentedControlButtonProps} from './SegmentedControlButton'
 import Button from './SegmentedControlButton'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 94803bb2152..ace0b72dee4 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index ee70b240efd..2a46b4e7929 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index 5db418a413a..f9ec5f8b7a2 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import type React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 00b57ebcba3..026b67878f3 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useMemo, useRef, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index dd1fa062d03..82b7a1a6478 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useRef, useEffect} from 'react'
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 9f2d4befe4a..5a06209d936 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import {useState} from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index ccffe06d79c..d58c69b5504 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {render, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, beforeEach, vi} from 'vitest'
 import React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 7aa5fef65ce..d2869e7eb48 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, TriangleDownIcon, XIcon, type IconProps} from '@primer/octicons-react'
 import React, {useCallback, useEffect, useMemo, useRef, useState, type KeyboardEventHandler} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 0e80ceb2855..df05f1279fd 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {To} from 'history'
 import type {ComponentProps} from './utils/types'
 import Link, {type LinkProps} from './Link'
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index eb52dc7800b..05953966364 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type CSSProperties, type HTMLProps} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
index e3724053d5f..45677828445 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import type {AvatarProps} from '../Avatar'
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index 37ebb21b013..afc95c769ab 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type HTMLProps} from 'react'
 import classes from './SkeletonText.module.css'
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index d87ff3e10b9..bd8e1a4676f 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 1e902129248..31a4021077f 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {
   PageLayoutContentProps,
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 75a4bbc383e..476f1b775d6 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef, type ElementType} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 54b56942ad6..8d4ee66b1fd 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 876e130160f..7bc136da3d6 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useRef, useState} from 'react'
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 6be84edb88d..711822717b9 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {type ForwardedRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 7f68ff98f1c..fffd2a30e74 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import {FormControl, Heading, Stack} from '..'
diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx
index 74afc18adcc..718ab99f913 100644
--- a/packages/react/src/TextInput/TextInput.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 5aa61e3040a..28a918ee75c 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useState, useId} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
index 1b923e86094..933276df708 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {render as HTMLRender, fireEvent, act, render} from '@testing-library/react'
 import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 6d72072fa04..d390b4474b4 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {FocusKeys} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
 import {omit} from '@styled-system/props'
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 39d86684372..241195f7bcb 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index 5d151a05f33..a72305b2838 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useEffect} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
index 7959f79346f..b0a2c3dc92c 100644
--- a/packages/react/src/Token/IssueLabelToken.tsx
+++ b/packages/react/src/Token/IssueLabelToken.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import {forwardRef, useMemo} from 'react'
 import type {TokenBaseProps} from './TokenBase'
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
index 25cd2278749..450ecc3c159 100644
--- a/packages/react/src/Token/Token.features.stories.tsx
+++ b/packages/react/src/Token/Token.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import {action} from 'storybook/actions'
 import Token from './Token'
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index b89f6b0d9c7..f803dbd688d 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import type React from 'react'
 import {forwardRef} from 'react'
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
index 6ea5de040e7..88d97b381e3 100644
--- a/packages/react/src/Token/TokenBase.tsx
+++ b/packages/react/src/Token/TokenBase.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ComponentProps, KeyboardEvent} from 'react'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index 232a9be1900..d33e7ec5a8f 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {TokenBaseProps} from './TokenBase'
 import type React from 'react'
 import classes from './_TokenTextContainer.module.css'
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 8122db14ae5..3a8cdede7f8 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useMemo} from 'react'
 import {useId} from '../hooks'
diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
index a6a8e5eedd6..0ab25f3721a 100644
--- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Button} from '..'
 import {Tooltip} from './Tooltip'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index cd4411a0dd9..190d009b5c3 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {Children, useEffect, useRef, useState, useMemo, type ForwardRefExoticComponent} from 'react'
 import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks'
 import {invariant} from '../utils/invariant'
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index a548e0a519f..7f357201efd 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import type {TooltipProps} from '../Tooltip'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
index e888ea5d70d..8c24ad79703 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {UnderlineNav} from './index'
 import {UnderlineNavItem} from './UnderlineNavItem'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index c72f9c57577..44e359f8a2f 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {RefObject} from 'react'
 import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
 import {UnderlineNavContext} from './UnderlineNavContext'
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index 963f7c033f1..e09a1dc4371 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MutableRefObject, RefObject} from 'react'
 import React, {forwardRef, useRef, useContext} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 84b23110742..b8c0f270076 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {type HTMLAttributes} from 'react'
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 64b32f593e3..31e52560a26 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
 import type {PolymorphicProps} from './utils/modern-polymorphic'
diff --git a/packages/react/src/deprecated/ActionList/Header.tsx b/packages/react/src/deprecated/ActionList/Header.tsx
index dc820d4eee8..2e41e488fea 100644
--- a/packages/react/src/deprecated/ActionList/Header.tsx
+++ b/packages/react/src/deprecated/ActionList/Header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 0b4a1ed7816..78f4d30fc9c 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {CheckIcon} from '@primer/octicons-react'
 import React, {useCallback} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index a598e596745..c8882192de3 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Key} from 'react'
 import React from 'react'
 import type {AriaRole} from '../../utils/types'
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index c86c401ee9b..6bf114951b7 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {GroupedListProps, ListPropsBase} from './ActionList/List'
 import {List} from './ActionList/List'
 import type {ItemProps} from './ActionList/Item'
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index b39af5aa2da..1fc0fb36595 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef, useRef, type HTMLAttributes} from 'react'
 import {IconButton} from '../../Button'
 import useDialog from '../../hooks/useDialog'
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index 96e11bf7a53..4c26ec34ac4 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/experimental/CSSComponent/index.tsx b/packages/react/src/experimental/CSSComponent/index.tsx
index b20a6bef159..d5ee8caf2fe 100644
--- a/packages/react/src/experimental/CSSComponent/index.tsx
+++ b/packages/react/src/experimental/CSSComponent/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classNames from './component.module.css'
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index e6c7ca8ac0b..2626970a760 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {getColorsFromHex} from './getColorFromHex'
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 04667c2b5d2..4441a75f10f 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, useState, type MutableRefObject} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 7dd02c34482..2046cfba11a 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {
   Children,
   isValidElement,
diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx
index b68987bb9e8..6207e10e6a2 100644
--- a/packages/react/src/internal/components/ButtonReset.tsx
+++ b/packages/react/src/internal/components/ButtonReset.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import classes from './ButtonReset.module.css'
 import {clsx} from 'clsx'
 
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 744d71f2237..70884e00c20 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import ValidationAnimationContainer from '../ValidationAnimationContainer'
 import {useId} from '../../../hooks/useId'
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 5f8924ce1a3..3147a1f9149 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import classes from './InputLabel.module.css'
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 22d45d0b6d0..35b4b46f8e4 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index a88bb698e3d..4c4bc8382ee 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {type ComponentProps} from 'react'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 6bb6a388cae..85fa5e9a2f7 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -1,5 +1,6 @@
 // Used for UnderlineNav and UnderlinePanels components
 
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react'
 import {isElement} from 'react-is'
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index bb419f84f71..432097ba672 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import styles from './UnstyledTextInput.module.css'
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index 8bca8a2c3db..68e43a74d37 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 0ae257473fa..57d2ee8a203 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index b312d8a5348..e14fcdfc9d4 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index 6df61bdf5e6..aacb86e6c98 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 8c679511cf2..38fbcaf5cb8 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Flash} from '..'
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 44358b1c8e3..0215d8330d3 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import styled from 'styled-components'
 import {
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
index bad340bf8bf..eaed694672f 100644
--- a/packages/styled-react/src/components/Avatar.tsx
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {type AvatarProps as PrimerAvatarProps, Avatar as PrimerAvatar} from '@primer/react'
 import {forwardRef} from 'react'
 import type {StyledProps} from '../styled-props'
diff --git a/packages/styled-react/src/components/BaseStyles.tsx b/packages/styled-react/src/components/BaseStyles.tsx
index e58f33100e8..59a10e794d8 100644
--- a/packages/styled-react/src/components/BaseStyles.tsx
+++ b/packages/styled-react/src/components/BaseStyles.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
index 7d49c8ed618..d3628117510 100644
--- a/packages/styled-react/src/components/Button.tsx
+++ b/packages/styled-react/src/components/Button.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Button as PrimerButton, type ButtonProps as PrimerButtonProps, type SlotMarker} from '@primer/react'
 import type {SxProp, CSSCustomProperties, BetterSystemStyleObject} from '../sx'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Checkbox.tsx b/packages/styled-react/src/components/Checkbox.tsx
index 3cdd244603b..2264dbcacda 100644
--- a/packages/styled-react/src/components/Checkbox.tsx
+++ b/packages/styled-react/src/components/Checkbox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Checkbox as PrimerCheckbox, type CheckboxProps as PrimerCheckboxProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
index b8f9eabdf86..c40efaabb5c 100644
--- a/packages/styled-react/src/components/CheckboxGroup.tsx
+++ b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {CheckboxGroup as PrimerCheckboxGroup, type CheckboxGroupProps as PrimerCheckboxGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx
index ec07906fa56..6a592f19544 100644
--- a/packages/styled-react/src/components/CounterLabel.tsx
+++ b/packages/styled-react/src/components/CounterLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {CounterLabel as PrimerCounterLabel, type CounterLabelProps as PrimerCounterLabelProps} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 827be448318..2b1931323d8 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react'
 import type {DialogProps as PrimerDialogProps} from '@primer/react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Header.tsx b/packages/styled-react/src/components/Header.tsx
index da906c45477..5e9f171e55c 100644
--- a/packages/styled-react/src/components/Header.tsx
+++ b/packages/styled-react/src/components/Header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   type HeaderProps as PrimerHeaderProps,
   type HeaderItemProps as PrimerHeaderItemProps,
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
index 9c68b165c86..35ce2b5b765 100644
--- a/packages/styled-react/src/components/IconButton.tsx
+++ b/packages/styled-react/src/components/IconButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   IconButton as PrimerIconButton,
   type IconButtonProps as PrimerIconButtonProps,
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index d3b15272463..b005875ea67 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {NavList as PrimerNavList} from '@primer/react'
 import type {
   NavListProps as PrimerNavListProps,
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 2d296ca8620..6139ca45b90 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import styled from 'styled-components'
 import type {
diff --git a/packages/styled-react/src/components/RadioGroup.tsx b/packages/styled-react/src/components/RadioGroup.tsx
index 84a6a8c29bc..53dba596030 100644
--- a/packages/styled-react/src/components/RadioGroup.tsx
+++ b/packages/styled-react/src/components/RadioGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/RelativeTime.tsx b/packages/styled-react/src/components/RelativeTime.tsx
index 3d8c0a0d625..7af7ec4df69 100644
--- a/packages/styled-react/src/components/RelativeTime.tsx
+++ b/packages/styled-react/src/components/RelativeTime.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
 import React from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/SegmentedControl.tsx b/packages/styled-react/src/components/SegmentedControl.tsx
index cc6a50efe52..8b29a4ad1a1 100644
--- a/packages/styled-react/src/components/SegmentedControl.tsx
+++ b/packages/styled-react/src/components/SegmentedControl.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   type SegmentedControlProps as PrimerSegmentedControlProps,
   SegmentedControl as PrimerSegmentedControl,
diff --git a/packages/styled-react/src/components/StateLabel.tsx b/packages/styled-react/src/components/StateLabel.tsx
index 75e28432400..56c25286613 100644
--- a/packages/styled-react/src/components/StateLabel.tsx
+++ b/packages/styled-react/src/components/StateLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/SubNav.tsx b/packages/styled-react/src/components/SubNav.tsx
index b5d07b599e8..bb373f7a493 100644
--- a/packages/styled-react/src/components/SubNav.tsx
+++ b/packages/styled-react/src/components/SubNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 1777d704137..bca29df195b 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   TextInput as PrimerTextInput,
   type TextInputProps as PrimerTextInputProps,
diff --git a/packages/styled-react/src/components/Timeline.tsx b/packages/styled-react/src/components/Timeline.tsx
index cdd42e60662..62c02311d37 100644
--- a/packages/styled-react/src/components/Timeline.tsx
+++ b/packages/styled-react/src/components/Timeline.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   Timeline as PrimerTimeline,
   type TimelineProps as PrimerTimelineProps,
diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx
index 53974f63d85..7cf527ffe1e 100644
--- a/packages/styled-react/src/components/ToggleSwitch.tsx
+++ b/packages/styled-react/src/components/ToggleSwitch.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {ToggleSwitch as PrimerToggleSwitch, type ToggleSwitchProps as PrimerToggleSwitchProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
index 466e9299e08..7e877d576b1 100644
--- a/packages/styled-react/src/components/Tooltip.tsx
+++ b/packages/styled-react/src/components/Tooltip.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx
index 8ccbb31a960..33c2c3dfb95 100644
--- a/packages/styled-react/src/components/UnderlineNav.tsx
+++ b/packages/styled-react/src/components/UnderlineNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlineNav as PrimerUnderlineNav,
   type UnderlineNavProps as PrimerUnderlineNavProps,
diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx
index 18ae4676051..1c4db18bb4a 100644
--- a/packages/styled-react/src/components/UnderlinePanels.tsx
+++ b/packages/styled-react/src/components/UnderlinePanels.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlinePanels as PrimerUnderlinePanels,
   type UnderlinePanelsProps as PrimerUnderlinePanelsProps,
diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx
index 88908a51ac0..7d473c01e36 100644
--- a/packages/styled-react/src/components/deprecated/ActionList.tsx
+++ b/packages/styled-react/src/components/deprecated/ActionList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {type PropsWithChildren, forwardRef} from 'react'
 import {
   ActionList as PrimerActionList,
diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx
index 98eba8edcb1..e82db00c03b 100644
--- a/packages/styled-react/src/components/deprecated/DialogV1.tsx
+++ b/packages/styled-react/src/components/deprecated/DialogV1.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react/deprecated'
 import type {
   DialogProps as PrimerDialogProps,

From c9bbf7f12b72a5152aa1183912e9ca468f0a3a8f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 10:19:15 +0000
Subject: [PATCH 06/12] Remove eslint-disable comments and remove
 --max-warnings from lint command

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
---
 eslint.config.mjs                                               | 1 -
 package.json                                                    | 2 +-
 packages/react/src/ActionBar/ActionBar.tsx                      | 1 -
 packages/react/src/ActionList/ActionList.dev.stories.tsx        | 1 -
 packages/react/src/ActionList/ActionList.features.stories.tsx   | 1 -
 packages/react/src/ActionList/Group.tsx                         | 1 -
 packages/react/src/ActionList/Heading.tsx                       | 1 -
 packages/react/src/ActionList/Item.tsx                          | 1 -
 packages/react/src/ActionList/LinkItem.tsx                      | 1 -
 packages/react/src/ActionList/List.tsx                          | 1 -
 packages/react/src/ActionList/TrailingAction.tsx                | 1 -
 packages/react/src/ActionList/Visuals.tsx                       | 1 -
 packages/react/src/ActionMenu/ActionMenu.tsx                    | 1 -
 packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx          | 1 -
 .../react/src/Autocomplete/Autocomplete.features.stories.tsx    | 1 -
 packages/react/src/Autocomplete/Autocomplete.stories.tsx        | 1 -
 packages/react/src/Autocomplete/Autocomplete.test.tsx           | 1 -
 packages/react/src/Autocomplete/AutocompleteInput.tsx           | 1 -
 packages/react/src/Autocomplete/AutocompleteMenu.tsx            | 1 -
 packages/react/src/Autocomplete/AutocompleteOverlay.tsx         | 1 -
 packages/react/src/Avatar/Avatar.tsx                            | 1 -
 packages/react/src/Banner/Banner.stories.tsx                    | 1 -
 packages/react/src/Banner/Banner.tsx                            | 1 -
 packages/react/src/BaseStyles.tsx                               | 1 -
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx                  | 1 -
 packages/react/src/Button/Button.tsx                            | 1 -
 packages/react/src/Button/ButtonBase.tsx                        | 1 -
 packages/react/src/Button/IconButton.tsx                        | 1 -
 packages/react/src/Button/LinkButton.tsx                        | 1 -
 packages/react/src/Button/__tests__/Button.test.tsx             | 1 -
 packages/react/src/ButtonGroup/ButtonGroup.stories.tsx          | 1 -
 packages/react/src/ButtonGroup/ButtonGroup.tsx                  | 1 -
 packages/react/src/Checkbox/Checkbox.stories.tsx                | 1 -
 packages/react/src/CheckboxGroup/CheckboxGroup.tsx              | 1 -
 packages/react/src/CircleBadge/CircleBadge.tsx                  | 1 -
 .../react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx | 1 -
 packages/react/src/Details/Details.tsx                          | 1 -
 packages/react/src/Details/__tests__/Details.test.tsx           | 1 -
 packages/react/src/Dialog/Dialog.tsx                            | 1 -
 packages/react/src/FilteredActionList/FilteredActionList.tsx    | 1 -
 .../react/src/FilteredActionList/FilteredActionListLoaders.tsx  | 1 -
 packages/react/src/FormControl/FormControl.features.stories.tsx | 1 -
 packages/react/src/Header/Header.tsx                            | 1 -
 packages/react/src/Heading/Heading.tsx                          | 1 -
 packages/react/src/KeybindingHint/components/Sequence.tsx       | 1 -
 packages/react/src/Label/Label.tsx                              | 1 -
 packages/react/src/LabelGroup/LabelGroup.features.stories.tsx   | 1 -
 packages/react/src/LabelGroup/LabelGroup.stories.tsx            | 1 -
 packages/react/src/LabelGroup/LabelGroup.tsx                    | 1 -
 packages/react/src/Link/Link.tsx                                | 1 -
 packages/react/src/NavList/NavList.features.stories.tsx         | 1 -
 packages/react/src/NavList/NavList.tsx                          | 1 -
 packages/react/src/Octicon/Octicon.stories.tsx                  | 1 -
 packages/react/src/Overlay/Overlay.dev.stories.tsx              | 1 -
 packages/react/src/Overlay/Overlay.stories.tsx                  | 1 -
 packages/react/src/Overlay/Overlay.tsx                          | 1 -
 packages/react/src/PageHeader/PageHeader.tsx                    | 1 -
 packages/react/src/PageLayout/PageLayout.tsx                    | 1 -
 packages/react/src/Pagehead/Pagehead.tsx                        | 1 -
 packages/react/src/Pagination/Pagination.features.stories.tsx   | 1 -
 packages/react/src/Pagination/Pagination.stories.tsx            | 1 -
 packages/react/src/Pagination/Pagination.test.tsx               | 1 -
 packages/react/src/Pagination/Pagination.tsx                    | 1 -
 packages/react/src/Pagination/mocks/ReactRouterLink.tsx         | 1 -
 packages/react/src/Popover/Popover.tsx                          | 1 -
 packages/react/src/ProgressBar/ProgressBar.tsx                  | 1 -
 packages/react/src/Radio/Radio.stories.tsx                      | 1 -
 packages/react/src/Radio/Radio.tsx                              | 1 -
 packages/react/src/RadioGroup/RadioGroup.tsx                    | 1 -
 .../react/src/RelativeTime/RelativeTime.features.stories.tsx    | 1 -
 packages/react/src/RelativeTime/RelativeTime.stories.tsx        | 1 -
 packages/react/src/SegmentedControl/SegmentedControl.tsx        | 1 -
 packages/react/src/SegmentedControl/SegmentedControlButton.tsx  | 1 -
 .../react/src/SegmentedControl/SegmentedControlIconButton.tsx   | 1 -
 packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx      | 1 -
 packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx | 1 -
 packages/react/src/SelectPanel/SelectPanel.features.stories.tsx | 1 -
 packages/react/src/SelectPanel/SelectPanel.stories.tsx          | 1 -
 packages/react/src/SelectPanel/SelectPanel.test.tsx             | 1 -
 packages/react/src/SelectPanel/SelectPanel.tsx                  | 1 -
 packages/react/src/SideNav.tsx                                  | 1 -
 packages/react/src/Skeleton/SkeletonBox.tsx                     | 1 -
 packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx            | 1 -
 packages/react/src/SkeletonText/SkeletonText.tsx                | 1 -
 packages/react/src/Spinner/Spinner.tsx                          | 1 -
 packages/react/src/SplitPageLayout/SplitPageLayout.tsx          | 1 -
 packages/react/src/Stack/Stack.tsx                              | 1 -
 packages/react/src/SubNav/SubNav.tsx                            | 1 -
 packages/react/src/TabNav/TabNav.tsx                            | 1 -
 packages/react/src/Text/Text.tsx                                | 1 -
 packages/react/src/TextInput/TextInput.features.stories.tsx     | 1 -
 packages/react/src/TextInput/TextInput.stories.tsx              | 1 -
 packages/react/src/TextInput/TextInput.tsx                      | 1 -
 .../react/src/TextInputWithTokens/TextInputWithTokens.test.tsx  | 1 -
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx  | 1 -
 packages/react/src/Textarea/Textarea.tsx                        | 1 -
 packages/react/src/ToggleSwitch/ToggleSwitch.tsx                | 1 -
 packages/react/src/Token/IssueLabelToken.tsx                    | 1 -
 packages/react/src/Token/Token.features.stories.tsx             | 1 -
 packages/react/src/Token/Token.tsx                              | 1 -
 packages/react/src/Token/TokenBase.tsx                          | 1 -
 packages/react/src/Token/_TokenTextContainer.tsx                | 1 -
 packages/react/src/Tooltip/Tooltip.tsx                          | 1 -
 packages/react/src/TooltipV2/Tooltip.playground.stories.tsx     | 1 -
 packages/react/src/TooltipV2/Tooltip.tsx                        | 1 -
 packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx         | 1 -
 packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx   | 1 -
 packages/react/src/UnderlineNav/UnderlineNav.tsx                | 1 -
 packages/react/src/UnderlineNav/UnderlineNavItem.tsx            | 1 -
 packages/react/src/VisuallyHidden/VisuallyHidden.tsx            | 1 -
 packages/react/src/_VisuallyHidden.tsx                          | 1 -
 packages/react/src/deprecated/ActionList/Header.tsx             | 1 -
 packages/react/src/deprecated/ActionList/Item.tsx               | 1 -
 packages/react/src/deprecated/ActionList/List.tsx               | 1 -
 packages/react/src/deprecated/ActionMenu.tsx                    | 1 -
 packages/react/src/deprecated/DialogV1/Dialog.tsx               | 1 -
 packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx     | 1 -
 packages/react/src/experimental/CSSComponent/index.tsx          | 1 -
 packages/react/src/experimental/IssueLabel/IssueLabel.tsx       | 1 -
 packages/react/src/experimental/SelectPanel2/SelectPanel.tsx    | 1 -
 .../react/src/experimental/UnderlinePanels/UnderlinePanels.tsx  | 1 -
 packages/react/src/internal/components/ButtonReset.tsx          | 1 -
 .../components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx    | 1 -
 packages/react/src/internal/components/InputLabel.tsx           | 1 -
 packages/react/src/internal/components/TextInputInnerAction.tsx | 1 -
 packages/react/src/internal/components/TextInputWrapper.tsx     | 1 -
 .../react/src/internal/components/UnderlineTabbedInterface.tsx  | 1 -
 packages/react/src/internal/components/UnstyledTextInput.tsx    | 1 -
 packages/react/src/stories/deprecated/ActionList.stories.tsx    | 1 -
 packages/react/src/stories/deprecated/ActionMenu.stories.tsx    | 1 -
 packages/react/src/stories/useAnchoredPosition.stories.tsx      | 1 -
 packages/react/src/stories/useFocusTrap.stories.tsx             | 1 -
 packages/react/src/stories/useFocusZone.stories.tsx             | 1 -
 packages/styled-react/src/components/ActionList.tsx             | 1 -
 packages/styled-react/src/components/Avatar.tsx                 | 1 -
 packages/styled-react/src/components/BaseStyles.tsx             | 1 -
 packages/styled-react/src/components/Button.tsx                 | 1 -
 packages/styled-react/src/components/Checkbox.tsx               | 1 -
 packages/styled-react/src/components/CheckboxGroup.tsx          | 1 -
 packages/styled-react/src/components/CounterLabel.tsx           | 1 -
 packages/styled-react/src/components/Dialog.tsx                 | 1 -
 packages/styled-react/src/components/Header.tsx                 | 1 -
 packages/styled-react/src/components/IconButton.tsx             | 1 -
 packages/styled-react/src/components/NavList.tsx                | 1 -
 packages/styled-react/src/components/PageLayout.tsx             | 1 -
 packages/styled-react/src/components/RadioGroup.tsx             | 1 -
 packages/styled-react/src/components/RelativeTime.tsx           | 1 -
 packages/styled-react/src/components/SegmentedControl.tsx       | 1 -
 packages/styled-react/src/components/StateLabel.tsx             | 1 -
 packages/styled-react/src/components/SubNav.tsx                 | 1 -
 packages/styled-react/src/components/TextInput.tsx              | 1 -
 packages/styled-react/src/components/Timeline.tsx               | 1 -
 packages/styled-react/src/components/ToggleSwitch.tsx           | 1 -
 packages/styled-react/src/components/Tooltip.tsx                | 1 -
 packages/styled-react/src/components/UnderlineNav.tsx           | 1 -
 packages/styled-react/src/components/UnderlinePanels.tsx        | 1 -
 packages/styled-react/src/components/deprecated/ActionList.tsx  | 1 -
 packages/styled-react/src/components/deprecated/DialogV1.tsx    | 1 -
 158 files changed, 1 insertion(+), 158 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index c8459d8786a..fa12cbcf83c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -149,7 +149,6 @@ const config = defineConfig([
       'react/display-name': 'off',
       'react/jsx-uses-react': 'error',
       'react-hooks/exhaustive-deps': 'error',
-      'eslint-comments/no-use': 'off',
       camelcase: [
         'error',
         {
diff --git a/package.json b/package.json
index 244da076231..38a2a067de7 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
     "build:hooks.json": "npm run build:hooks.json -w @primer/react",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --cache",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --cache",
     "lint:css": "stylelint --rd -q --cache '**/*.css'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:fix": "npm run lint -- --fix",
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 6ba6e505328..7046dc44984 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {RefObject, MouseEventHandler} from 'react'
 import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index ee933cb9fe9..ec560222be0 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 9dd98ecf8b7..e7ff8b11f50 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 759cd2d5922..441e79302c9 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {useId} from '../hooks/useId'
 import {ListContext, type ActionListProps} from './shared'
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index fd88b9d6265..510c94231d8 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index df7e0350547..b25a169bd50 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index 2263247bc72..8939b450284 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Link from '../Link'
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index bde4a1bfbda..c5c3860f6fb 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 535a8b8d7e6..933c3a6f584 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index f002bcf7230..c091391e465 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {AlertIcon} from '@primer/octicons-react'
 import Spinner from '../Spinner'
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 5e117b16095..c2c722cb895 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useContext, useMemo, useEffect, useState} from 'react'
 import {TriangleDownIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index d51d9ba791a..0ba6cf0b174 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useEffect} from 'react'
 import type {OverlayProps} from '../Overlay'
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index f7241ef966e..bf0577cee9b 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 8af392d23d6..4c8bda2827c 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index d66baec0913..5b97da8cdc9 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {render, fireEvent, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index 7099ab0c94d..f95c4e7f7c2 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, FocusEventHandler, KeyboardEventHandler} from 'react'
 import React, {useCallback, useContext, useEffect, useState} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index d5466f63258..69918c48e99 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'
 import {debounce} from '@github/mini-throttle'
 import {announce} from '@primer/live-region-element'
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index 16622939ae7..d72494a7545 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useContext} from 'react'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index 3a0b16acb0d..b9e501a8412 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
index b6fe19fcb80..4a52e80cf63 100644
--- a/packages/react/src/Banner/Banner.stories.tsx
+++ b/packages/react/src/Banner/Banner.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import Link from '../Link'
 import {Banner} from '../Banner'
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index ec8ca2a45b1..81d04875cf6 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 96b27432182..9077d733daf 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 7e95402b978..b773b1f9596 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useState, useRef, useCallback, useEffect, useMemo, type ForwardedRef} from 'react'
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 1f5f1fa6a20..ad4c4968a61 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 376145c6bdb..97f3564e35c 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import type {ButtonProps} from './types'
diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx
index 74280d288a9..7c439047429 100644
--- a/packages/react/src/Button/IconButton.tsx
+++ b/packages/react/src/Button/IconButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {IconButtonProps} from './types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index f64600e5db3..bac52d497b3 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 35b8d5e19a6..4250ff75396 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, HeartIcon} from '@primer/octicons-react'
 import {render, screen, fireEvent} from '@testing-library/react'
 import {describe, it, expect, vi} from 'vitest'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 97a29536d6b..095ac33d9cc 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {StoryFn, Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import type {ButtonProps} from '../Button'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index bbab84968dc..cd07d132175 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import classes from './ButtonGroup.module.css'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index a1857be92d6..1ffafd73c8e 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {CheckboxProps} from '..'
 import {Checkbox} from '..'
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index 19a9434371d..fd064c7973c 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler} from 'react'
 import React from 'react'
 import type {CheckboxOrRadioGroupProps} from '../internal/components/CheckboxOrRadioGroup'
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index f95d0b63ddd..0d106c78d50 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import Octicon from '../Octicon'
 import isNumeric from '../utils/isNumeric'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 813a00cc93d..1c6be800b36 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '..'
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index 50ea2814614..f493bf495e1 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, type ComponentPropsWithoutRef, type ReactElement} from 'react'
 import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index e235fee58c3..ead5d97a041 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {describe, expect, it} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index fefc9c31a18..9bfacac1238 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import type {ButtonProps} from '../Button'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index e02e5a7c669..61ccb33538e 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler} from 'react'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
index 5b507c2197c..bbd4d134a59 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import Spinner from '../Spinner'
 import {Stack} from '../Stack/Stack'
 import {SkeletonBox} from '../Skeleton/SkeletonBox'
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 9c759b14677..5a645dff7f1 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 639c1ae84d3..531938db66d 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Location, Pathname} from 'history'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 26303dddacb..56c7c7ed149 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx
index ca86f87cf42..ff16fb8675d 100644
--- a/packages/react/src/KeybindingHint/components/Sequence.tsx
+++ b/packages/react/src/KeybindingHint/components/Sequence.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Fragment} from 'react'
 import type {KeybindingHintProps} from '../props'
 import VisuallyHidden from '../../_VisuallyHidden'
diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index cbf4123a792..640d16e2de0 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -1,6 +1,5 @@
 // TODO: merge https://github.com/primer/react/pull/6631 which removes `Box` usage
 
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Label.module.css'
 import React from 'react'
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index 3db334af474..2b9c6ba4e73 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index de4b583b6c6..fc13d4b834a 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {LabelGroupProps} from './LabelGroup'
 import LabelGroup from './LabelGroup'
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 3d58cd7c513..7c0175b8fc1 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import {getFocusableChild} from '@primer/behaviors/utils'
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 41f494bae4e..59d218173c1 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useEffect, type ForwardedRef, type ElementRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 4d807d7fa5c..218d1135b1e 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import React from 'react'
 import {PageLayout} from '../PageLayout'
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 9df411e09cd..8648957d4aa 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {ChevronDownIcon, PlusIcon, type Icon} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React, {isValidElement} from 'react'
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index 91cbdd7c66e..ea024064a9d 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
index dfa0f47e366..55736b4e2b5 100644
--- a/packages/react/src/Overlay/Overlay.dev.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import Text from '../Text'
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index 66bd0bed9bc..8f31d3d8879 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useState, useRef, type ComponentProps} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import {XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 9cd249a7472..89557b79c29 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ComponentPropsWithRef, ReactElement} from 'react'
 import React, {useEffect, useRef} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index c16cefb497d..2289585a79d 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index d548a335cea..8d8ae16fbfd 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useRef} from 'react'
 import {clsx} from 'clsx'
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index 3228c652c1b..c0bead6c382 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
diff --git a/packages/react/src/Pagination/Pagination.features.stories.tsx b/packages/react/src/Pagination/Pagination.features.stories.tsx
index 2f6acc72a55..0aeaac725ca 100644
--- a/packages/react/src/Pagination/Pagination.features.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
index 250c4c80262..64a2047e6d4 100644
--- a/packages/react/src/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index 446c4772e99..f2b1c62ad77 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {render as HTMLRender} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 import Pagination from '../Pagination'
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 9ea9b5b5b9f..1d362001705 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
 import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index e0d60e5d691..9f6b8b3e65a 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; className?: string}
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index b950505bcbf..80e877afba4 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Popover.module.css'
 import type {HTMLProps} from 'react'
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 1746a73c667..4f6f9a117ee 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {clsx} from 'clsx'
 import classes from './ProgressBar.module.css'
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index b811d7cf9ea..c7be73a83f4 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {RadioProps} from '..'
 import {FormControl, Radio} from '..'
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 6e6c6421f94..16a98b94a53 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
 import React, {useContext} from 'react'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index 50c2de4eb34..ff589e0a3c8 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler, FC} from 'react'
 import type React from 'react'
 import {createContext} from 'react'
diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
index 0a0726d5f7a..c9ecb5a24e4 100644
--- a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
index 2a45c7c4679..b5241465cd2 100644
--- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index feb1b5ad6cc..76d25fbb64c 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useRef, useState} from 'react'
 import type {SegmentedControlButtonProps} from './SegmentedControlButton'
 import Button from './SegmentedControlButton'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index ace0b72dee4..94803bb2152 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index 2a46b4e7929..ee70b240efd 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index f9ec5f8b7a2..5db418a413a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import type React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 026b67878f3..00b57ebcba3 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useMemo, useRef, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index 82b7a1a6478..dd1fa062d03 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useRef, useEffect} from 'react'
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 5a06209d936..9f2d4befe4a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import {useState} from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index d58c69b5504..ccffe06d79c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {render, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, beforeEach, vi} from 'vitest'
 import React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index d2869e7eb48..7aa5fef65ce 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, TriangleDownIcon, XIcon, type IconProps} from '@primer/octicons-react'
 import React, {useCallback, useEffect, useMemo, useRef, useState, type KeyboardEventHandler} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index df05f1279fd..0e80ceb2855 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {To} from 'history'
 import type {ComponentProps} from './utils/types'
 import Link, {type LinkProps} from './Link'
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index 05953966364..eb52dc7800b 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type CSSProperties, type HTMLProps} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
index 45677828445..e3724053d5f 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import type {AvatarProps} from '../Avatar'
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index afc95c769ab..37ebb21b013 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type HTMLProps} from 'react'
 import classes from './SkeletonText.module.css'
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index bd8e1a4676f..d87ff3e10b9 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 31a4021077f..1e902129248 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {
   PageLayoutContentProps,
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 476f1b775d6..75a4bbc383e 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef, type ElementType} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 8d4ee66b1fd..54b56942ad6 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 7bc136da3d6..876e130160f 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useRef, useState} from 'react'
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 711822717b9..6be84edb88d 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {type ForwardedRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index fffd2a30e74..7f68ff98f1c 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import {FormControl, Heading, Stack} from '..'
diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx
index 718ab99f913..74afc18adcc 100644
--- a/packages/react/src/TextInput/TextInput.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 28a918ee75c..5aa61e3040a 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useState, useId} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
index 933276df708..1b923e86094 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {render as HTMLRender, fireEvent, act, render} from '@testing-library/react'
 import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index d390b4474b4..6d72072fa04 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {FocusKeys} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
 import {omit} from '@styled-system/props'
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 241195f7bcb..39d86684372 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index a72305b2838..5d151a05f33 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useEffect} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
index b0a2c3dc92c..7959f79346f 100644
--- a/packages/react/src/Token/IssueLabelToken.tsx
+++ b/packages/react/src/Token/IssueLabelToken.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import {forwardRef, useMemo} from 'react'
 import type {TokenBaseProps} from './TokenBase'
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
index 450ecc3c159..25cd2278749 100644
--- a/packages/react/src/Token/Token.features.stories.tsx
+++ b/packages/react/src/Token/Token.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import {action} from 'storybook/actions'
 import Token from './Token'
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index f803dbd688d..b89f6b0d9c7 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import type React from 'react'
 import {forwardRef} from 'react'
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
index 88d97b381e3..6ea5de040e7 100644
--- a/packages/react/src/Token/TokenBase.tsx
+++ b/packages/react/src/Token/TokenBase.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ComponentProps, KeyboardEvent} from 'react'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index d33e7ec5a8f..232a9be1900 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {TokenBaseProps} from './TokenBase'
 import type React from 'react'
 import classes from './_TokenTextContainer.module.css'
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 3a8cdede7f8..8122db14ae5 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useMemo} from 'react'
 import {useId} from '../hooks'
diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
index 0ab25f3721a..a6a8e5eedd6 100644
--- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Button} from '..'
 import {Tooltip} from './Tooltip'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index 190d009b5c3..cd4411a0dd9 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {Children, useEffect, useRef, useState, useMemo, type ForwardRefExoticComponent} from 'react'
 import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks'
 import {invariant} from '../utils/invariant'
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index 7f357201efd..a548e0a519f 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import type {TooltipProps} from '../Tooltip'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
index 8c24ad79703..e888ea5d70d 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {UnderlineNav} from './index'
 import {UnderlineNavItem} from './UnderlineNavItem'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 44e359f8a2f..c72f9c57577 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {RefObject} from 'react'
 import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
 import {UnderlineNavContext} from './UnderlineNavContext'
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index e09a1dc4371..963f7c033f1 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MutableRefObject, RefObject} from 'react'
 import React, {forwardRef, useRef, useContext} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index b8c0f270076..84b23110742 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {type HTMLAttributes} from 'react'
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 31e52560a26..64b32f593e3 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
 import type {PolymorphicProps} from './utils/modern-polymorphic'
diff --git a/packages/react/src/deprecated/ActionList/Header.tsx b/packages/react/src/deprecated/ActionList/Header.tsx
index 2e41e488fea..dc820d4eee8 100644
--- a/packages/react/src/deprecated/ActionList/Header.tsx
+++ b/packages/react/src/deprecated/ActionList/Header.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 78f4d30fc9c..0b4a1ed7816 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {CheckIcon} from '@primer/octicons-react'
 import React, {useCallback} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index c8882192de3..a598e596745 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Key} from 'react'
 import React from 'react'
 import type {AriaRole} from '../../utils/types'
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index 6bf114951b7..c86c401ee9b 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {GroupedListProps, ListPropsBase} from './ActionList/List'
 import {List} from './ActionList/List'
 import type {ItemProps} from './ActionList/Item'
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index 1fc0fb36595..b39af5aa2da 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef, useRef, type HTMLAttributes} from 'react'
 import {IconButton} from '../../Button'
 import useDialog from '../../hooks/useDialog'
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index 4c26ec34ac4..96e11bf7a53 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/experimental/CSSComponent/index.tsx b/packages/react/src/experimental/CSSComponent/index.tsx
index d5ee8caf2fe..b20a6bef159 100644
--- a/packages/react/src/experimental/CSSComponent/index.tsx
+++ b/packages/react/src/experimental/CSSComponent/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classNames from './component.module.css'
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index 2626970a760..e6c7ca8ac0b 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {getColorsFromHex} from './getColorFromHex'
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 4441a75f10f..04667c2b5d2 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, useState, type MutableRefObject} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 2046cfba11a..7dd02c34482 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {
   Children,
   isValidElement,
diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx
index 6207e10e6a2..b68987bb9e8 100644
--- a/packages/react/src/internal/components/ButtonReset.tsx
+++ b/packages/react/src/internal/components/ButtonReset.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import classes from './ButtonReset.module.css'
 import {clsx} from 'clsx'
 
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 70884e00c20..744d71f2237 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import ValidationAnimationContainer from '../ValidationAnimationContainer'
 import {useId} from '../../../hooks/useId'
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 3147a1f9149..5f8924ce1a3 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import classes from './InputLabel.module.css'
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 35b4b46f8e4..22d45d0b6d0 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 4c4bc8382ee..a88bb698e3d 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {type ComponentProps} from 'react'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 85fa5e9a2f7..6bb6a388cae 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -1,6 +1,5 @@
 // Used for UnderlineNav and UnderlinePanels components
 
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react'
 import {isElement} from 'react-is'
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index 432097ba672..bb419f84f71 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import styles from './UnstyledTextInput.module.css'
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index 68e43a74d37..8bca8a2c3db 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 57d2ee8a203..0ae257473fa 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index e14fcdfc9d4..b312d8a5348 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index aacb86e6c98..6df61bdf5e6 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 38fbcaf5cb8..8c679511cf2 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Flash} from '..'
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 0215d8330d3..44358b1c8e3 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import styled from 'styled-components'
 import {
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
index eaed694672f..bad340bf8bf 100644
--- a/packages/styled-react/src/components/Avatar.tsx
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {type AvatarProps as PrimerAvatarProps, Avatar as PrimerAvatar} from '@primer/react'
 import {forwardRef} from 'react'
 import type {StyledProps} from '../styled-props'
diff --git a/packages/styled-react/src/components/BaseStyles.tsx b/packages/styled-react/src/components/BaseStyles.tsx
index 59a10e794d8..e58f33100e8 100644
--- a/packages/styled-react/src/components/BaseStyles.tsx
+++ b/packages/styled-react/src/components/BaseStyles.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
index d3628117510..7d49c8ed618 100644
--- a/packages/styled-react/src/components/Button.tsx
+++ b/packages/styled-react/src/components/Button.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Button as PrimerButton, type ButtonProps as PrimerButtonProps, type SlotMarker} from '@primer/react'
 import type {SxProp, CSSCustomProperties, BetterSystemStyleObject} from '../sx'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Checkbox.tsx b/packages/styled-react/src/components/Checkbox.tsx
index 2264dbcacda..3cdd244603b 100644
--- a/packages/styled-react/src/components/Checkbox.tsx
+++ b/packages/styled-react/src/components/Checkbox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Checkbox as PrimerCheckbox, type CheckboxProps as PrimerCheckboxProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
index c40efaabb5c..b8f9eabdf86 100644
--- a/packages/styled-react/src/components/CheckboxGroup.tsx
+++ b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {CheckboxGroup as PrimerCheckboxGroup, type CheckboxGroupProps as PrimerCheckboxGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx
index 6a592f19544..ec07906fa56 100644
--- a/packages/styled-react/src/components/CounterLabel.tsx
+++ b/packages/styled-react/src/components/CounterLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {CounterLabel as PrimerCounterLabel, type CounterLabelProps as PrimerCounterLabelProps} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 2b1931323d8..827be448318 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react'
 import type {DialogProps as PrimerDialogProps} from '@primer/react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Header.tsx b/packages/styled-react/src/components/Header.tsx
index 5e9f171e55c..da906c45477 100644
--- a/packages/styled-react/src/components/Header.tsx
+++ b/packages/styled-react/src/components/Header.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   type HeaderProps as PrimerHeaderProps,
   type HeaderItemProps as PrimerHeaderItemProps,
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
index 35ce2b5b765..9c68b165c86 100644
--- a/packages/styled-react/src/components/IconButton.tsx
+++ b/packages/styled-react/src/components/IconButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   IconButton as PrimerIconButton,
   type IconButtonProps as PrimerIconButtonProps,
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index b005875ea67..d3b15272463 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {NavList as PrimerNavList} from '@primer/react'
 import type {
   NavListProps as PrimerNavListProps,
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 6139ca45b90..2d296ca8620 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import styled from 'styled-components'
 import type {
diff --git a/packages/styled-react/src/components/RadioGroup.tsx b/packages/styled-react/src/components/RadioGroup.tsx
index 53dba596030..84a6a8c29bc 100644
--- a/packages/styled-react/src/components/RadioGroup.tsx
+++ b/packages/styled-react/src/components/RadioGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/RelativeTime.tsx b/packages/styled-react/src/components/RelativeTime.tsx
index 7af7ec4df69..3d8c0a0d625 100644
--- a/packages/styled-react/src/components/RelativeTime.tsx
+++ b/packages/styled-react/src/components/RelativeTime.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
 import React from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/SegmentedControl.tsx b/packages/styled-react/src/components/SegmentedControl.tsx
index 8b29a4ad1a1..cc6a50efe52 100644
--- a/packages/styled-react/src/components/SegmentedControl.tsx
+++ b/packages/styled-react/src/components/SegmentedControl.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   type SegmentedControlProps as PrimerSegmentedControlProps,
   SegmentedControl as PrimerSegmentedControl,
diff --git a/packages/styled-react/src/components/StateLabel.tsx b/packages/styled-react/src/components/StateLabel.tsx
index 56c25286613..75e28432400 100644
--- a/packages/styled-react/src/components/StateLabel.tsx
+++ b/packages/styled-react/src/components/StateLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/SubNav.tsx b/packages/styled-react/src/components/SubNav.tsx
index bb373f7a493..b5d07b599e8 100644
--- a/packages/styled-react/src/components/SubNav.tsx
+++ b/packages/styled-react/src/components/SubNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index bca29df195b..1777d704137 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   TextInput as PrimerTextInput,
   type TextInputProps as PrimerTextInputProps,
diff --git a/packages/styled-react/src/components/Timeline.tsx b/packages/styled-react/src/components/Timeline.tsx
index 62c02311d37..cdd42e60662 100644
--- a/packages/styled-react/src/components/Timeline.tsx
+++ b/packages/styled-react/src/components/Timeline.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   Timeline as PrimerTimeline,
   type TimelineProps as PrimerTimelineProps,
diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx
index 7cf527ffe1e..53974f63d85 100644
--- a/packages/styled-react/src/components/ToggleSwitch.tsx
+++ b/packages/styled-react/src/components/ToggleSwitch.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {ToggleSwitch as PrimerToggleSwitch, type ToggleSwitchProps as PrimerToggleSwitchProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
index 7e877d576b1..466e9299e08 100644
--- a/packages/styled-react/src/components/Tooltip.tsx
+++ b/packages/styled-react/src/components/Tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx
index 33c2c3dfb95..8ccbb31a960 100644
--- a/packages/styled-react/src/components/UnderlineNav.tsx
+++ b/packages/styled-react/src/components/UnderlineNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlineNav as PrimerUnderlineNav,
   type UnderlineNavProps as PrimerUnderlineNavProps,
diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx
index 1c4db18bb4a..18ae4676051 100644
--- a/packages/styled-react/src/components/UnderlinePanels.tsx
+++ b/packages/styled-react/src/components/UnderlinePanels.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlinePanels as PrimerUnderlinePanels,
   type UnderlinePanelsProps as PrimerUnderlinePanelsProps,
diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx
index 7d473c01e36..88908a51ac0 100644
--- a/packages/styled-react/src/components/deprecated/ActionList.tsx
+++ b/packages/styled-react/src/components/deprecated/ActionList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {type PropsWithChildren, forwardRef} from 'react'
 import {
   ActionList as PrimerActionList,
diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx
index e82db00c03b..98eba8edcb1 100644
--- a/packages/styled-react/src/components/deprecated/DialogV1.tsx
+++ b/packages/styled-react/src/components/deprecated/DialogV1.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react/deprecated'
 import type {
   DialogProps as PrimerDialogProps,

From 78870c825f83c86443101bbd2dcb7293177715ea Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 27 Oct 2025 11:36:39 +0100
Subject: [PATCH 07/12] trying out conditional rule

---
 eslint.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index fa12cbcf83c..8a562d44221 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -117,7 +117,7 @@ const config = defineConfig([
       'primer-react/a11y-use-next-tooltip': 'error',
       'primer-react/no-unnecessary-components': 'error',
       'primer-react/prefer-action-list-item-onselect': 'error',
-      'primer-react/spread-props-first': 'warn',
+      'primer-react/spread-props-first':  process.env.CI ? 'off': 'warn'
     },
   },
 

From 9761da892852ac21a2afca575a7bd1a24e743b5a Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 27 Oct 2025 11:36:59 +0100
Subject: [PATCH 08/12] bring back --max-warnings=0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 38a2a067de7..244da076231 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
     "build:hooks.json": "npm run build:hooks.json -w @primer/react",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --cache",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --cache",
     "lint:css": "stylelint --rd -q --cache '**/*.css'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:fix": "npm run lint -- --fix",

From 5dfd83218b6fee0d06cdac47498aba6f560aa536 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 27 Oct 2025 12:10:02 +0100
Subject: [PATCH 09/12] Revert "trying out conditional rule"

This reverts commit 78870c825f83c86443101bbd2dcb7293177715ea.
---
 eslint.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 8a562d44221..fa12cbcf83c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -117,7 +117,7 @@ const config = defineConfig([
       'primer-react/a11y-use-next-tooltip': 'error',
       'primer-react/no-unnecessary-components': 'error',
       'primer-react/prefer-action-list-item-onselect': 'error',
-      'primer-react/spread-props-first':  process.env.CI ? 'off': 'warn'
+      'primer-react/spread-props-first': 'warn',
     },
   },
 

From d754263f0aa1e6524bdbe5a238e663d23dccd365 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 27 Oct 2025 12:10:04 +0100
Subject: [PATCH 10/12] Revert "Remove eslint-disable comments and remove
 --max-warnings from lint command"

This reverts commit c9bbf7f12b72a5152aa1183912e9ca468f0a3a8f.
---
 eslint.config.mjs                                                | 1 +
 packages/react/src/ActionBar/ActionBar.tsx                       | 1 +
 packages/react/src/ActionList/ActionList.dev.stories.tsx         | 1 +
 packages/react/src/ActionList/ActionList.features.stories.tsx    | 1 +
 packages/react/src/ActionList/Group.tsx                          | 1 +
 packages/react/src/ActionList/Heading.tsx                        | 1 +
 packages/react/src/ActionList/Item.tsx                           | 1 +
 packages/react/src/ActionList/LinkItem.tsx                       | 1 +
 packages/react/src/ActionList/List.tsx                           | 1 +
 packages/react/src/ActionList/TrailingAction.tsx                 | 1 +
 packages/react/src/ActionList/Visuals.tsx                        | 1 +
 packages/react/src/ActionMenu/ActionMenu.tsx                     | 1 +
 packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx           | 1 +
 .../react/src/Autocomplete/Autocomplete.features.stories.tsx     | 1 +
 packages/react/src/Autocomplete/Autocomplete.stories.tsx         | 1 +
 packages/react/src/Autocomplete/Autocomplete.test.tsx            | 1 +
 packages/react/src/Autocomplete/AutocompleteInput.tsx            | 1 +
 packages/react/src/Autocomplete/AutocompleteMenu.tsx             | 1 +
 packages/react/src/Autocomplete/AutocompleteOverlay.tsx          | 1 +
 packages/react/src/Avatar/Avatar.tsx                             | 1 +
 packages/react/src/Banner/Banner.stories.tsx                     | 1 +
 packages/react/src/Banner/Banner.tsx                             | 1 +
 packages/react/src/BaseStyles.tsx                                | 1 +
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx                   | 1 +
 packages/react/src/Button/Button.tsx                             | 1 +
 packages/react/src/Button/ButtonBase.tsx                         | 1 +
 packages/react/src/Button/IconButton.tsx                         | 1 +
 packages/react/src/Button/LinkButton.tsx                         | 1 +
 packages/react/src/Button/__tests__/Button.test.tsx              | 1 +
 packages/react/src/ButtonGroup/ButtonGroup.stories.tsx           | 1 +
 packages/react/src/ButtonGroup/ButtonGroup.tsx                   | 1 +
 packages/react/src/Checkbox/Checkbox.stories.tsx                 | 1 +
 packages/react/src/CheckboxGroup/CheckboxGroup.tsx               | 1 +
 packages/react/src/CircleBadge/CircleBadge.tsx                   | 1 +
 .../react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx  | 1 +
 packages/react/src/Details/Details.tsx                           | 1 +
 packages/react/src/Details/__tests__/Details.test.tsx            | 1 +
 packages/react/src/Dialog/Dialog.tsx                             | 1 +
 packages/react/src/FilteredActionList/FilteredActionList.tsx     | 1 +
 .../react/src/FilteredActionList/FilteredActionListLoaders.tsx   | 1 +
 packages/react/src/FormControl/FormControl.features.stories.tsx  | 1 +
 packages/react/src/Header/Header.tsx                             | 1 +
 packages/react/src/Heading/Heading.tsx                           | 1 +
 packages/react/src/KeybindingHint/components/Sequence.tsx        | 1 +
 packages/react/src/Label/Label.tsx                               | 1 +
 packages/react/src/LabelGroup/LabelGroup.features.stories.tsx    | 1 +
 packages/react/src/LabelGroup/LabelGroup.stories.tsx             | 1 +
 packages/react/src/LabelGroup/LabelGroup.tsx                     | 1 +
 packages/react/src/Link/Link.tsx                                 | 1 +
 packages/react/src/NavList/NavList.features.stories.tsx          | 1 +
 packages/react/src/NavList/NavList.tsx                           | 1 +
 packages/react/src/Octicon/Octicon.stories.tsx                   | 1 +
 packages/react/src/Overlay/Overlay.dev.stories.tsx               | 1 +
 packages/react/src/Overlay/Overlay.stories.tsx                   | 1 +
 packages/react/src/Overlay/Overlay.tsx                           | 1 +
 packages/react/src/PageHeader/PageHeader.tsx                     | 1 +
 packages/react/src/PageLayout/PageLayout.tsx                     | 1 +
 packages/react/src/Pagehead/Pagehead.tsx                         | 1 +
 packages/react/src/Pagination/Pagination.features.stories.tsx    | 1 +
 packages/react/src/Pagination/Pagination.stories.tsx             | 1 +
 packages/react/src/Pagination/Pagination.test.tsx                | 1 +
 packages/react/src/Pagination/Pagination.tsx                     | 1 +
 packages/react/src/Pagination/mocks/ReactRouterLink.tsx          | 1 +
 packages/react/src/Popover/Popover.tsx                           | 1 +
 packages/react/src/ProgressBar/ProgressBar.tsx                   | 1 +
 packages/react/src/Radio/Radio.stories.tsx                       | 1 +
 packages/react/src/Radio/Radio.tsx                               | 1 +
 packages/react/src/RadioGroup/RadioGroup.tsx                     | 1 +
 .../react/src/RelativeTime/RelativeTime.features.stories.tsx     | 1 +
 packages/react/src/RelativeTime/RelativeTime.stories.tsx         | 1 +
 packages/react/src/SegmentedControl/SegmentedControl.tsx         | 1 +
 packages/react/src/SegmentedControl/SegmentedControlButton.tsx   | 1 +
 .../react/src/SegmentedControl/SegmentedControlIconButton.tsx    | 1 +
 packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx       | 1 +
 packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx  | 1 +
 packages/react/src/SelectPanel/SelectPanel.features.stories.tsx  | 1 +
 packages/react/src/SelectPanel/SelectPanel.stories.tsx           | 1 +
 packages/react/src/SelectPanel/SelectPanel.test.tsx              | 1 +
 packages/react/src/SelectPanel/SelectPanel.tsx                   | 1 +
 packages/react/src/SideNav.tsx                                   | 1 +
 packages/react/src/Skeleton/SkeletonBox.tsx                      | 1 +
 packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx             | 1 +
 packages/react/src/SkeletonText/SkeletonText.tsx                 | 1 +
 packages/react/src/Spinner/Spinner.tsx                           | 1 +
 packages/react/src/SplitPageLayout/SplitPageLayout.tsx           | 1 +
 packages/react/src/Stack/Stack.tsx                               | 1 +
 packages/react/src/SubNav/SubNav.tsx                             | 1 +
 packages/react/src/TabNav/TabNav.tsx                             | 1 +
 packages/react/src/Text/Text.tsx                                 | 1 +
 packages/react/src/TextInput/TextInput.features.stories.tsx      | 1 +
 packages/react/src/TextInput/TextInput.stories.tsx               | 1 +
 packages/react/src/TextInput/TextInput.tsx                       | 1 +
 .../react/src/TextInputWithTokens/TextInputWithTokens.test.tsx   | 1 +
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx   | 1 +
 packages/react/src/Textarea/Textarea.tsx                         | 1 +
 packages/react/src/ToggleSwitch/ToggleSwitch.tsx                 | 1 +
 packages/react/src/Token/IssueLabelToken.tsx                     | 1 +
 packages/react/src/Token/Token.features.stories.tsx              | 1 +
 packages/react/src/Token/Token.tsx                               | 1 +
 packages/react/src/Token/TokenBase.tsx                           | 1 +
 packages/react/src/Token/_TokenTextContainer.tsx                 | 1 +
 packages/react/src/Tooltip/Tooltip.tsx                           | 1 +
 packages/react/src/TooltipV2/Tooltip.playground.stories.tsx      | 1 +
 packages/react/src/TooltipV2/Tooltip.tsx                         | 1 +
 packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx          | 1 +
 packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx    | 1 +
 packages/react/src/UnderlineNav/UnderlineNav.tsx                 | 1 +
 packages/react/src/UnderlineNav/UnderlineNavItem.tsx             | 1 +
 packages/react/src/VisuallyHidden/VisuallyHidden.tsx             | 1 +
 packages/react/src/_VisuallyHidden.tsx                           | 1 +
 packages/react/src/deprecated/ActionList/Header.tsx              | 1 +
 packages/react/src/deprecated/ActionList/Item.tsx                | 1 +
 packages/react/src/deprecated/ActionList/List.tsx                | 1 +
 packages/react/src/deprecated/ActionMenu.tsx                     | 1 +
 packages/react/src/deprecated/DialogV1/Dialog.tsx                | 1 +
 packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx      | 1 +
 packages/react/src/experimental/CSSComponent/index.tsx           | 1 +
 packages/react/src/experimental/IssueLabel/IssueLabel.tsx        | 1 +
 packages/react/src/experimental/SelectPanel2/SelectPanel.tsx     | 1 +
 .../react/src/experimental/UnderlinePanels/UnderlinePanels.tsx   | 1 +
 packages/react/src/internal/components/ButtonReset.tsx           | 1 +
 .../components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx     | 1 +
 packages/react/src/internal/components/InputLabel.tsx            | 1 +
 packages/react/src/internal/components/TextInputInnerAction.tsx  | 1 +
 packages/react/src/internal/components/TextInputWrapper.tsx      | 1 +
 .../react/src/internal/components/UnderlineTabbedInterface.tsx   | 1 +
 packages/react/src/internal/components/UnstyledTextInput.tsx     | 1 +
 packages/react/src/stories/deprecated/ActionList.stories.tsx     | 1 +
 packages/react/src/stories/deprecated/ActionMenu.stories.tsx     | 1 +
 packages/react/src/stories/useAnchoredPosition.stories.tsx       | 1 +
 packages/react/src/stories/useFocusTrap.stories.tsx              | 1 +
 packages/react/src/stories/useFocusZone.stories.tsx              | 1 +
 packages/styled-react/src/components/ActionList.tsx              | 1 +
 packages/styled-react/src/components/Avatar.tsx                  | 1 +
 packages/styled-react/src/components/BaseStyles.tsx              | 1 +
 packages/styled-react/src/components/Button.tsx                  | 1 +
 packages/styled-react/src/components/Checkbox.tsx                | 1 +
 packages/styled-react/src/components/CheckboxGroup.tsx           | 1 +
 packages/styled-react/src/components/CounterLabel.tsx            | 1 +
 packages/styled-react/src/components/Dialog.tsx                  | 1 +
 packages/styled-react/src/components/Header.tsx                  | 1 +
 packages/styled-react/src/components/IconButton.tsx              | 1 +
 packages/styled-react/src/components/NavList.tsx                 | 1 +
 packages/styled-react/src/components/PageLayout.tsx              | 1 +
 packages/styled-react/src/components/RadioGroup.tsx              | 1 +
 packages/styled-react/src/components/RelativeTime.tsx            | 1 +
 packages/styled-react/src/components/SegmentedControl.tsx        | 1 +
 packages/styled-react/src/components/StateLabel.tsx              | 1 +
 packages/styled-react/src/components/SubNav.tsx                  | 1 +
 packages/styled-react/src/components/TextInput.tsx               | 1 +
 packages/styled-react/src/components/Timeline.tsx                | 1 +
 packages/styled-react/src/components/ToggleSwitch.tsx            | 1 +
 packages/styled-react/src/components/Tooltip.tsx                 | 1 +
 packages/styled-react/src/components/UnderlineNav.tsx            | 1 +
 packages/styled-react/src/components/UnderlinePanels.tsx         | 1 +
 packages/styled-react/src/components/deprecated/ActionList.tsx   | 1 +
 packages/styled-react/src/components/deprecated/DialogV1.tsx     | 1 +
 157 files changed, 157 insertions(+)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index fa12cbcf83c..c8459d8786a 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -149,6 +149,7 @@ const config = defineConfig([
       'react/display-name': 'off',
       'react/jsx-uses-react': 'error',
       'react-hooks/exhaustive-deps': 'error',
+      'eslint-comments/no-use': 'off',
       camelcase: [
         'error',
         {
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 7046dc44984..6ba6e505328 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {RefObject, MouseEventHandler} from 'react'
 import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index ec560222be0..ee933cb9fe9 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index e7ff8b11f50..9dd98ecf8b7 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 441e79302c9..759cd2d5922 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {useId} from '../hooks/useId'
 import {ListContext, type ActionListProps} from './shared'
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index 510c94231d8..fd88b9d6265 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index b25a169bd50..df7e0350547 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index 8939b450284..2263247bc72 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Link from '../Link'
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index c5c3860f6fb..bde4a1bfbda 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 933c3a6f584..535a8b8d7e6 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index c091391e465..f002bcf7230 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {AlertIcon} from '@primer/octicons-react'
 import Spinner from '../Spinner'
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index c2c722cb895..5e117b16095 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useContext, useMemo, useEffect, useState} from 'react'
 import {TriangleDownIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index 0ba6cf0b174..d51d9ba791a 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useEffect} from 'react'
 import type {OverlayProps} from '../Overlay'
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index bf0577cee9b..f7241ef966e 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 4c8bda2827c..8af392d23d6 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index 5b97da8cdc9..d66baec0913 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {render, fireEvent, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index f95c4e7f7c2..7099ab0c94d 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, FocusEventHandler, KeyboardEventHandler} from 'react'
 import React, {useCallback, useContext, useEffect, useState} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index 69918c48e99..d5466f63258 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'
 import {debounce} from '@github/mini-throttle'
 import {announce} from '@primer/live-region-element'
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index d72494a7545..16622939ae7 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useContext} from 'react'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index b9e501a8412..3a0b16acb0d 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
index 4a52e80cf63..b6fe19fcb80 100644
--- a/packages/react/src/Banner/Banner.stories.tsx
+++ b/packages/react/src/Banner/Banner.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import Link from '../Link'
 import {Banner} from '../Banner'
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 81d04875cf6..ec8ca2a45b1 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 9077d733daf..96b27432182 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index b773b1f9596..7e95402b978 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useState, useRef, useCallback, useEffect, useMemo, type ForwardedRef} from 'react'
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index ad4c4968a61..1f5f1fa6a20 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 97f3564e35c..376145c6bdb 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import type {ButtonProps} from './types'
diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx
index 7c439047429..74280d288a9 100644
--- a/packages/react/src/Button/IconButton.tsx
+++ b/packages/react/src/Button/IconButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {IconButtonProps} from './types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index bac52d497b3..f64600e5db3 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 4250ff75396..35b8d5e19a6 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, HeartIcon} from '@primer/octicons-react'
 import {render, screen, fireEvent} from '@testing-library/react'
 import {describe, it, expect, vi} from 'vitest'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 095ac33d9cc..97a29536d6b 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {StoryFn, Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import type {ButtonProps} from '../Button'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index cd07d132175..bbab84968dc 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import classes from './ButtonGroup.module.css'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index 1ffafd73c8e..a1857be92d6 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {CheckboxProps} from '..'
 import {Checkbox} from '..'
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index fd064c7973c..19a9434371d 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler} from 'react'
 import React from 'react'
 import type {CheckboxOrRadioGroupProps} from '../internal/components/CheckboxOrRadioGroup'
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index 0d106c78d50..f95d0b63ddd 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import Octicon from '../Octicon'
 import isNumeric from '../utils/isNumeric'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 1c6be800b36..813a00cc93d 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '..'
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index f493bf495e1..50ea2814614 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, type ComponentPropsWithoutRef, type ReactElement} from 'react'
 import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index ead5d97a041..e235fee58c3 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {describe, expect, it} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 9bfacac1238..fefc9c31a18 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import type {ButtonProps} from '../Button'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index 61ccb33538e..e02e5a7c669 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler} from 'react'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
index bbd4d134a59..5b507c2197c 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import Spinner from '../Spinner'
 import {Stack} from '../Stack/Stack'
 import {SkeletonBox} from '../Skeleton/SkeletonBox'
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 5a645dff7f1..9c759b14677 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 531938db66d..639c1ae84d3 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Location, Pathname} from 'history'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 56c7c7ed149..26303dddacb 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx
index ff16fb8675d..ca86f87cf42 100644
--- a/packages/react/src/KeybindingHint/components/Sequence.tsx
+++ b/packages/react/src/KeybindingHint/components/Sequence.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Fragment} from 'react'
 import type {KeybindingHintProps} from '../props'
 import VisuallyHidden from '../../_VisuallyHidden'
diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index 640d16e2de0..cbf4123a792 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -1,5 +1,6 @@
 // TODO: merge https://github.com/primer/react/pull/6631 which removes `Box` usage
 
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Label.module.css'
 import React from 'react'
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index 2b9c6ba4e73..3db334af474 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index fc13d4b834a..de4b583b6c6 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {LabelGroupProps} from './LabelGroup'
 import LabelGroup from './LabelGroup'
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 7c0175b8fc1..3d58cd7c513 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import {getFocusableChild} from '@primer/behaviors/utils'
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 59d218173c1..41f494bae4e 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useEffect, type ForwardedRef, type ElementRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 218d1135b1e..4d807d7fa5c 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import React from 'react'
 import {PageLayout} from '../PageLayout'
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 8648957d4aa..9df411e09cd 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {ChevronDownIcon, PlusIcon, type Icon} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React, {isValidElement} from 'react'
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index ea024064a9d..91cbdd7c66e 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
index 55736b4e2b5..dfa0f47e366 100644
--- a/packages/react/src/Overlay/Overlay.dev.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import Text from '../Text'
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index 8f31d3d8879..66bd0bed9bc 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useState, useRef, type ComponentProps} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import {XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 89557b79c29..9cd249a7472 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ComponentPropsWithRef, ReactElement} from 'react'
 import React, {useEffect, useRef} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 2289585a79d..c16cefb497d 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 8d8ae16fbfd..d548a335cea 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useRef} from 'react'
 import {clsx} from 'clsx'
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index c0bead6c382..3228c652c1b 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
diff --git a/packages/react/src/Pagination/Pagination.features.stories.tsx b/packages/react/src/Pagination/Pagination.features.stories.tsx
index 0aeaac725ca..2f6acc72a55 100644
--- a/packages/react/src/Pagination/Pagination.features.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
index 64a2047e6d4..250c4c80262 100644
--- a/packages/react/src/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index f2b1c62ad77..446c4772e99 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {render as HTMLRender} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 import Pagination from '../Pagination'
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 1d362001705..9ea9b5b5b9f 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
 import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index 9f6b8b3e65a..e0d60e5d691 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; className?: string}
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 80e877afba4..b950505bcbf 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Popover.module.css'
 import type {HTMLProps} from 'react'
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 4f6f9a117ee..1746a73c667 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {clsx} from 'clsx'
 import classes from './ProgressBar.module.css'
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index c7be73a83f4..b811d7cf9ea 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {RadioProps} from '..'
 import {FormControl, Radio} from '..'
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 16a98b94a53..6e6c6421f94 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
 import React, {useContext} from 'react'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index ff589e0a3c8..50c2de4eb34 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler, FC} from 'react'
 import type React from 'react'
 import {createContext} from 'react'
diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
index c9ecb5a24e4..0a0726d5f7a 100644
--- a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
index b5241465cd2..2a45c7c4679 100644
--- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index 76d25fbb64c..feb1b5ad6cc 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useRef, useState} from 'react'
 import type {SegmentedControlButtonProps} from './SegmentedControlButton'
 import Button from './SegmentedControlButton'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 94803bb2152..ace0b72dee4 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index ee70b240efd..2a46b4e7929 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index 5db418a413a..f9ec5f8b7a2 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import type React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 00b57ebcba3..026b67878f3 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useMemo, useRef, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index dd1fa062d03..82b7a1a6478 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useRef, useEffect} from 'react'
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 9f2d4befe4a..5a06209d936 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import {useState} from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index ccffe06d79c..d58c69b5504 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {render, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, beforeEach, vi} from 'vitest'
 import React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 7aa5fef65ce..d2869e7eb48 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, TriangleDownIcon, XIcon, type IconProps} from '@primer/octicons-react'
 import React, {useCallback, useEffect, useMemo, useRef, useState, type KeyboardEventHandler} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 0e80ceb2855..df05f1279fd 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {To} from 'history'
 import type {ComponentProps} from './utils/types'
 import Link, {type LinkProps} from './Link'
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index eb52dc7800b..05953966364 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type CSSProperties, type HTMLProps} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
index e3724053d5f..45677828445 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import type {AvatarProps} from '../Avatar'
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index 37ebb21b013..afc95c769ab 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type HTMLProps} from 'react'
 import classes from './SkeletonText.module.css'
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index d87ff3e10b9..bd8e1a4676f 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 1e902129248..31a4021077f 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {
   PageLayoutContentProps,
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 75a4bbc383e..476f1b775d6 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef, type ElementType} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 54b56942ad6..8d4ee66b1fd 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 876e130160f..7bc136da3d6 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useRef, useState} from 'react'
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 6be84edb88d..711822717b9 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {type ForwardedRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index 7f68ff98f1c..fffd2a30e74 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import {FormControl, Heading, Stack} from '..'
diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx
index 74afc18adcc..718ab99f913 100644
--- a/packages/react/src/TextInput/TextInput.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 5aa61e3040a..28a918ee75c 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useState, useId} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
index 1b923e86094..933276df708 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {render as HTMLRender, fireEvent, act, render} from '@testing-library/react'
 import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 6d72072fa04..d390b4474b4 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {FocusKeys} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
 import {omit} from '@styled-system/props'
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 39d86684372..241195f7bcb 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index 5d151a05f33..a72305b2838 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useEffect} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
index 7959f79346f..b0a2c3dc92c 100644
--- a/packages/react/src/Token/IssueLabelToken.tsx
+++ b/packages/react/src/Token/IssueLabelToken.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import {forwardRef, useMemo} from 'react'
 import type {TokenBaseProps} from './TokenBase'
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
index 25cd2278749..450ecc3c159 100644
--- a/packages/react/src/Token/Token.features.stories.tsx
+++ b/packages/react/src/Token/Token.features.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import {action} from 'storybook/actions'
 import Token from './Token'
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index b89f6b0d9c7..f803dbd688d 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import type React from 'react'
 import {forwardRef} from 'react'
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
index 6ea5de040e7..88d97b381e3 100644
--- a/packages/react/src/Token/TokenBase.tsx
+++ b/packages/react/src/Token/TokenBase.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {ComponentProps, KeyboardEvent} from 'react'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index 232a9be1900..d33e7ec5a8f 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {TokenBaseProps} from './TokenBase'
 import type React from 'react'
 import classes from './_TokenTextContainer.module.css'
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 8122db14ae5..3a8cdede7f8 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useMemo} from 'react'
 import {useId} from '../hooks'
diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
index a6a8e5eedd6..0ab25f3721a 100644
--- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Button} from '..'
 import {Tooltip} from './Tooltip'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index cd4411a0dd9..190d009b5c3 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {Children, useEffect, useRef, useState, useMemo, type ForwardRefExoticComponent} from 'react'
 import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks'
 import {invariant} from '../utils/invariant'
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index a548e0a519f..7f357201efd 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import type {TooltipProps} from '../Tooltip'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
index e888ea5d70d..8c24ad79703 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {UnderlineNav} from './index'
 import {UnderlineNavItem} from './UnderlineNavItem'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index c72f9c57577..44e359f8a2f 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {RefObject} from 'react'
 import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
 import {UnderlineNavContext} from './UnderlineNavContext'
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index 963f7c033f1..e09a1dc4371 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {MutableRefObject, RefObject} from 'react'
 import React, {forwardRef, useRef, useContext} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 84b23110742..b8c0f270076 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {type HTMLAttributes} from 'react'
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 64b32f593e3..31e52560a26 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
 import type {PolymorphicProps} from './utils/modern-polymorphic'
diff --git a/packages/react/src/deprecated/ActionList/Header.tsx b/packages/react/src/deprecated/ActionList/Header.tsx
index dc820d4eee8..2e41e488fea 100644
--- a/packages/react/src/deprecated/ActionList/Header.tsx
+++ b/packages/react/src/deprecated/ActionList/Header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 0b4a1ed7816..78f4d30fc9c 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {CheckIcon} from '@primer/octicons-react'
 import React, {useCallback} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index a598e596745..c8882192de3 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {Key} from 'react'
 import React from 'react'
 import type {AriaRole} from '../../utils/types'
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index c86c401ee9b..6bf114951b7 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type {GroupedListProps, ListPropsBase} from './ActionList/List'
 import {List} from './ActionList/List'
 import type {ItemProps} from './ActionList/Item'
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index b39af5aa2da..1fc0fb36595 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef, useRef, type HTMLAttributes} from 'react'
 import {IconButton} from '../../Button'
 import useDialog from '../../hooks/useDialog'
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index 96e11bf7a53..4c26ec34ac4 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/experimental/CSSComponent/index.tsx b/packages/react/src/experimental/CSSComponent/index.tsx
index b20a6bef159..d5ee8caf2fe 100644
--- a/packages/react/src/experimental/CSSComponent/index.tsx
+++ b/packages/react/src/experimental/CSSComponent/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classNames from './component.module.css'
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index e6c7ca8ac0b..2626970a760 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {getColorsFromHex} from './getColorFromHex'
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 04667c2b5d2..4441a75f10f 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, useState, type MutableRefObject} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 7dd02c34482..2046cfba11a 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {
   Children,
   isValidElement,
diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx
index b68987bb9e8..6207e10e6a2 100644
--- a/packages/react/src/internal/components/ButtonReset.tsx
+++ b/packages/react/src/internal/components/ButtonReset.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import classes from './ButtonReset.module.css'
 import {clsx} from 'clsx'
 
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 744d71f2237..70884e00c20 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import ValidationAnimationContainer from '../ValidationAnimationContainer'
 import {useId} from '../../../hooks/useId'
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 5f8924ce1a3..3147a1f9149 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import classes from './InputLabel.module.css'
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 22d45d0b6d0..35b4b46f8e4 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index a88bb698e3d..4c4bc8382ee 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {type ComponentProps} from 'react'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 6bb6a388cae..85fa5e9a2f7 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -1,5 +1,6 @@
 // Used for UnderlineNav and UnderlinePanels components
 
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react'
 import {isElement} from 'react-is'
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index bb419f84f71..432097ba672 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import styles from './UnstyledTextInput.module.css'
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index 8bca8a2c3db..68e43a74d37 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 0ae257473fa..57d2ee8a203 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index b312d8a5348..e14fcdfc9d4 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index 6df61bdf5e6..aacb86e6c98 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 8c679511cf2..38fbcaf5cb8 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Flash} from '..'
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 44358b1c8e3..0215d8330d3 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import styled from 'styled-components'
 import {
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
index bad340bf8bf..eaed694672f 100644
--- a/packages/styled-react/src/components/Avatar.tsx
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {type AvatarProps as PrimerAvatarProps, Avatar as PrimerAvatar} from '@primer/react'
 import {forwardRef} from 'react'
 import type {StyledProps} from '../styled-props'
diff --git a/packages/styled-react/src/components/BaseStyles.tsx b/packages/styled-react/src/components/BaseStyles.tsx
index e58f33100e8..59a10e794d8 100644
--- a/packages/styled-react/src/components/BaseStyles.tsx
+++ b/packages/styled-react/src/components/BaseStyles.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
index 7d49c8ed618..d3628117510 100644
--- a/packages/styled-react/src/components/Button.tsx
+++ b/packages/styled-react/src/components/Button.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Button as PrimerButton, type ButtonProps as PrimerButtonProps, type SlotMarker} from '@primer/react'
 import type {SxProp, CSSCustomProperties, BetterSystemStyleObject} from '../sx'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Checkbox.tsx b/packages/styled-react/src/components/Checkbox.tsx
index 3cdd244603b..2264dbcacda 100644
--- a/packages/styled-react/src/components/Checkbox.tsx
+++ b/packages/styled-react/src/components/Checkbox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Checkbox as PrimerCheckbox, type CheckboxProps as PrimerCheckboxProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
index b8f9eabdf86..c40efaabb5c 100644
--- a/packages/styled-react/src/components/CheckboxGroup.tsx
+++ b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {CheckboxGroup as PrimerCheckboxGroup, type CheckboxGroupProps as PrimerCheckboxGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx
index ec07906fa56..6a592f19544 100644
--- a/packages/styled-react/src/components/CounterLabel.tsx
+++ b/packages/styled-react/src/components/CounterLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {CounterLabel as PrimerCounterLabel, type CounterLabelProps as PrimerCounterLabelProps} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 827be448318..2b1931323d8 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react'
 import type {DialogProps as PrimerDialogProps} from '@primer/react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Header.tsx b/packages/styled-react/src/components/Header.tsx
index da906c45477..5e9f171e55c 100644
--- a/packages/styled-react/src/components/Header.tsx
+++ b/packages/styled-react/src/components/Header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   type HeaderProps as PrimerHeaderProps,
   type HeaderItemProps as PrimerHeaderItemProps,
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
index 9c68b165c86..35ce2b5b765 100644
--- a/packages/styled-react/src/components/IconButton.tsx
+++ b/packages/styled-react/src/components/IconButton.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   IconButton as PrimerIconButton,
   type IconButtonProps as PrimerIconButtonProps,
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index d3b15272463..b005875ea67 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {NavList as PrimerNavList} from '@primer/react'
 import type {
   NavListProps as PrimerNavListProps,
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 2d296ca8620..6139ca45b90 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import styled from 'styled-components'
 import type {
diff --git a/packages/styled-react/src/components/RadioGroup.tsx b/packages/styled-react/src/components/RadioGroup.tsx
index 84a6a8c29bc..53dba596030 100644
--- a/packages/styled-react/src/components/RadioGroup.tsx
+++ b/packages/styled-react/src/components/RadioGroup.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/RelativeTime.tsx b/packages/styled-react/src/components/RelativeTime.tsx
index 3d8c0a0d625..7af7ec4df69 100644
--- a/packages/styled-react/src/components/RelativeTime.tsx
+++ b/packages/styled-react/src/components/RelativeTime.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
 import React from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/SegmentedControl.tsx b/packages/styled-react/src/components/SegmentedControl.tsx
index cc6a50efe52..8b29a4ad1a1 100644
--- a/packages/styled-react/src/components/SegmentedControl.tsx
+++ b/packages/styled-react/src/components/SegmentedControl.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   type SegmentedControlProps as PrimerSegmentedControlProps,
   SegmentedControl as PrimerSegmentedControl,
diff --git a/packages/styled-react/src/components/StateLabel.tsx b/packages/styled-react/src/components/StateLabel.tsx
index 75e28432400..56c25286613 100644
--- a/packages/styled-react/src/components/StateLabel.tsx
+++ b/packages/styled-react/src/components/StateLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/SubNav.tsx b/packages/styled-react/src/components/SubNav.tsx
index b5d07b599e8..bb373f7a493 100644
--- a/packages/styled-react/src/components/SubNav.tsx
+++ b/packages/styled-react/src/components/SubNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index 1777d704137..bca29df195b 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   TextInput as PrimerTextInput,
   type TextInputProps as PrimerTextInputProps,
diff --git a/packages/styled-react/src/components/Timeline.tsx b/packages/styled-react/src/components/Timeline.tsx
index cdd42e60662..62c02311d37 100644
--- a/packages/styled-react/src/components/Timeline.tsx
+++ b/packages/styled-react/src/components/Timeline.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   Timeline as PrimerTimeline,
   type TimelineProps as PrimerTimelineProps,
diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx
index 53974f63d85..7cf527ffe1e 100644
--- a/packages/styled-react/src/components/ToggleSwitch.tsx
+++ b/packages/styled-react/src/components/ToggleSwitch.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {ToggleSwitch as PrimerToggleSwitch, type ToggleSwitchProps as PrimerToggleSwitchProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
index 466e9299e08..7e877d576b1 100644
--- a/packages/styled-react/src/components/Tooltip.tsx
+++ b/packages/styled-react/src/components/Tooltip.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx
index 8ccbb31a960..33c2c3dfb95 100644
--- a/packages/styled-react/src/components/UnderlineNav.tsx
+++ b/packages/styled-react/src/components/UnderlineNav.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlineNav as PrimerUnderlineNav,
   type UnderlineNavProps as PrimerUnderlineNavProps,
diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx
index 18ae4676051..1c4db18bb4a 100644
--- a/packages/styled-react/src/components/UnderlinePanels.tsx
+++ b/packages/styled-react/src/components/UnderlinePanels.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlinePanels as PrimerUnderlinePanels,
   type UnderlinePanelsProps as PrimerUnderlinePanelsProps,
diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx
index 88908a51ac0..7d473c01e36 100644
--- a/packages/styled-react/src/components/deprecated/ActionList.tsx
+++ b/packages/styled-react/src/components/deprecated/ActionList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {type PropsWithChildren, forwardRef} from 'react'
 import {
   ActionList as PrimerActionList,
diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx
index 98eba8edcb1..e82db00c03b 100644
--- a/packages/styled-react/src/components/deprecated/DialogV1.tsx
+++ b/packages/styled-react/src/components/deprecated/DialogV1.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react/deprecated'
 import type {
   DialogProps as PrimerDialogProps,

From f6d5c584e7f171197451989dadf6b300dfe82ed8 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 27 Oct 2025 12:11:13 +0100
Subject: [PATCH 11/12] Reapply "Remove eslint-disable comments and remove
 --max-warnings from lint command"

This reverts commit d754263f0aa1e6524bdbe5a238e663d23dccd365.
---
 eslint.config.mjs                                                | 1 -
 packages/react/src/ActionBar/ActionBar.tsx                       | 1 -
 packages/react/src/ActionList/ActionList.dev.stories.tsx         | 1 -
 packages/react/src/ActionList/ActionList.features.stories.tsx    | 1 -
 packages/react/src/ActionList/Group.tsx                          | 1 -
 packages/react/src/ActionList/Heading.tsx                        | 1 -
 packages/react/src/ActionList/Item.tsx                           | 1 -
 packages/react/src/ActionList/LinkItem.tsx                       | 1 -
 packages/react/src/ActionList/List.tsx                           | 1 -
 packages/react/src/ActionList/TrailingAction.tsx                 | 1 -
 packages/react/src/ActionList/Visuals.tsx                        | 1 -
 packages/react/src/ActionMenu/ActionMenu.tsx                     | 1 -
 packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx           | 1 -
 .../react/src/Autocomplete/Autocomplete.features.stories.tsx     | 1 -
 packages/react/src/Autocomplete/Autocomplete.stories.tsx         | 1 -
 packages/react/src/Autocomplete/Autocomplete.test.tsx            | 1 -
 packages/react/src/Autocomplete/AutocompleteInput.tsx            | 1 -
 packages/react/src/Autocomplete/AutocompleteMenu.tsx             | 1 -
 packages/react/src/Autocomplete/AutocompleteOverlay.tsx          | 1 -
 packages/react/src/Avatar/Avatar.tsx                             | 1 -
 packages/react/src/Banner/Banner.stories.tsx                     | 1 -
 packages/react/src/Banner/Banner.tsx                             | 1 -
 packages/react/src/BaseStyles.tsx                                | 1 -
 packages/react/src/Breadcrumbs/Breadcrumbs.tsx                   | 1 -
 packages/react/src/Button/Button.tsx                             | 1 -
 packages/react/src/Button/ButtonBase.tsx                         | 1 -
 packages/react/src/Button/IconButton.tsx                         | 1 -
 packages/react/src/Button/LinkButton.tsx                         | 1 -
 packages/react/src/Button/__tests__/Button.test.tsx              | 1 -
 packages/react/src/ButtonGroup/ButtonGroup.stories.tsx           | 1 -
 packages/react/src/ButtonGroup/ButtonGroup.tsx                   | 1 -
 packages/react/src/Checkbox/Checkbox.stories.tsx                 | 1 -
 packages/react/src/CheckboxGroup/CheckboxGroup.tsx               | 1 -
 packages/react/src/CircleBadge/CircleBadge.tsx                   | 1 -
 .../react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx  | 1 -
 packages/react/src/Details/Details.tsx                           | 1 -
 packages/react/src/Details/__tests__/Details.test.tsx            | 1 -
 packages/react/src/Dialog/Dialog.tsx                             | 1 -
 packages/react/src/FilteredActionList/FilteredActionList.tsx     | 1 -
 .../react/src/FilteredActionList/FilteredActionListLoaders.tsx   | 1 -
 packages/react/src/FormControl/FormControl.features.stories.tsx  | 1 -
 packages/react/src/Header/Header.tsx                             | 1 -
 packages/react/src/Heading/Heading.tsx                           | 1 -
 packages/react/src/KeybindingHint/components/Sequence.tsx        | 1 -
 packages/react/src/Label/Label.tsx                               | 1 -
 packages/react/src/LabelGroup/LabelGroup.features.stories.tsx    | 1 -
 packages/react/src/LabelGroup/LabelGroup.stories.tsx             | 1 -
 packages/react/src/LabelGroup/LabelGroup.tsx                     | 1 -
 packages/react/src/Link/Link.tsx                                 | 1 -
 packages/react/src/NavList/NavList.features.stories.tsx          | 1 -
 packages/react/src/NavList/NavList.tsx                           | 1 -
 packages/react/src/Octicon/Octicon.stories.tsx                   | 1 -
 packages/react/src/Overlay/Overlay.dev.stories.tsx               | 1 -
 packages/react/src/Overlay/Overlay.stories.tsx                   | 1 -
 packages/react/src/Overlay/Overlay.tsx                           | 1 -
 packages/react/src/PageHeader/PageHeader.tsx                     | 1 -
 packages/react/src/PageLayout/PageLayout.tsx                     | 1 -
 packages/react/src/Pagehead/Pagehead.tsx                         | 1 -
 packages/react/src/Pagination/Pagination.features.stories.tsx    | 1 -
 packages/react/src/Pagination/Pagination.stories.tsx             | 1 -
 packages/react/src/Pagination/Pagination.test.tsx                | 1 -
 packages/react/src/Pagination/Pagination.tsx                     | 1 -
 packages/react/src/Pagination/mocks/ReactRouterLink.tsx          | 1 -
 packages/react/src/Popover/Popover.tsx                           | 1 -
 packages/react/src/ProgressBar/ProgressBar.tsx                   | 1 -
 packages/react/src/Radio/Radio.stories.tsx                       | 1 -
 packages/react/src/Radio/Radio.tsx                               | 1 -
 packages/react/src/RadioGroup/RadioGroup.tsx                     | 1 -
 .../react/src/RelativeTime/RelativeTime.features.stories.tsx     | 1 -
 packages/react/src/RelativeTime/RelativeTime.stories.tsx         | 1 -
 packages/react/src/SegmentedControl/SegmentedControl.tsx         | 1 -
 packages/react/src/SegmentedControl/SegmentedControlButton.tsx   | 1 -
 .../react/src/SegmentedControl/SegmentedControlIconButton.tsx    | 1 -
 packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx       | 1 -
 packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx  | 1 -
 packages/react/src/SelectPanel/SelectPanel.features.stories.tsx  | 1 -
 packages/react/src/SelectPanel/SelectPanel.stories.tsx           | 1 -
 packages/react/src/SelectPanel/SelectPanel.test.tsx              | 1 -
 packages/react/src/SelectPanel/SelectPanel.tsx                   | 1 -
 packages/react/src/SideNav.tsx                                   | 1 -
 packages/react/src/Skeleton/SkeletonBox.tsx                      | 1 -
 packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx             | 1 -
 packages/react/src/SkeletonText/SkeletonText.tsx                 | 1 -
 packages/react/src/Spinner/Spinner.tsx                           | 1 -
 packages/react/src/SplitPageLayout/SplitPageLayout.tsx           | 1 -
 packages/react/src/Stack/Stack.tsx                               | 1 -
 packages/react/src/SubNav/SubNav.tsx                             | 1 -
 packages/react/src/TabNav/TabNav.tsx                             | 1 -
 packages/react/src/Text/Text.tsx                                 | 1 -
 packages/react/src/TextInput/TextInput.features.stories.tsx      | 1 -
 packages/react/src/TextInput/TextInput.stories.tsx               | 1 -
 packages/react/src/TextInput/TextInput.tsx                       | 1 -
 .../react/src/TextInputWithTokens/TextInputWithTokens.test.tsx   | 1 -
 packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx   | 1 -
 packages/react/src/Textarea/Textarea.tsx                         | 1 -
 packages/react/src/ToggleSwitch/ToggleSwitch.tsx                 | 1 -
 packages/react/src/Token/IssueLabelToken.tsx                     | 1 -
 packages/react/src/Token/Token.features.stories.tsx              | 1 -
 packages/react/src/Token/Token.tsx                               | 1 -
 packages/react/src/Token/TokenBase.tsx                           | 1 -
 packages/react/src/Token/_TokenTextContainer.tsx                 | 1 -
 packages/react/src/Tooltip/Tooltip.tsx                           | 1 -
 packages/react/src/TooltipV2/Tooltip.playground.stories.tsx      | 1 -
 packages/react/src/TooltipV2/Tooltip.tsx                         | 1 -
 packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx          | 1 -
 packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx    | 1 -
 packages/react/src/UnderlineNav/UnderlineNav.tsx                 | 1 -
 packages/react/src/UnderlineNav/UnderlineNavItem.tsx             | 1 -
 packages/react/src/VisuallyHidden/VisuallyHidden.tsx             | 1 -
 packages/react/src/_VisuallyHidden.tsx                           | 1 -
 packages/react/src/deprecated/ActionList/Header.tsx              | 1 -
 packages/react/src/deprecated/ActionList/Item.tsx                | 1 -
 packages/react/src/deprecated/ActionList/List.tsx                | 1 -
 packages/react/src/deprecated/ActionMenu.tsx                     | 1 -
 packages/react/src/deprecated/DialogV1/Dialog.tsx                | 1 -
 packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx      | 1 -
 packages/react/src/experimental/CSSComponent/index.tsx           | 1 -
 packages/react/src/experimental/IssueLabel/IssueLabel.tsx        | 1 -
 packages/react/src/experimental/SelectPanel2/SelectPanel.tsx     | 1 -
 .../react/src/experimental/UnderlinePanels/UnderlinePanels.tsx   | 1 -
 packages/react/src/internal/components/ButtonReset.tsx           | 1 -
 .../components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx     | 1 -
 packages/react/src/internal/components/InputLabel.tsx            | 1 -
 packages/react/src/internal/components/TextInputInnerAction.tsx  | 1 -
 packages/react/src/internal/components/TextInputWrapper.tsx      | 1 -
 .../react/src/internal/components/UnderlineTabbedInterface.tsx   | 1 -
 packages/react/src/internal/components/UnstyledTextInput.tsx     | 1 -
 packages/react/src/stories/deprecated/ActionList.stories.tsx     | 1 -
 packages/react/src/stories/deprecated/ActionMenu.stories.tsx     | 1 -
 packages/react/src/stories/useAnchoredPosition.stories.tsx       | 1 -
 packages/react/src/stories/useFocusTrap.stories.tsx              | 1 -
 packages/react/src/stories/useFocusZone.stories.tsx              | 1 -
 packages/styled-react/src/components/ActionList.tsx              | 1 -
 packages/styled-react/src/components/Avatar.tsx                  | 1 -
 packages/styled-react/src/components/BaseStyles.tsx              | 1 -
 packages/styled-react/src/components/Button.tsx                  | 1 -
 packages/styled-react/src/components/Checkbox.tsx                | 1 -
 packages/styled-react/src/components/CheckboxGroup.tsx           | 1 -
 packages/styled-react/src/components/CounterLabel.tsx            | 1 -
 packages/styled-react/src/components/Dialog.tsx                  | 1 -
 packages/styled-react/src/components/Header.tsx                  | 1 -
 packages/styled-react/src/components/IconButton.tsx              | 1 -
 packages/styled-react/src/components/NavList.tsx                 | 1 -
 packages/styled-react/src/components/PageLayout.tsx              | 1 -
 packages/styled-react/src/components/RadioGroup.tsx              | 1 -
 packages/styled-react/src/components/RelativeTime.tsx            | 1 -
 packages/styled-react/src/components/SegmentedControl.tsx        | 1 -
 packages/styled-react/src/components/StateLabel.tsx              | 1 -
 packages/styled-react/src/components/SubNav.tsx                  | 1 -
 packages/styled-react/src/components/TextInput.tsx               | 1 -
 packages/styled-react/src/components/Timeline.tsx                | 1 -
 packages/styled-react/src/components/ToggleSwitch.tsx            | 1 -
 packages/styled-react/src/components/Tooltip.tsx                 | 1 -
 packages/styled-react/src/components/UnderlineNav.tsx            | 1 -
 packages/styled-react/src/components/UnderlinePanels.tsx         | 1 -
 packages/styled-react/src/components/deprecated/ActionList.tsx   | 1 -
 packages/styled-react/src/components/deprecated/DialogV1.tsx     | 1 -
 157 files changed, 157 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index c8459d8786a..fa12cbcf83c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -149,7 +149,6 @@ const config = defineConfig([
       'react/display-name': 'off',
       'react/jsx-uses-react': 'error',
       'react-hooks/exhaustive-deps': 'error',
-      'eslint-comments/no-use': 'off',
       camelcase: [
         'error',
         {
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 6ba6e505328..7046dc44984 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {RefObject, MouseEventHandler} from 'react'
 import React, {useState, useCallback, useRef, forwardRef, useId} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/ActionList/ActionList.dev.stories.tsx b/packages/react/src/ActionList/ActionList.dev.stories.tsx
index ee933cb9fe9..ec560222be0 100644
--- a/packages/react/src/ActionList/ActionList.dev.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.dev.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 9dd98ecf8b7..e7ff8b11f50 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {ActionList} from '.'
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 759cd2d5922..441e79302c9 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {useId} from '../hooks/useId'
 import {ListContext, type ActionListProps} from './shared'
diff --git a/packages/react/src/ActionList/Heading.tsx b/packages/react/src/ActionList/Heading.tsx
index fd88b9d6265..510c94231d8 100644
--- a/packages/react/src/ActionList/Heading.tsx
+++ b/packages/react/src/ActionList/Heading.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index df7e0350547..b25a169bd50 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/ActionList/LinkItem.tsx b/packages/react/src/ActionList/LinkItem.tsx
index 2263247bc72..8939b450284 100644
--- a/packages/react/src/ActionList/LinkItem.tsx
+++ b/packages/react/src/ActionList/LinkItem.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Link from '../Link'
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index bde4a1bfbda..c5c3860f6fb 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {fixedForwardRef} from '../utils/modern-polymorphic'
 import {ActionListContainerContext} from './ActionListContainerContext'
diff --git a/packages/react/src/ActionList/TrailingAction.tsx b/packages/react/src/ActionList/TrailingAction.tsx
index 535a8b8d7e6..933c3a6f584 100644
--- a/packages/react/src/ActionList/TrailingAction.tsx
+++ b/packages/react/src/ActionList/TrailingAction.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index f002bcf7230..c091391e465 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {AlertIcon} from '@primer/octicons-react'
 import Spinner from '../Spinner'
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 5e117b16095..c2c722cb895 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useContext, useMemo, useEffect, useState} from 'react'
 import {TriangleDownIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index d51d9ba791a..0ba6cf0b174 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useEffect} from 'react'
 import type {OverlayProps} from '../Overlay'
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index f7241ef966e..bf0577cee9b 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 8af392d23d6..4c8bda2827c 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index d66baec0913..5b97da8cdc9 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {render, fireEvent, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index 7099ab0c94d..f95c4e7f7c2 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, FocusEventHandler, KeyboardEventHandler} from 'react'
 import React, {useCallback, useContext, useEffect, useState} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Autocomplete/AutocompleteMenu.tsx b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
index d5466f63258..69918c48e99 100644
--- a/packages/react/src/Autocomplete/AutocompleteMenu.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'
 import {debounce} from '@github/mini-throttle'
 import {announce} from '@primer/live-region-element'
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index 16622939ae7..d72494a7545 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useCallback, useContext} from 'react'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
index 3a0b16acb0d..b9e501a8412 100644
--- a/packages/react/src/Avatar/Avatar.tsx
+++ b/packages/react/src/Avatar/Avatar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/Banner/Banner.stories.tsx b/packages/react/src/Banner/Banner.stories.tsx
index b6fe19fcb80..4a52e80cf63 100644
--- a/packages/react/src/Banner/Banner.stories.tsx
+++ b/packages/react/src/Banner/Banner.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import Link from '../Link'
 import {Banner} from '../Banner'
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index ec8ca2a45b1..81d04875cf6 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 96b27432182..9077d733daf 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 7e95402b978..b773b1f9596 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useState, useRef, useCallback, useEffect, useMemo, type ForwardedRef} from 'react'
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 1f5f1fa6a20..ad4c4968a61 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 376145c6bdb..97f3564e35c 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import type {ButtonProps} from './types'
diff --git a/packages/react/src/Button/IconButton.tsx b/packages/react/src/Button/IconButton.tsx
index 74280d288a9..7c439047429 100644
--- a/packages/react/src/Button/IconButton.tsx
+++ b/packages/react/src/Button/IconButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import type {IconButtonProps} from './types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
diff --git a/packages/react/src/Button/LinkButton.tsx b/packages/react/src/Button/LinkButton.tsx
index f64600e5db3..bac52d497b3 100644
--- a/packages/react/src/Button/LinkButton.tsx
+++ b/packages/react/src/Button/LinkButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {forwardRef} from 'react'
 import type {LinkButtonProps as BaseLinkButtonProps, ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
diff --git a/packages/react/src/Button/__tests__/Button.test.tsx b/packages/react/src/Button/__tests__/Button.test.tsx
index 35b8d5e19a6..4250ff75396 100644
--- a/packages/react/src/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/Button/__tests__/Button.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, HeartIcon} from '@primer/octicons-react'
 import {render, screen, fireEvent} from '@testing-library/react'
 import {describe, it, expect, vi} from 'vitest'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
index 97a29536d6b..095ac33d9cc 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {StoryFn, Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import type {ButtonProps} from '../Button'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index bbab84968dc..cd07d132175 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import classes from './ButtonGroup.module.css'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index a1857be92d6..1ffafd73c8e 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {CheckboxProps} from '..'
 import {Checkbox} from '..'
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
index 19a9434371d..fd064c7973c 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler} from 'react'
 import React from 'react'
 import type {CheckboxOrRadioGroupProps} from '../internal/components/CheckboxOrRadioGroup'
diff --git a/packages/react/src/CircleBadge/CircleBadge.tsx b/packages/react/src/CircleBadge/CircleBadge.tsx
index f95d0b63ddd..0d106c78d50 100644
--- a/packages/react/src/CircleBadge/CircleBadge.tsx
+++ b/packages/react/src/CircleBadge/CircleBadge.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import Octicon from '../Octicon'
 import isNumeric from '../utils/isNumeric'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 813a00cc93d..1c6be800b36 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '..'
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index 50ea2814614..f493bf495e1 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, type ComponentPropsWithoutRef, type ReactElement} from 'react'
 import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index e235fee58c3..ead5d97a041 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {describe, expect, it} from 'vitest'
 import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index fefc9c31a18..9bfacac1238 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect, useRef, useState, type SyntheticEvent} from 'react'
 import type {ButtonProps} from '../Button'
 import {Button, IconButton} from '../Button'
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index e02e5a7c669..61ccb33538e 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler} from 'react'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
index 5b507c2197c..bbd4d134a59 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import Spinner from '../Spinner'
 import {Stack} from '../Stack/Stack'
 import {SkeletonBox} from '../Skeleton/SkeletonBox'
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index 9c759b14677..5a645dff7f1 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 639c1ae84d3..531938db66d 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Location, Pathname} from 'history'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 26303dddacb..56c7c7ed149 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {forwardRef, useEffect} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/KeybindingHint/components/Sequence.tsx b/packages/react/src/KeybindingHint/components/Sequence.tsx
index ca86f87cf42..ff16fb8675d 100644
--- a/packages/react/src/KeybindingHint/components/Sequence.tsx
+++ b/packages/react/src/KeybindingHint/components/Sequence.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Fragment} from 'react'
 import type {KeybindingHintProps} from '../props'
 import VisuallyHidden from '../../_VisuallyHidden'
diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx
index cbf4123a792..640d16e2de0 100644
--- a/packages/react/src/Label/Label.tsx
+++ b/packages/react/src/Label/Label.tsx
@@ -1,6 +1,5 @@
 // TODO: merge https://github.com/primer/react/pull/6631 which removes `Box` usage
 
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Label.module.css'
 import React from 'react'
diff --git a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
index 3db334af474..2b9c6ba4e73 100644
--- a/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import LabelGroup from './LabelGroup'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/LabelGroup/LabelGroup.stories.tsx b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
index de4b583b6c6..fc13d4b834a 100644
--- a/packages/react/src/LabelGroup/LabelGroup.stories.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {LabelGroupProps} from './LabelGroup'
 import LabelGroup from './LabelGroup'
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 3d58cd7c513..7c0175b8fc1 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import {getFocusableChild} from '@primer/behaviors/utils'
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 41f494bae4e..59d218173c1 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useEffect, type ForwardedRef, type ElementRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 4d807d7fa5c..218d1135b1e 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import React from 'react'
 import {PageLayout} from '../PageLayout'
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 9df411e09cd..8648957d4aa 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {ChevronDownIcon, PlusIcon, type Icon} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import React, {isValidElement} from 'react'
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index 91cbdd7c66e..ea024064a9d 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import Octicon from './Octicon'
 import {HeartFillIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.dev.stories.tsx b/packages/react/src/Overlay/Overlay.dev.stories.tsx
index dfa0f47e366..55736b4e2b5 100644
--- a/packages/react/src/Overlay/Overlay.dev.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.dev.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import Text from '../Text'
diff --git a/packages/react/src/Overlay/Overlay.stories.tsx b/packages/react/src/Overlay/Overlay.stories.tsx
index 66bd0bed9bc..8f31d3d8879 100644
--- a/packages/react/src/Overlay/Overlay.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useState, useRef, type ComponentProps} from 'react'
 import type {Args, Meta} from '@storybook/react-vite'
 import {XIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 9cd249a7472..89557b79c29 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ComponentPropsWithRef, ReactElement} from 'react'
 import React, {useEffect, useRef} from 'react'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index c16cefb497d..2289585a79d 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {isResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index d548a335cea..8d8ae16fbfd 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useRef} from 'react'
 import {clsx} from 'clsx'
 import {useId} from '../hooks/useId'
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index 3228c652c1b..c0bead6c382 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
diff --git a/packages/react/src/Pagination/Pagination.features.stories.tsx b/packages/react/src/Pagination/Pagination.features.stories.tsx
index 2f6acc72a55..0aeaac725ca 100644
--- a/packages/react/src/Pagination/Pagination.features.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx
index 250c4c80262..64a2047e6d4 100644
--- a/packages/react/src/Pagination/Pagination.stories.tsx
+++ b/packages/react/src/Pagination/Pagination.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {useState} from 'react'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index 446c4772e99..f2b1c62ad77 100644
--- a/packages/react/src/Pagination/Pagination.test.tsx
+++ b/packages/react/src/Pagination/Pagination.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {render as HTMLRender} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 import Pagination from '../Pagination'
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 9ea9b5b5b9f..1d362001705 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
 import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index e0d60e5d691..9f6b8b3e65a 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; className?: string}
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index b950505bcbf..80e877afba4 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import classes from './Popover.module.css'
 import type {HTMLProps} from 'react'
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 1746a73c667..4f6f9a117ee 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef} from 'react'
 import {clsx} from 'clsx'
 import classes from './ProgressBar.module.css'
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index b811d7cf9ea..c7be73a83f4 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import type {RadioProps} from '..'
 import {FormControl, Radio} from '..'
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 6e6c6421f94..16a98b94a53 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEventHandler, InputHTMLAttributes, ReactElement} from 'react'
 import React, {useContext} from 'react'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx
index 50c2de4eb34..ff589e0a3c8 100644
--- a/packages/react/src/RadioGroup/RadioGroup.tsx
+++ b/packages/react/src/RadioGroup/RadioGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ChangeEvent, ChangeEventHandler, FC} from 'react'
 import type React from 'react'
 import {createContext} from 'react'
diff --git a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
index 0a0726d5f7a..c9ecb5a24e4 100644
--- a/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/RelativeTime/RelativeTime.stories.tsx b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
index 2a45c7c4679..b5241465cd2 100644
--- a/packages/react/src/RelativeTime/RelativeTime.stories.tsx
+++ b/packages/react/src/RelativeTime/RelativeTime.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import RelativeTime from './RelativeTime'
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx
index feb1b5ad6cc..76d25fbb64c 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useRef, useState} from 'react'
 import type {SegmentedControlButtonProps} from './SegmentedControlButton'
 import Button from './SegmentedControlButton'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index ace0b72dee4..94803bb2152 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
index 2a46b4e7929..ee70b240efd 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ButtonHTMLAttributes} from 'react'
 import type React from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
index f9ec5f8b7a2..5db418a413a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import type React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 026b67878f3..00b57ebcba3 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useMemo, useRef, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index 82b7a1a6478..dd1fa062d03 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useState, useRef, useEffect} from 'react'
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Button} from '../Button'
diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
index 5a06209d936..9f2d4befe4a 100644
--- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {TriangleDownIcon} from '@primer/octicons-react'
 import type {Meta} from '@storybook/react-vite'
 import {useState} from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx
index d58c69b5504..ccffe06d79c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.test.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {render, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, beforeEach, vi} from 'vitest'
 import React from 'react'
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index d2869e7eb48..7aa5fef65ce 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {SearchIcon, TriangleDownIcon, XIcon, type IconProps} from '@primer/octicons-react'
 import React, {useCallback, useEffect, useMemo, useRef, useState, type KeyboardEventHandler} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index df05f1279fd..0e80ceb2855 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {To} from 'history'
 import type {ComponentProps} from './utils/types'
 import Link, {type LinkProps} from './Link'
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index 05953966364..eb52dc7800b 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type CSSProperties, type HTMLProps} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
index 45677828445..e3724053d5f 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import type {AvatarProps} from '../Avatar'
diff --git a/packages/react/src/SkeletonText/SkeletonText.tsx b/packages/react/src/SkeletonText/SkeletonText.tsx
index afc95c769ab..37ebb21b013 100644
--- a/packages/react/src/SkeletonText/SkeletonText.tsx
+++ b/packages/react/src/SkeletonText/SkeletonText.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type HTMLProps} from 'react'
 import classes from './SkeletonText.module.css'
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index bd8e1a4676f..d87ff3e10b9 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 31a4021077f..1e902129248 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import type {
   PageLayoutContentProps,
diff --git a/packages/react/src/Stack/Stack.tsx b/packages/react/src/Stack/Stack.tsx
index 476f1b775d6..75a4bbc383e 100644
--- a/packages/react/src/Stack/Stack.tsx
+++ b/packages/react/src/Stack/Stack.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef, type ElementType} from 'react'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 8d4ee66b1fd..54b56942ad6 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 7bc136da3d6..876e130160f 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React, {useRef, useState} from 'react'
diff --git a/packages/react/src/Text/Text.tsx b/packages/react/src/Text/Text.tsx
index 711822717b9..6be84edb88d 100644
--- a/packages/react/src/Text/Text.tsx
+++ b/packages/react/src/Text/Text.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {type ForwardedRef} from 'react'
 import {useRefObjectAsForwardedRef} from '../hooks'
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
index fffd2a30e74..7f68ff98f1c 100644
--- a/packages/react/src/TextInput/TextInput.features.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import {FormControl, Heading, Stack} from '..'
diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx
index 718ab99f913..74afc18adcc 100644
--- a/packages/react/src/TextInput/TextInput.stories.tsx
+++ b/packages/react/src/TextInput/TextInput.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 28a918ee75c..5aa61e3040a 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useState, useId} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
index 933276df708..1b923e86094 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {render as HTMLRender, fireEvent, act, render} from '@testing-library/react'
 import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest'
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index d390b4474b4..6d72072fa04 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {FocusKeys} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
 import {omit} from '@styled-system/props'
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 241195f7bcb..39d86684372 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {TextareaHTMLAttributes, ReactElement} from 'react'
 import React from 'react'
 import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index a72305b2838..5d151a05f33 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import React, {useCallback, useEffect} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/IssueLabelToken.tsx b/packages/react/src/Token/IssueLabelToken.tsx
index b0a2c3dc92c..7959f79346f 100644
--- a/packages/react/src/Token/IssueLabelToken.tsx
+++ b/packages/react/src/Token/IssueLabelToken.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import {forwardRef, useMemo} from 'react'
 import type {TokenBaseProps} from './TokenBase'
diff --git a/packages/react/src/Token/Token.features.stories.tsx b/packages/react/src/Token/Token.features.stories.tsx
index 450ecc3c159..25cd2278749 100644
--- a/packages/react/src/Token/Token.features.stories.tsx
+++ b/packages/react/src/Token/Token.features.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta} from '@storybook/react-vite'
 import {action} from 'storybook/actions'
 import Token from './Token'
diff --git a/packages/react/src/Token/Token.tsx b/packages/react/src/Token/Token.tsx
index f803dbd688d..b89f6b0d9c7 100644
--- a/packages/react/src/Token/Token.tsx
+++ b/packages/react/src/Token/Token.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MouseEventHandler} from 'react'
 import type React from 'react'
 import {forwardRef} from 'react'
diff --git a/packages/react/src/Token/TokenBase.tsx b/packages/react/src/Token/TokenBase.tsx
index 88d97b381e3..6ea5de040e7 100644
--- a/packages/react/src/Token/TokenBase.tsx
+++ b/packages/react/src/Token/TokenBase.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {ComponentProps, KeyboardEvent} from 'react'
 import React from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/Token/_TokenTextContainer.tsx b/packages/react/src/Token/_TokenTextContainer.tsx
index d33e7ec5a8f..232a9be1900 100644
--- a/packages/react/src/Token/_TokenTextContainer.tsx
+++ b/packages/react/src/Token/_TokenTextContainer.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {TokenBaseProps} from './TokenBase'
 import type React from 'react'
 import classes from './_TokenTextContainer.module.css'
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 3a8cdede7f8..8122db14ae5 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import React, {useMemo} from 'react'
 import {useId} from '../hooks'
diff --git a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
index 0ab25f3721a..a6a8e5eedd6 100644
--- a/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Button} from '..'
 import {Tooltip} from './Tooltip'
 import type {Meta, StoryFn} from '@storybook/react-vite'
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index 190d009b5c3..cd4411a0dd9 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {Children, useEffect, useRef, useState, useMemo, type ForwardRefExoticComponent} from 'react'
 import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks'
 import {invariant} from '../utils/invariant'
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index 7f357201efd..a548e0a519f 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import type {TooltipProps} from '../Tooltip'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
index 8c24ad79703..e888ea5d70d 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.Item.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {UnderlineNav} from './index'
 import {UnderlineNavItem} from './UnderlineNavItem'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 44e359f8a2f..c72f9c57577 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {RefObject} from 'react'
 import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
 import {UnderlineNavContext} from './UnderlineNavContext'
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index e09a1dc4371..963f7c033f1 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {MutableRefObject, RefObject} from 'react'
 import React, {forwardRef, useRef, useContext} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index b8c0f270076..84b23110742 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {type HTMLAttributes} from 'react'
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
index 31e52560a26..64b32f593e3 100644
--- a/packages/react/src/_VisuallyHidden.tsx
+++ b/packages/react/src/_VisuallyHidden.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
 import type {PolymorphicProps} from './utils/modern-polymorphic'
diff --git a/packages/react/src/deprecated/ActionList/Header.tsx b/packages/react/src/deprecated/ActionList/Header.tsx
index 2e41e488fea..dc820d4eee8 100644
--- a/packages/react/src/deprecated/ActionList/Header.tsx
+++ b/packages/react/src/deprecated/ActionList/Header.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Header.module.css'
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 78f4d30fc9c..0b4a1ed7816 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {CheckIcon} from '@primer/octicons-react'
 import React, {useCallback} from 'react'
 import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/deprecated/ActionList/List.tsx b/packages/react/src/deprecated/ActionList/List.tsx
index c8882192de3..a598e596745 100644
--- a/packages/react/src/deprecated/ActionList/List.tsx
+++ b/packages/react/src/deprecated/ActionList/List.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {Key} from 'react'
 import React from 'react'
 import type {AriaRole} from '../../utils/types'
diff --git a/packages/react/src/deprecated/ActionMenu.tsx b/packages/react/src/deprecated/ActionMenu.tsx
index 6bf114951b7..c86c401ee9b 100644
--- a/packages/react/src/deprecated/ActionMenu.tsx
+++ b/packages/react/src/deprecated/ActionMenu.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type {GroupedListProps, ListPropsBase} from './ActionList/List'
 import {List} from './ActionList/List'
 import type {ItemProps} from './ActionList/Item'
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index 1fc0fb36595..b39af5aa2da 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {forwardRef, useRef, type HTMLAttributes} from 'react'
 import {IconButton} from '../../Button'
 import useDialog from '../../hooks/useDialog'
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index 4c26ec34ac4..96e11bf7a53 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
diff --git a/packages/react/src/experimental/CSSComponent/index.tsx b/packages/react/src/experimental/CSSComponent/index.tsx
index d5ee8caf2fe..b20a6bef159 100644
--- a/packages/react/src/experimental/CSSComponent/index.tsx
+++ b/packages/react/src/experimental/CSSComponent/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {clsx} from 'clsx'
 import classNames from './component.module.css'
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index 2626970a760..e6c7ca8ac0b 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import {getColorsFromHex} from './getColorFromHex'
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 4441a75f10f..04667c2b5d2 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useEffect, useState, type MutableRefObject} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 2046cfba11a..7dd02c34482 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {
   Children,
   isValidElement,
diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx
index 6207e10e6a2..b68987bb9e8 100644
--- a/packages/react/src/internal/components/ButtonReset.tsx
+++ b/packages/react/src/internal/components/ButtonReset.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import classes from './ButtonReset.module.css'
 import {clsx} from 'clsx'
 
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 70884e00c20..744d71f2237 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import ValidationAnimationContainer from '../ValidationAnimationContainer'
 import {useId} from '../../../hooks/useId'
diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx
index 3147a1f9149..5f8924ce1a3 100644
--- a/packages/react/src/internal/components/InputLabel.tsx
+++ b/packages/react/src/internal/components/InputLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {clsx} from 'clsx'
 import type React from 'react'
 import classes from './InputLabel.module.css'
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index 35b4b46f8e4..22d45d0b6d0 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {forwardRef} from 'react'
 import type {IconProps} from '@primer/octicons-react'
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 4c4bc8382ee..a88bb698e3d 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/packages/react/src/internal/components/TextInputWrapper.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {type ComponentProps} from 'react'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 85fa5e9a2f7..6bb6a388cae 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -1,6 +1,5 @@
 // Used for UnderlineNav and UnderlinePanels components
 
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react'
 import {isElement} from 'react-is'
diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx
index 432097ba672..bb419f84f71 100644
--- a/packages/react/src/internal/components/UnstyledTextInput.tsx
+++ b/packages/react/src/internal/components/UnstyledTextInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 
 import styles from './UnstyledTextInput.module.css'
diff --git a/packages/react/src/stories/deprecated/ActionList.stories.tsx b/packages/react/src/stories/deprecated/ActionList.stories.tsx
index 68e43a74d37..8bca8a2c3db 100644
--- a/packages/react/src/stories/deprecated/ActionList.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionList.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
index 57d2ee8a203..0ae257473fa 100644
--- a/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/packages/react/src/stories/deprecated/ActionMenu.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   ServerIcon,
   PlusCircleIcon,
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index e14fcdfc9d4..b312d8a5348 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {useAnchoredPosition} from '../hooks'
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index aacb86e6c98..6df61bdf5e6 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useEffect} from 'react'
 import type {Meta} from '@storybook/react-vite'
 
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index 38fbcaf5cb8..8c679511cf2 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {useCallback, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Flash} from '..'
diff --git a/packages/styled-react/src/components/ActionList.tsx b/packages/styled-react/src/components/ActionList.tsx
index 0215d8330d3..44358b1c8e3 100644
--- a/packages/styled-react/src/components/ActionList.tsx
+++ b/packages/styled-react/src/components/ActionList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React from 'react'
 import styled from 'styled-components'
 import {
diff --git a/packages/styled-react/src/components/Avatar.tsx b/packages/styled-react/src/components/Avatar.tsx
index eaed694672f..bad340bf8bf 100644
--- a/packages/styled-react/src/components/Avatar.tsx
+++ b/packages/styled-react/src/components/Avatar.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {type AvatarProps as PrimerAvatarProps, Avatar as PrimerAvatar} from '@primer/react'
 import {forwardRef} from 'react'
 import type {StyledProps} from '../styled-props'
diff --git a/packages/styled-react/src/components/BaseStyles.tsx b/packages/styled-react/src/components/BaseStyles.tsx
index 59a10e794d8..e58f33100e8 100644
--- a/packages/styled-react/src/components/BaseStyles.tsx
+++ b/packages/styled-react/src/components/BaseStyles.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
diff --git a/packages/styled-react/src/components/Button.tsx b/packages/styled-react/src/components/Button.tsx
index d3628117510..7d49c8ed618 100644
--- a/packages/styled-react/src/components/Button.tsx
+++ b/packages/styled-react/src/components/Button.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Button as PrimerButton, type ButtonProps as PrimerButtonProps, type SlotMarker} from '@primer/react'
 import type {SxProp, CSSCustomProperties, BetterSystemStyleObject} from '../sx'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Checkbox.tsx b/packages/styled-react/src/components/Checkbox.tsx
index 2264dbcacda..3cdd244603b 100644
--- a/packages/styled-react/src/components/Checkbox.tsx
+++ b/packages/styled-react/src/components/Checkbox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Checkbox as PrimerCheckbox, type CheckboxProps as PrimerCheckboxProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
index c40efaabb5c..b8f9eabdf86 100644
--- a/packages/styled-react/src/components/CheckboxGroup.tsx
+++ b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {CheckboxGroup as PrimerCheckboxGroup, type CheckboxGroupProps as PrimerCheckboxGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/CounterLabel.tsx b/packages/styled-react/src/components/CounterLabel.tsx
index 6a592f19544..ec07906fa56 100644
--- a/packages/styled-react/src/components/CounterLabel.tsx
+++ b/packages/styled-react/src/components/CounterLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {CounterLabel as PrimerCounterLabel, type CounterLabelProps as PrimerCounterLabelProps} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef} from 'react'
diff --git a/packages/styled-react/src/components/Dialog.tsx b/packages/styled-react/src/components/Dialog.tsx
index 2b1931323d8..827be448318 100644
--- a/packages/styled-react/src/components/Dialog.tsx
+++ b/packages/styled-react/src/components/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react'
 import type {DialogProps as PrimerDialogProps} from '@primer/react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Header.tsx b/packages/styled-react/src/components/Header.tsx
index 5e9f171e55c..da906c45477 100644
--- a/packages/styled-react/src/components/Header.tsx
+++ b/packages/styled-react/src/components/Header.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   type HeaderProps as PrimerHeaderProps,
   type HeaderItemProps as PrimerHeaderItemProps,
diff --git a/packages/styled-react/src/components/IconButton.tsx b/packages/styled-react/src/components/IconButton.tsx
index 35ce2b5b765..9c68b165c86 100644
--- a/packages/styled-react/src/components/IconButton.tsx
+++ b/packages/styled-react/src/components/IconButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   IconButton as PrimerIconButton,
   type IconButtonProps as PrimerIconButtonProps,
diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx
index b005875ea67..d3b15272463 100644
--- a/packages/styled-react/src/components/NavList.tsx
+++ b/packages/styled-react/src/components/NavList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {NavList as PrimerNavList} from '@primer/react'
 import type {
   NavListProps as PrimerNavListProps,
diff --git a/packages/styled-react/src/components/PageLayout.tsx b/packages/styled-react/src/components/PageLayout.tsx
index 6139ca45b90..2d296ca8620 100644
--- a/packages/styled-react/src/components/PageLayout.tsx
+++ b/packages/styled-react/src/components/PageLayout.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import React, {type PropsWithChildren} from 'react'
 import styled from 'styled-components'
 import type {
diff --git a/packages/styled-react/src/components/RadioGroup.tsx b/packages/styled-react/src/components/RadioGroup.tsx
index 53dba596030..84a6a8c29bc 100644
--- a/packages/styled-react/src/components/RadioGroup.tsx
+++ b/packages/styled-react/src/components/RadioGroup.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {RadioGroup as PrimerRadioGroup, type RadioGroupProps as PrimerRadioGroupProps} from '@primer/react'
 import React, {type PropsWithChildren} from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/RelativeTime.tsx b/packages/styled-react/src/components/RelativeTime.tsx
index 7af7ec4df69..3d8c0a0d625 100644
--- a/packages/styled-react/src/components/RelativeTime.tsx
+++ b/packages/styled-react/src/components/RelativeTime.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {RelativeTime as PrimerRelativeTime, type RelativeTimeProps as PrimerRelativeTimeProps} from '@primer/react'
 import React from 'react'
 import type {SxProp} from '../sx'
diff --git a/packages/styled-react/src/components/SegmentedControl.tsx b/packages/styled-react/src/components/SegmentedControl.tsx
index 8b29a4ad1a1..cc6a50efe52 100644
--- a/packages/styled-react/src/components/SegmentedControl.tsx
+++ b/packages/styled-react/src/components/SegmentedControl.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   type SegmentedControlProps as PrimerSegmentedControlProps,
   SegmentedControl as PrimerSegmentedControl,
diff --git a/packages/styled-react/src/components/StateLabel.tsx b/packages/styled-react/src/components/StateLabel.tsx
index 56c25286613..75e28432400 100644
--- a/packages/styled-react/src/components/StateLabel.tsx
+++ b/packages/styled-react/src/components/StateLabel.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/SubNav.tsx b/packages/styled-react/src/components/SubNav.tsx
index bb373f7a493..b5d07b599e8 100644
--- a/packages/styled-react/src/components/SubNav.tsx
+++ b/packages/styled-react/src/components/SubNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   SubNav as PrimerSubNav,
   type SubNavProps as PrimerSubNavProps,
diff --git a/packages/styled-react/src/components/TextInput.tsx b/packages/styled-react/src/components/TextInput.tsx
index bca29df195b..1777d704137 100644
--- a/packages/styled-react/src/components/TextInput.tsx
+++ b/packages/styled-react/src/components/TextInput.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   TextInput as PrimerTextInput,
   type TextInputProps as PrimerTextInputProps,
diff --git a/packages/styled-react/src/components/Timeline.tsx b/packages/styled-react/src/components/Timeline.tsx
index 62c02311d37..cdd42e60662 100644
--- a/packages/styled-react/src/components/Timeline.tsx
+++ b/packages/styled-react/src/components/Timeline.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   Timeline as PrimerTimeline,
   type TimelineProps as PrimerTimelineProps,
diff --git a/packages/styled-react/src/components/ToggleSwitch.tsx b/packages/styled-react/src/components/ToggleSwitch.tsx
index 7cf527ffe1e..53974f63d85 100644
--- a/packages/styled-react/src/components/ToggleSwitch.tsx
+++ b/packages/styled-react/src/components/ToggleSwitch.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {ToggleSwitch as PrimerToggleSwitch, type ToggleSwitchProps as PrimerToggleSwitchProps} from '@primer/react'
 import {forwardRef} from 'react'
 import {Box} from './Box'
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/packages/styled-react/src/components/Tooltip.tsx
index 7e877d576b1..466e9299e08 100644
--- a/packages/styled-react/src/components/Tooltip.tsx
+++ b/packages/styled-react/src/components/Tooltip.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SlotMarker} from '@primer/react'
 import {Box} from './Box'
 import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
diff --git a/packages/styled-react/src/components/UnderlineNav.tsx b/packages/styled-react/src/components/UnderlineNav.tsx
index 33c2c3dfb95..8ccbb31a960 100644
--- a/packages/styled-react/src/components/UnderlineNav.tsx
+++ b/packages/styled-react/src/components/UnderlineNav.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlineNav as PrimerUnderlineNav,
   type UnderlineNavProps as PrimerUnderlineNavProps,
diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx
index 1c4db18bb4a..18ae4676051 100644
--- a/packages/styled-react/src/components/UnderlinePanels.tsx
+++ b/packages/styled-react/src/components/UnderlinePanels.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {
   UnderlinePanels as PrimerUnderlinePanels,
   type UnderlinePanelsProps as PrimerUnderlinePanelsProps,
diff --git a/packages/styled-react/src/components/deprecated/ActionList.tsx b/packages/styled-react/src/components/deprecated/ActionList.tsx
index 7d473c01e36..88908a51ac0 100644
--- a/packages/styled-react/src/components/deprecated/ActionList.tsx
+++ b/packages/styled-react/src/components/deprecated/ActionList.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {type PropsWithChildren, forwardRef} from 'react'
 import {
   ActionList as PrimerActionList,
diff --git a/packages/styled-react/src/components/deprecated/DialogV1.tsx b/packages/styled-react/src/components/deprecated/DialogV1.tsx
index e82db00c03b..98eba8edcb1 100644
--- a/packages/styled-react/src/components/deprecated/DialogV1.tsx
+++ b/packages/styled-react/src/components/deprecated/DialogV1.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable primer-react/spread-props-first */
 import {Dialog as PrimerDialog} from '@primer/react/deprecated'
 import type {
   DialogProps as PrimerDialogProps,

From bc83be9de246cef58a1a7ac39cd684f1cf1d7efc Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 27 Oct 2025 12:12:06 +0100
Subject: [PATCH 12/12] remove --max-warnings

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 244da076231..38a2a067de7 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "npm run build:components.json -w @primer/react",
     "build:hooks.json": "npm run build:hooks.json -w @primer/react",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --cache",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --cache",
     "lint:css": "stylelint --rd -q --cache '**/*.css'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:fix": "npm run lint -- --fix",