diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index d512a53e3cf..1428ed82a91 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -6,6 +6,7 @@ import TextInput from '../TextInput'
 import {useMergedRefs} from '../hooks/useMergedRefs'
 import type {ComponentProps} from '../utils/types'
 import useSafeTimeout from '../hooks/useSafeTimeout'
+import {mergeProps} from '../utils/mergeProps'
 
 type InternalAutocompleteInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -170,22 +171,26 @@ const AutocompleteInput = React.forwardRef(
 
     return (
       <Component
-        onFocus={handleInputFocus}
-        onBlur={handleInputBlur}
-        onChange={handleInputChange}
-        onKeyDown={handleInputKeyDown}
-        onKeyPress={onInputKeyPress}
-        onKeyUp={handleInputKeyUp}
         ref={mergedRef}
-        aria-controls={`${id}-listbox`}
-        aria-autocomplete="both"
-        role="combobox"
-        aria-expanded={showMenu}
-        aria-haspopup="listbox"
-        aria-owns={`${id}-listbox`}
-        autoComplete="off"
-        id={id}
-        {...props}
+        {...mergeProps(
+          {
+            onFocus: handleInputFocus,
+            onBlur: handleInputBlur,
+            onChange: handleInputChange,
+            onKeyDown: handleInputKeyDown,
+            onKeyPress: onInputKeyPress,
+            onKeyUp: handleInputKeyUp,
+            'aria-controls': `${id}-listbox`,
+            'aria-autocomplete': 'both' as const,
+            role: 'combobox',
+            'aria-expanded': showMenu,
+            'aria-haspopup': 'listbox',
+            'aria-owns': `${id}-listbox`,
+            autoComplete: 'off',
+            id,
+          },
+          props,
+        )}
         data-component="Autocomplete.Input"
       />
     )
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index f330153c2ba..a642f13dc69 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -10,6 +10,7 @@ import VisuallyHidden from '../_VisuallyHidden'
 
 import classes from './AutocompleteOverlay.module.css'
 import {clsx} from 'clsx'
+import {mergeProps} from '../utils/mergeProps'
 
 type AutocompleteOverlayInternalProps = {
   /**
@@ -36,6 +37,12 @@ function AutocompleteOverlay({
     throw new Error('AutocompleteContext returned null values')
   }
   const overlayProps = {...oldOverlayProps, ...newOverlayProps}
+  const {
+    className: overlayClassName,
+    onClickOutside: consumerOnClickOutside,
+    onEscape: consumerOnEscape,
+    ...overlayRest
+  } = overlayProps
   const {inputRef, scrollContainerRef, selectedItemLength, setShowMenu, showMenu = false} = autocompleteContext
 
   const computedAnchorRef = useRef<HTMLElement | null>(null)
@@ -62,6 +69,12 @@ function AutocompleteOverlay({
   const closeOptionList = useCallback(() => {
     setShowMenu(false)
   }, [setShowMenu])
+  const onClickOutside = consumerOnClickOutside
+    ? mergeProps({onClickOutside: closeOptionList}, {onClickOutside: consumerOnClickOutside}).onClickOutside
+    : closeOptionList
+  const onEscape = consumerOnEscape
+    ? mergeProps({onEscape: closeOptionList}, {onEscape: consumerOnEscape}).onEscape
+    : closeOptionList
 
   if (typeof window === 'undefined') {
     return null
@@ -69,15 +82,19 @@ function AutocompleteOverlay({
 
   return showMenu ? (
     <Overlay
-      returnFocusRef={inputRef}
-      preventFocusOnOpen={true}
-      onClickOutside={closeOptionList}
-      onEscape={closeOptionList}
       ref={mergedScrollContainerRef}
-      top={position?.top}
-      left={position?.left}
-      className={clsx(classes.Overlay, className)}
-      {...overlayProps}
+      returnFocusRef={inputRef}
+      {...mergeProps(
+        {
+          preventFocusOnOpen: true,
+          onClickOutside,
+          onEscape,
+          top: position?.top,
+          left: position?.left,
+          className: clsx(classes.Overlay, className, overlayClassName),
+        },
+        overlayRest,
+      )}
       data-component="Autocomplete.Overlay"
     >
       {children}
diff --git a/packages/react/src/Checkbox/Checkbox.test.tsx b/packages/react/src/Checkbox/Checkbox.test.tsx
index 350801edaa3..dab14224720 100644
--- a/packages/react/src/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/Checkbox/Checkbox.test.tsx
@@ -54,11 +54,11 @@ describe('Checkbox', () => {
     expect(checkbox.checked).toEqual(false)
 
     await user.click(checkbox)
-    expect(handleChange).toHaveBeenCalled()
+    expect(handleChange).toHaveBeenCalledTimes(1)
     expect(checkbox.checked).toEqual(true)
 
     await user.click(checkbox)
-    expect(handleChange).toHaveBeenCalled()
+    expect(handleChange).toHaveBeenCalledTimes(2)
     expect(checkbox.checked).toEqual(false)
   })
 
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index 047a0660c02..63cf5bef9bf 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -15,6 +15,7 @@ import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext'
 import classes from './Checkbox.module.css'
 import sharedClasses from './shared.module.css'
 import type {WithSlotMarker} from '../utils/types'
+import {mergeProps} from '../utils/mergeProps'
 
 export type CheckboxProps = {
   /**
@@ -87,7 +88,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     const inputProps = {
       type: 'checkbox',
       disabled,
-      ref: appliedRef,
       checked: indeterminate ? false : checked,
       defaultChecked,
       required,
@@ -96,7 +96,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       onChange: handleOnChange,
       value,
       name: value,
-      ...rest,
     }
 
     useLayoutEffect(() => {
@@ -118,9 +117,10 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
     return (
-      // @ts-expect-error inputProp needs a non nullable ref
       <input
-        {...inputProps}
+        // @ts-expect-error input requires a non-nullable ref
+        ref={appliedRef}
+        {...mergeProps(inputProps, rest)}
         data-component={dataComponent ?? 'Checkbox'}
         className={clsx(className, sharedClasses.Input, classes.Checkbox)}
       />
diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
index deb39f018df..12bebb2409f 100644
--- a/packages/react/src/DataTable/Table.tsx
+++ b/packages/react/src/DataTable/Table.tsx
@@ -12,6 +12,7 @@ import {ScrollableRegion} from '../ScrollableRegion'
 import {Button} from '../internal/components/ButtonReset'
 import classes from './Table.module.css'
 import type {PolymorphicProps} from '../utils/modern-polymorphic'
+import {mergeProps} from '../utils/mergeProps'
 
 // ----------------------------------------------------------------------------
 // Table
@@ -52,12 +53,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(
       className={clsx('TableOverflowWrapper', classes.TableOverflowWrapper)}
     >
       <table
-        {...rest}
+        ref={ref}
+        {...mergeProps({className: clsx(className, 'Table', classes.Table)}, rest)}
         aria-labelledby={labelledby}
         data-cell-padding={cellPadding}
-        className={clsx(className, 'Table', classes.Table)}
         role="table"
-        ref={ref}
         style={{'--grid-template-columns': gridTemplateColumns} as React.CSSProperties}
         data-component="Table"
       />
@@ -108,12 +108,13 @@ export type TableHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align
   align?: CellAlignment
 }
 
-function TableHeader({align, children, ...rest}: TableHeaderProps) {
+function TableHeader({align, children, className, ...rest}: TableHeaderProps) {
   return (
     <th
-      data-component="Table.Header"
-      {...rest}
-      className={clsx('TableHeader', classes.TableHeader)}
+      {...mergeProps(
+        {'data-component': 'Table.Header', className: clsx('TableHeader', classes.TableHeader, className)},
+        rest,
+      )}
       role="columnheader"
       scope="col"
       data-cell-align={align}
@@ -140,7 +141,7 @@ function TableSortHeader({align, children, direction, onToggleSort, ...rest}: Ta
   const ariaSort = direction === 'DESC' ? 'descending' : direction === 'ASC' ? 'ascending' : undefined
 
   return (
-    <TableHeader {...rest} aria-sort={ariaSort} align={align} data-component="Table.SortHeader">
+    <TableHeader {...mergeProps({}, rest)} aria-sort={ariaSort} align={align} data-component="Table.SortHeader">
       <Button
         type="button"
         className={clsx('TableSortButton', classes.TableSortButton)}
@@ -184,9 +185,13 @@ function TableSortHeader({align, children, direction, onToggleSort, ...rest}: Ta
 
 export type TableRowProps = React.ComponentPropsWithoutRef<'tr'>
 
-function TableRow({children, ...rest}: TableRowProps) {
+function TableRow({children, className, ...rest}: TableRowProps) {
   return (
-    <tr {...rest} className={clsx('TableRow', classes.TableRow)} role="row" data-component="Table.Row">
+    <tr
+      {...mergeProps({className: clsx('TableRow', classes.TableRow, className)}, rest)}
+      role="row"
+      data-component="Table.Row"
+    >
       {children}
     </tr>
   )
@@ -215,8 +220,7 @@ function TableCell({align, className, children, scope, ...rest}: TableCellProps)
 
   return (
     <BaseComponent
-      {...rest}
-      className={clsx('TableCell', className, classes.TableCell)}
+      {...mergeProps({className: clsx('TableCell', className, classes.TableCell)}, rest)}
       scope={scope}
       role={role}
       data-cell-align={align}
@@ -251,7 +255,10 @@ function TableContainer<As extends React.ElementType = 'div'>({
 }: TableContainerProps<As>) {
   const Component = as || 'div'
   return (
-    <Component {...rest} className={clsx(className, classes.TableContainer)} data-component="Table.Container">
+    <Component
+      {...mergeProps({className: clsx(className, classes.TableContainer)}, rest)}
+      data-component="Table.Container"
+    >
       {children}
     </Component>
   )
@@ -354,7 +361,7 @@ export type TableSkeletonProps<Data extends UniqueRow> = React.ComponentPropsWit
 function TableSkeleton<Data extends UniqueRow>({cellPadding, columns, rows = 10, ...rest}: TableSkeletonProps<Data>) {
   const {gridTemplateColumns} = useTableLayout(columns)
   return (
-    <Table {...rest} cellPadding={cellPadding} gridTemplateColumns={gridTemplateColumns}>
+    <Table {...mergeProps({cellPadding, gridTemplateColumns}, rest)}>
       <TableHead>
         <TableRow>
           {Array.isArray(columns)
diff --git a/packages/react/src/Details/Details.tsx b/packages/react/src/Details/Details.tsx
index f578cb222b9..7a7b5cf4846 100644
--- a/packages/react/src/Details/Details.tsx
+++ b/packages/react/src/Details/Details.tsx
@@ -3,6 +3,7 @@ import {warning} from '../utils/warning'
 import {clsx} from 'clsx'
 import classes from './Details.module.css'
 import {useMergedRefs} from '../hooks/useMergedRefs'
+import {mergeProps} from '../utils/mergeProps'
 
 const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -28,9 +29,8 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
 
     return (
       <details
-        className={clsx(className, classes.Details)}
-        {...rest}
         ref={ref}
+        {...mergeProps({className: clsx(className, classes.Details)}, rest)}
         data-component={dataComponent ?? 'Details'}
       >
         {children}
@@ -52,7 +52,10 @@ 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} data-component="Details.Summary">
+    <Component
+      {...mergeProps({as: Component === 'summary' ? null : 'summary'}, props)}
+      data-component="Details.Summary"
+    >
       {children}
     </Component>
   )
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index e004536ca55..6514bbfa10e 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -23,6 +23,7 @@ import {useVirtualizer} from '@tanstack/react-virtual'
 import {useMergedRefs, useProvidedRefOrCreate} from '../hooks'
 import {useFeatureFlag} from '../FeatureFlags'
 import {FilteredActionListInput} from './FilteredActionListInput'
+import {mergeProps} from '../utils/mergeProps'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -631,21 +632,26 @@ const MappedActionListItem = forwardRef<HTMLLIElement, ItemInput & {renderItem?:
     trailingText,
     trailingIcon: TrailingIcon,
     onAction,
+    className,
     children,
     ...rest
   } = item
 
   return (
     <ActionList.Item
-      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}
       ref={ref}
-      {...rest}
+      {...(mergeProps(
+        {
+          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,
+          className,
+        },
+        rest,
+      ) as React.ComponentProps<typeof ActionList.Item>)}
     >
       {LeadingVisual ? (
         <ActionList.LeadingVisual>
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 31ee7ebcf5d..95ea414fa99 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -11,6 +11,7 @@ import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
 import type {heightMap, widthMap} from './constants'
+import {mergeProps} from '../utils/mergeProps'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
@@ -91,27 +92,31 @@ export const BaseOverlay = React.forwardRef(
   ): ReactElement<any> => {
     return (
       <Component
-        {...rest}
         ref={forwardedRef}
-        style={
+        {...mergeProps(
           {
-            '--top': typeof top === 'number' ? `${top}px` : top,
-            '--left': typeof left === 'number' ? `${left}px` : left,
-            '--right': typeof right === 'number' ? `${right}px` : right,
-            '--bottom': typeof bottom === 'number' ? `${bottom}px` : bottom,
-            position,
-            ...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)}
+            className: clsx(className, classes.Overlay),
+            style: {
+              '--top': typeof top === 'number' ? `${top}px` : top,
+              '--left': typeof left === 'number' ? `${left}px` : left,
+              '--right': typeof right === 'number' ? `${right}px` : right,
+              '--bottom': typeof bottom === 'number' ? `${bottom}px` : bottom,
+              position,
+            } as React.CSSProperties,
+          },
+          {...rest, style: styleFromProps},
+        )}
+        {...mergeProps(
+          {},
+          {
+            [`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,
+          },
+        )}
       />
     )
   },
@@ -216,16 +221,20 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
 
     const overlayContent = (
       <BaseOverlay
-        role={role}
-        width={width}
-        data-reflow-container={!preventOverflow ? true : undefined}
         ref={mergedOverlayRef}
-        left={leftPosition}
-        right={right}
-        height={height}
-        visibility={visibility}
-        data-responsive={responsiveVariant}
-        {...props}
+        {...mergeProps(
+          {
+            role,
+            width,
+            'data-reflow-container': !preventOverflow ? true : undefined,
+            left: leftPosition,
+            right,
+            height,
+            visibility,
+            'data-responsive': responsiveVariant,
+          },
+          props,
+        )}
       />
     )
 
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 48a88907063..99c9004ee3b 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -5,6 +5,7 @@ import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {viewportRanges} from '../hooks/useResponsiveValue'
 import {clsx} from 'clsx'
 import classes from './Pagination.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) => {
   if (showPages && typeof showPages !== 'boolean') {
@@ -144,10 +145,14 @@ function Pagination({
 
   return (
     <nav
-      className={clsx(classes.PaginationContainer, className)}
-      aria-label="Pagination"
-      data-component="Pagination"
-      {...rest}
+      {...mergeProps(
+        {
+          className: clsx(classes.PaginationContainer, className),
+          'aria-label': 'Pagination',
+          'data-component': 'Pagination',
+        },
+        rest,
+      )}
     >
       <div
         className={classes.TablePaginationSteps}
diff --git a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
index 9f6b8b3e65a..7c42ea9d52d 100644
--- a/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
+++ b/packages/react/src/Pagination/mocks/ReactRouterLink.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
+import {mergeProps} from '../../utils/mergeProps'
 
 export type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode; className?: string}
 
 export const ReactRouterLikeLink = React.forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
   ({to, children, ...props}, ref) => {
     return (
-      <a ref={ref} href={to} {...props}>
+      <a ref={ref} {...mergeProps({href: to}, props)}>
         {children}
       </a>
     )
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 2acaec9c0f7..18e3f4304f8 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -3,6 +3,7 @@ import classes from './Popover.module.css'
 import type {HTMLProps} from 'react'
 import React, {useRef} from 'react'
 import {useOnEscapePress, useOnOutsideClick} from '../hooks'
+import {mergeProps} from '../utils/mergeProps'
 
 // Stable empty array reference to avoid unnecessary re-renders
 const EMPTY_IGNORE_CLICK_REFS: React.RefObject<HTMLElement>[] = []
@@ -106,11 +107,15 @@ const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = (
   return (
     <div
       ref={divRef}
-      data-component="Popover.Content"
-      data-width={width}
-      data-height={height}
-      className={clsx(className, classes.PopoverContent)}
-      {...props}
+      {...mergeProps(
+        {
+          'data-component': 'Popover.Content',
+          'data-width': width,
+          'data-height': height,
+          className: clsx(className, classes.PopoverContent),
+        },
+        props,
+      )}
     />
   )
 }
diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx
index 579779f8f5f..09c6042f965 100644
--- a/packages/react/src/ProgressBar/ProgressBar.tsx
+++ b/packages/react/src/ProgressBar/ProgressBar.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef} from 'react'
 import {clsx} from 'clsx'
 import classes from './ProgressBar.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 type ProgressProp = {
   className?: string
@@ -35,14 +36,6 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItemProps>(
   ) => {
     const progressAsNumber = typeof progress === 'string' ? parseInt(progress, 10) : progress
 
-    const ariaAttributes = {
-      'aria-valuenow':
-        ariaValueNow ?? (progressAsNumber !== undefined && progressAsNumber >= 0 ? Math.round(progressAsNumber) : 0),
-      'aria-valuemin': 0,
-      'aria-valuemax': 100,
-      'aria-valuetext': ariaValueText,
-    }
-
     const progressBarWidth = '--progress-width'
     const progressBarBg = '--progress-bg'
     const styles: {[key: string]: string} = {}
@@ -54,14 +47,23 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItemProps>(
 
     return (
       <span
-        data-component="ProgressBar.Item"
-        className={clsx(className, classes.ProgressBarItem)}
-        {...rest}
+        ref={forwardRef}
+        {...mergeProps(
+          {
+            'data-component': 'ProgressBar.Item',
+            className: clsx(className, classes.ProgressBarItem),
+          },
+          rest,
+        )}
         role="progressbar"
         aria-label={ariaLabel}
-        ref={forwardRef}
         style={{...styles, ...style}}
-        {...ariaAttributes}
+        aria-valuenow={
+          ariaValueNow ?? (progressAsNumber !== undefined && progressAsNumber >= 0 ? Math.round(progressAsNumber) : 0)
+        }
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuetext={ariaValueText}
       />
     )
   },
@@ -103,11 +105,15 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
     return (
       <span
         ref={forwardRef}
-        data-component="ProgressBar"
-        className={clsx(className, classes.ProgressBarContainer)}
-        data-progress-display={inline ? 'inline' : 'block'}
-        data-progress-bar-size={barSize}
-        {...rest}
+        {...mergeProps(
+          {
+            'data-component': 'ProgressBar',
+            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/ScrollableRegion/ScrollableRegion.tsx b/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
index 6f464aea9a3..68611dcb23a 100644
--- a/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
+++ b/packages/react/src/ScrollableRegion/ScrollableRegion.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {clsx} from 'clsx'
 import {useOverflow} from '../hooks/useOverflow'
 import classes from './ScrollableRegion.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 type Labelled =
   | {
@@ -24,21 +25,14 @@ function ScrollableRegion({
 }: ScrollableRegionProps) {
   const ref = React.useRef(null)
   const hasOverflow = useOverflow(ref)
-  const regionProps = hasOverflow
-    ? {
-        'aria-label': label,
-        'aria-labelledby': labelledby,
-        role: 'region',
-        tabIndex: 0,
-      }
-    : {}
-
   return (
     <div
-      {...rest}
-      {...regionProps}
       ref={ref}
-      className={clsx(classes.ScrollableRegion, className)}
+      {...mergeProps({className: clsx(classes.ScrollableRegion, className)}, rest)}
+      aria-label={hasOverflow ? label : undefined}
+      aria-labelledby={hasOverflow ? labelledby : undefined}
+      role={hasOverflow ? 'region' : rest.role}
+      tabIndex={hasOverflow ? 0 : rest.tabIndex}
       data-component="ScrollableRegion"
     >
       {children}
diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx
index d798c18178b..b783818c199 100644
--- a/packages/react/src/Select/Select.tsx
+++ b/packages/react/src/Select/Select.tsx
@@ -5,6 +5,7 @@ import TextInputWrapper from '../internal/components/TextInputWrapper'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 import classes from './Select.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 export type SelectProps = Omit<
   Omit<React.ComponentProps<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant' | 'contrast'>,
@@ -81,11 +82,11 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
 ) as PolymorphicForwardRefComponent<'select', SelectProps>
 
 const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
-  <option {...props} data-component="Select.Option" />
+  <option {...mergeProps({}, props)} data-component="Select.Option" />
 )
 
 const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>> = props => (
-  <optgroup {...props} data-component="Select.OptGroup" />
+  <optgroup {...mergeProps({}, props)} data-component="Select.OptGroup" />
 )
 
 export default Object.assign(Select, {
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index d818724c193..62d6ef70f6c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -29,6 +29,7 @@ import type {ButtonProps, LinkButtonProps} from '../Button/types'
 import {Banner} from '../Banner'
 import {isAlphabetKey} from '../hooks/useMnemonics'
 import {useFormControlContext} from '../FormControl/_FormControlContext'
+import {mergeProps} from '../utils/mergeProps'
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const SHORT_DELAY_MS = 500
@@ -1065,15 +1066,21 @@ function Panel({
 
 const SecondaryButton: React.FC<ButtonProps> = props => {
   return (
-    <Button block data-component="SelectPanel.SecondaryActionButton" {...props}>
+    <Button {...mergeProps({block: true, 'data-component': 'SelectPanel.SecondaryActionButton'}, props)}>
       {props.children}
     </Button>
   )
 }
 
 const SecondaryLink: React.FC<LinkButtonProps & ButtonProps> = props => {
+  const {className, ...rest} = props
   return (
-    <LinkButton {...props} variant="invisible" block data-component="SelectPanel.SecondaryActionLink">
+    <LinkButton
+      {...mergeProps({className}, rest)}
+      variant="invisible"
+      block
+      data-component="SelectPanel.SecondaryActionLink"
+    >
       {props.children}
     </LinkButton>
   )
diff --git a/packages/react/src/Timeline/Timeline.tsx b/packages/react/src/Timeline/Timeline.tsx
index a3d257ed4e5..e3b31534f3d 100644
--- a/packages/react/src/Timeline/Timeline.tsx
+++ b/packages/react/src/Timeline/Timeline.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Timeline.module.css'
 import type {TimelineBadgeVariants} from './constants'
+import {mergeProps} from '../utils/mergeProps'
 
 type StyledTimelineProps = {clipSidebar?: boolean | 'start' | 'end' | 'both'; className?: string}
 
@@ -25,10 +26,9 @@ const Timeline = React.forwardRef<HTMLDivElement | HTMLOListElement, TimelinePro
         // them when list-style: none is applied (WebKit intentional behaviour).
         // eslint-disable-next-line jsx-a11y/no-redundant-roles
         <ol
-          {...props}
-          role="list"
-          className={clsx(className, classes.Timeline)}
           ref={forwardRef as React.ForwardedRef<HTMLOListElement>}
+          {...mergeProps({className: clsx(className, classes.Timeline)}, props)}
+          role="list"
           data-clip-sidebar={resolvedClipSidebar}
         />
       )
@@ -36,9 +36,8 @@ const Timeline = React.forwardRef<HTMLDivElement | HTMLOListElement, TimelinePro
 
     return (
       <div
-        {...(props as React.ComponentPropsWithoutRef<'div'>)}
-        className={clsx(className, classes.Timeline)}
         ref={forwardRef as React.ForwardedRef<HTMLDivElement>}
+        {...mergeProps({className: clsx(className, classes.Timeline)}, props as React.ComponentPropsWithoutRef<'div'>)}
         data-clip-sidebar={resolvedClipSidebar}
       />
     )
@@ -63,9 +62,8 @@ const TimelineItem = React.forwardRef<HTMLDivElement | HTMLLIElement, TimelineIt
     if (useListSemantics) {
       return (
         <li
-          {...props}
-          className={clsx(className, 'Timeline-Item', classes.TimelineItem)}
           ref={forwardRef as React.ForwardedRef<HTMLLIElement>}
+          {...mergeProps({className: clsx(className, 'Timeline-Item', classes.TimelineItem)}, props)}
           data-condensed={condensed ? '' : undefined}
         />
       )
@@ -73,9 +71,11 @@ const TimelineItem = React.forwardRef<HTMLDivElement | HTMLLIElement, TimelineIt
 
     return (
       <div
-        {...(props as React.ComponentPropsWithoutRef<'div'>)}
-        className={clsx(className, 'Timeline-Item', classes.TimelineItem)}
         ref={forwardRef as React.ForwardedRef<HTMLDivElement>}
+        {...mergeProps(
+          {className: clsx(className, 'Timeline-Item', classes.TimelineItem)},
+          props as React.ComponentPropsWithoutRef<'div'>,
+        )}
         data-condensed={condensed ? '' : undefined}
       />
     )
@@ -96,7 +96,7 @@ export type TimelineBadgeProps = {
 const TimelineBadge = ({className, variant, ...props}: TimelineBadgeProps) => {
   return (
     <div className={classes.TimelineBadgeWrapper}>
-      <div {...props} className={clsx(className, classes.TimelineBadge)} data-variant={variant} />
+      <div {...mergeProps({className: clsx(className, classes.TimelineBadge)}, props)} data-variant={variant} />
     </div>
   )
 }
@@ -109,7 +109,7 @@ export type TimelineBodyProps = {
 } & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineBody = React.forwardRef<HTMLDivElement, TimelineBodyProps>(({className, ...props}, forwardRef) => {
-  return <div {...props} className={clsx(className, classes.TimelineBody)} ref={forwardRef} />
+  return <div ref={forwardRef} {...mergeProps({className: clsx(className, classes.TimelineBody)}, props)} />
 })
 
 TimelineBody.displayName = 'TimelineBody'
@@ -126,9 +126,8 @@ const TimelineBreak = React.forwardRef<HTMLDivElement | HTMLLIElement, TimelineB
     if (useListSemantics) {
       return (
         <li
-          {...props}
-          className={clsx(className, classes.TimelineBreak)}
           ref={forwardRef as React.ForwardedRef<HTMLLIElement>}
+          {...mergeProps({className: clsx(className, classes.TimelineBreak)}, props)}
           role="presentation"
         />
       )
@@ -136,9 +135,11 @@ const TimelineBreak = React.forwardRef<HTMLDivElement | HTMLLIElement, TimelineB
 
     return (
       <div
-        {...(props as React.ComponentPropsWithoutRef<'div'>)}
-        className={clsx(className, classes.TimelineBreak)}
         ref={forwardRef as React.ForwardedRef<HTMLDivElement>}
+        {...mergeProps(
+          {className: clsx(className, classes.TimelineBreak)},
+          props as React.ComponentPropsWithoutRef<'div'>,
+        )}
       />
     )
   },
@@ -152,7 +153,7 @@ export type TimelineActionsProps = {
 } & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineActions = React.forwardRef<HTMLDivElement, TimelineActionsProps>(({className, ...props}, forwardRef) => {
-  return <div {...props} className={clsx(className, classes.TimelineItemActions)} ref={forwardRef} />
+  return <div ref={forwardRef} {...mergeProps({className: clsx(className, classes.TimelineItemActions)}, props)} />
 })
 
 TimelineActions.displayName = 'Timeline.Actions'
@@ -163,7 +164,7 @@ export type TimelineAvatarProps = {
 } & React.ComponentPropsWithoutRef<'div'>
 
 const TimelineAvatar = React.forwardRef<HTMLDivElement, TimelineAvatarProps>(({className, ...props}, forwardRef) => {
-  return <div {...props} className={clsx(className, classes.TimelineItemAvatar)} ref={forwardRef} />
+  return <div ref={forwardRef} {...mergeProps({className: clsx(className, classes.TimelineItemAvatar)}, props)} />
 })
 
 TimelineAvatar.displayName = 'Timeline.Avatar'
diff --git a/packages/react/src/Timeline/internal/timelineStoryHelpers.tsx b/packages/react/src/Timeline/internal/timelineStoryHelpers.tsx
index f50d805ca7b..1c85ab23b70 100644
--- a/packages/react/src/Timeline/internal/timelineStoryHelpers.tsx
+++ b/packages/react/src/Timeline/internal/timelineStoryHelpers.tsx
@@ -6,6 +6,7 @@ import Link from '../../Link'
 import Octicon from '../../Octicon'
 import RelativeTime from '../../RelativeTime'
 import classes from './timelineStoryHelpers.module.css'
+import {mergeProps} from '../../utils/mergeProps'
 
 /**
  * Internal, story-only Timeline helpers. Not part of the public API (stories don't
@@ -59,12 +60,12 @@ export const Examples = ({children}: {children: React.ReactNode}) => (
 
 // TODO(github/primer#6826): remove when Primer Link ships a bold/actor weight affordance
 export const BoldLink = ({className, ...props}: React.ComponentProps<typeof Link>) => (
-  <Link {...props} className={clsx(classes.BoldLink, className)} />
+  <Link {...mergeProps({className: clsx(classes.BoldLink, className)}, props)} />
 )
 
 // TODO(github/primer#6827): remove when Primer ships an inline (in-text) avatar treatment
 export const InlineAvatar = ({className, size = 20, alt = '', ...props}: React.ComponentProps<typeof Avatar>) => (
-  <Avatar {...props} size={size} alt={alt} className={clsx(classes.InlineAvatar, className)} />
+  <Avatar {...mergeProps({size, alt, className: clsx(classes.InlineAvatar, className)}, props)} />
 )
 
 export const MONALISA_AVATAR = 'https://avatars.githubusercontent.com/u/583231?v=4'
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
index 156586378c9..6e99f9cb595 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.tsx
@@ -8,6 +8,7 @@ import type {CellAlignment} from '../DataTable/column'
 import {AriaStatus} from '../live-region'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 import classes from './ToggleSwitch.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /** The id of the DOM node that labels the switch */
@@ -140,7 +141,15 @@ 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
+      {...mergeProps(
+        {
+          className: clsx(classes.ToggleSwitch, className),
+          'data-status-label-position': statusLabelPosition,
+        },
+        rest,
+      )}
+    >
       <VisuallyHidden>
         <AriaStatus announceOnShow id={loadingLabelId}>
           {isLoadingLabelVisible && loadingLabel}
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index a94b0f009fa..7149ae323dc 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -30,6 +30,7 @@ import classes from './SelectPanel.module.css'
 import type {PositionSettings} from '@primer/behaviors'
 import type {FCWithSlotMarker, WithSlotMarker} from '../../utils/types'
 import {isSlot} from '../../utils/is-slot'
+import {mergeProps} from '../../utils/mergeProps'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -338,9 +339,13 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop
     return (
       <Button
         ref={anchorRef}
-        // eslint-disable-next-line react-hooks/refs
-        aria-label={`${(anchorRef as MutableRefObject<HTMLButtonElement>).current.textContent}, ${labelText}`}
-        {...inputProps}
+        {...mergeProps(
+          {
+            // eslint-disable-next-line react-hooks/refs
+            'aria-label': `${(anchorRef as MutableRefObject<HTMLButtonElement>).current.textContent}, ${labelText}`,
+          },
+          inputProps,
+        )}
       />
     )
   } else {
@@ -363,7 +368,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 {...mergeProps({className: clsx(classes.Header, className)}, props)}>
       <div
         className={classes.HeaderContent}
         data-description={description ? true : undefined}
@@ -451,28 +456,32 @@ const SelectPanelSearchInput: FCWithSlotMarker<TextInputProps> = ({
   return (
     <TextInput
       ref={inputRef}
-      block
-      leadingVisual={SearchIcon}
-      placeholder="Search"
-      trailingAction={
-        <TextInput.Action
-          icon={XCircleFillIcon}
-          aria-label="Clear"
-          tooltipDirection="w"
-          className={classes.ClearAction}
-          onClick={() => {
-            if (inputRef.current) inputRef.current.value = ''
-            if (typeof propsOnChange === 'function') {
-              // @ts-ignore TODO this is a hacky solution to clear
-              propsOnChange({target: inputRef.current, currentTarget: inputRef.current})
-            }
-          }}
-        />
-      }
-      className={clsx(classes.TextInput, className)}
-      onChange={internalOnChange}
-      onKeyDown={internalKeyDown}
-      {...props}
+      {...mergeProps(
+        {
+          block: true,
+          leadingVisual: SearchIcon,
+          placeholder: 'Search',
+          trailingAction: (
+            <TextInput.Action
+              icon={XCircleFillIcon}
+              aria-label="Clear"
+              tooltipDirection="w"
+              className={classes.ClearAction}
+              onClick={() => {
+                if (inputRef.current) inputRef.current.value = ''
+                if (typeof propsOnChange === 'function') {
+                  // @ts-ignore TODO this is a hacky solution to clear
+                  propsOnChange({target: inputRef.current, currentTarget: inputRef.current})
+                }
+              }}
+            />
+          ),
+          className: clsx(classes.TextInput, className),
+          onChange: internalOnChange,
+          onKeyDown: internalKeyDown,
+        },
+        props,
+      )}
     />
   )
 }
@@ -518,7 +527,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 {...mergeProps({type: 'button', size, block: true}, props)} />
 }
 
 const SecondaryLink: React.FC<LinkProps> = ({className, ...props}) => {
@@ -526,7 +535,18 @@ 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
+      {...mergeProps(
+        {
+          as: Link,
+          size,
+          variant: 'invisible',
+          block: true,
+          className: clsx(classes.SmallText, className),
+        },
+        props,
+      )}
+    >
       {props.children}
     </Button>
   )