diff --git a/.changeset/metal-lamps-appear.md b/.changeset/metal-lamps-appear.md
new file mode 100644
index 00000000000..e2de2388f34
--- /dev/null
+++ b/.changeset/metal-lamps-appear.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Deprecate AvatarPair component - move to @primer/react/deprecated
diff --git a/e2e/components/AvatarPair.test.ts b/e2e/components/AvatarPair.test.ts
deleted file mode 100644
index 18b6a5275c2..00000000000
--- a/e2e/components/AvatarPair.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import {test, expect} from '@playwright/test'
-import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
-
-const stories = [
- {
- title: 'Default',
- id: 'components-avatarpair--default',
- },
- {
- title: 'Parent Circle',
- id: 'components-avatarpair-features--parent-circle',
- },
- {
- title: 'Parent Square',
- id: 'components-avatarpair-features--parent-square',
- },
-] as const
-
-test.describe('AvatarPair', () => {
- for (const story of stories) {
- test.describe(story.title, () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: story.id,
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- await expect(page).toHaveScreenshot(`AvatarPair.${story.title}.${theme}.png`)
- })
- })
- }
- })
- }
-})
diff --git a/e2e/components/Skeletons.test.ts b/e2e/components/Skeletons.test.ts
index 13ed37118f6..15829309967 100644
--- a/e2e/components/Skeletons.test.ts
+++ b/e2e/components/Skeletons.test.ts
@@ -13,11 +13,7 @@ const stories = [
id: 'components-skeleton-skeletonavatar-features--in-a-stack',
disableAnimations: true,
},
- {
- title: 'SkeletonAvatar In An Avatar Pair',
- id: 'components-skeleton-skeletonavatar-features--in-an-avatar-pair',
- disableAnimations: true,
- },
+
{
title: 'SkeletonAvatar Size',
id: 'components-skeleton-skeletonavatar-features--size',
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json b/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json
index 482fe22ff05..4f2709cc92a 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json
@@ -18,9 +18,6 @@
},
{
"id": "components-skeleton-skeletonavatar-features--in-a-stack"
- },
- {
- "id": "components-skeleton-skeletonavatar-features--in-an-avatar-pair"
}
],
"importPath": "@primer/react/experimental",
diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx
index 948ca820948..0074abd34e3 100644
--- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx
+++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx
@@ -2,7 +2,6 @@ import type {Meta} from '@storybook/react-vite'
import type {ComponentProps} from '../utils/types'
import {SkeletonAvatar} from './SkeletonAvatar'
import AvatarStack from '../AvatarStack'
-import AvatarPair from '../AvatarPair'
export default {
title: 'Components/Skeleton/SkeletonAvatar/Features',
@@ -51,10 +50,3 @@ export const InAStack = () => (
)
-
-export const InAnAvatarPair = () => (
-
-
-
-
-)
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 63e28024ae9..3360c757d91 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -232,6 +232,8 @@ exports[`@primer/react/deprecated > should not update exports without a semver c
"type ActionListProps",
"ActionMenu",
"type ActionMenuProps",
+ "AvatarPair",
+ "type AvatarPairProps",
"Dialog",
"type DialogHeaderProps",
"type DialogProps",
diff --git a/packages/react/src/__tests__/storybook.test.tsx b/packages/react/src/__tests__/storybook.test.tsx
index d2cf7e2f41f..f8afa6c5691 100644
--- a/packages/react/src/__tests__/storybook.test.tsx
+++ b/packages/react/src/__tests__/storybook.test.tsx
@@ -15,7 +15,6 @@ const allowlist = [
'Autocomplete',
'Avatar',
'AvatarStack',
- 'AvatarPair',
'Breadcrumbs',
'BranchName',
'Blankslate',
diff --git a/packages/react/src/AvatarPair/AvatarPair.docs.json b/packages/react/src/deprecated/AvatarPair/AvatarPair.docs.json
similarity index 100%
rename from packages/react/src/AvatarPair/AvatarPair.docs.json
rename to packages/react/src/deprecated/AvatarPair/AvatarPair.docs.json
diff --git a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.features.stories.tsx
similarity index 95%
rename from packages/react/src/AvatarPair/AvatarPair.features.stories.tsx
rename to packages/react/src/deprecated/AvatarPair/AvatarPair.features.stories.tsx
index 123464572b5..d73dcc61d9d 100644
--- a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx
+++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.features.stories.tsx
@@ -1,6 +1,6 @@
import type {Meta} from '@storybook/react-vite'
import AvatarPair from './AvatarPair'
-import Avatar from '../Avatar'
+import Avatar from '../../Avatar'
export default {
title: 'Components/AvatarPair/Features',
diff --git a/packages/react/src/AvatarPair/AvatarPair.figma.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.figma.tsx
similarity index 87%
rename from packages/react/src/AvatarPair/AvatarPair.figma.tsx
rename to packages/react/src/deprecated/AvatarPair/AvatarPair.figma.tsx
index 0ab01660512..0fbd00deafd 100644
--- a/packages/react/src/AvatarPair/AvatarPair.figma.tsx
+++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.figma.tsx
@@ -1,4 +1,4 @@
-import {AvatarPair} from '../../src'
+import AvatarPair from './AvatarPair'
import figma from '@figma/code-connect'
figma.connect(AvatarPair, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=13006-42855', {
diff --git a/packages/react/src/AvatarPair/AvatarPair.module.css b/packages/react/src/deprecated/AvatarPair/AvatarPair.module.css
similarity index 100%
rename from packages/react/src/AvatarPair/AvatarPair.module.css
rename to packages/react/src/deprecated/AvatarPair/AvatarPair.module.css
diff --git a/packages/react/src/AvatarPair/AvatarPair.stories.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.stories.tsx
similarity index 92%
rename from packages/react/src/AvatarPair/AvatarPair.stories.tsx
rename to packages/react/src/deprecated/AvatarPair/AvatarPair.stories.tsx
index 6ee78f17bfa..e52b8b542c2 100644
--- a/packages/react/src/AvatarPair/AvatarPair.stories.tsx
+++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.stories.tsx
@@ -1,6 +1,6 @@
import type {Meta} from '@storybook/react-vite'
import AvatarPair from './AvatarPair'
-import Avatar from '../Avatar'
+import Avatar from '../../Avatar'
export default {
title: 'Components/AvatarPair',
diff --git a/packages/react/src/AvatarPair/AvatarPair.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.tsx
similarity index 69%
rename from packages/react/src/AvatarPair/AvatarPair.tsx
rename to packages/react/src/deprecated/AvatarPair/AvatarPair.tsx
index 2cde8ece710..075e20330fa 100644
--- a/packages/react/src/AvatarPair/AvatarPair.tsx
+++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.tsx
@@ -1,12 +1,18 @@
import React, {type HTMLProps} from 'react'
-import type {AvatarProps} from '../Avatar'
-import Avatar from '../Avatar'
-import {SkeletonAvatar} from '../SkeletonAvatar'
+import type {AvatarProps} from '../../Avatar'
+import Avatar from '../../Avatar'
+import {SkeletonAvatar} from '../../SkeletonAvatar'
import classes from './AvatarPair.module.css'
import {clsx} from 'clsx'
+/**
+ * @deprecated AvatarPair is deprecated. Please see https://github.com/github/primer/issues/5533 for migration guidance.
+ */
export type AvatarPairProps = HTMLProps
+/**
+ * @deprecated AvatarPair is deprecated. Please see https://github.com/github/primer/issues/5533 for migration guidance.
+ */
const AvatarPair = ({children, className, ...rest}: AvatarPairProps) => {
const avatars = React.Children.map(children, (child, i) => {
if (!React.isValidElement(child)) {
diff --git a/packages/react/src/AvatarPair/index.ts b/packages/react/src/deprecated/AvatarPair/index.ts
similarity index 100%
rename from packages/react/src/AvatarPair/index.ts
rename to packages/react/src/deprecated/AvatarPair/index.ts
diff --git a/packages/react/src/deprecated/index.ts b/packages/react/src/deprecated/index.ts
index c0df1270469..ea5ddc53fd3 100644
--- a/packages/react/src/deprecated/index.ts
+++ b/packages/react/src/deprecated/index.ts
@@ -42,3 +42,8 @@ export type {TabNavProps, TabNavLinkProps} from '../TabNav'
export {default as Tooltip} from '../Tooltip/Tooltip'
export type {TooltipProps} from '../Tooltip/Tooltip'
// end of v37.0.0
+
+// Deprecated in v37.31.0 - https://github.com/github/primer/issues/5533
+export {default as AvatarPair} from './AvatarPair'
+export type {AvatarPairProps} from './AvatarPair'
+// end of v37.31.0
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 6e66bf9e097..1200cc1a7d8 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -72,10 +72,11 @@ export {default as Autocomplete} from './Autocomplete'
export type {AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps} from './Autocomplete'
export {default as Avatar} from './Avatar'
export type {AvatarProps} from './Avatar'
-export {default as AvatarPair} from './AvatarPair'
-export type {AvatarPairProps} from './AvatarPair'
export {default as AvatarStack} from './AvatarStack'
export type {AvatarStackProps} from './AvatarStack'
+// AvatarPair is deprecated. Use Avatar component instead. See https://github.com/github/primer/issues/5533
+export {default as AvatarPair} from './deprecated/AvatarPair'
+export type {AvatarPairProps} from './deprecated/AvatarPair'
export {default as BranchName} from './BranchName'
export type {BranchNameProps} from './BranchName'
export {default as Breadcrumbs, Breadcrumb} from './Breadcrumbs'
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 716ce98b30d..82437e82c14 100755
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -184,25 +184,7 @@ const components = new Map([
],
},
],
- [
- 'AvatarPair',
- {
- stories: [
- {
- id: 'components-avatarpair--default',
- name: 'Default',
- },
- {
- id: 'components-avatarpair-features--parent-circle',
- name: 'Parent Circle',
- },
- {
- id: 'components-avatarpair-features--parent-square',
- name: 'Parent Square',
- },
- ],
- },
- ],
+
[
'BranchName',
{