Rename component StyledOcticon to Octicon (#3148)

* Rename component StyledOcticon to Octicon

* Update generated/components.json

* Create .changeset/swift-cows-rest.md

* Fix snapshot

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* refactor(CircleOcticon): Move files to folder, add storybook and e2e tests. (#3119)

* Reorganize CircleOcticon files, add story and e2e tests.

* Add index file.

* Update generated/components.json

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Refactor(Popover): move files into folder, add storybook and e2e tests. (#3135)

* Move files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* refactor(ButtonGroup): move files to folder. (#3117)

* Reorganize ButtonGroup component and stories.

* Update generated/components.json

* Add e2e tests.

* test(vrt): update snapshots

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Refactor(FilteredSearch): move files to folder, add storybook and e2e tests. (#3125)

* Move files to folder, add storybook and e2e tests.

* Add aria-label to TextInput, fix docs reference.

* Update generated/components.json

* test(vrt): update snapshots

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Fix generated components.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>

* Refactor(LabelGroup): add files to folder, add storybook and e2e tests. (#3131)

* Move files to folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* test(e2e): update ActionMenu e2e test to remove custom contrast rules (#3130)

* test(e2e): update ActionMenu e2e test to remove custom contrast rules

* test(vrt): update snapshots

* test: remove multiple sections test

* test(e2e): restore rule exception for ActionMenu

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127)

* use useIsomorphicLayoutEffect

* Create .changeset/fast-panthers-refuse.md

---------

Co-authored-by: Josh Black <joshblack@github.com>

* Bump @primer/primitives to `7.11.5` (#3120)

* npm install @primer/primitives@7.11.5

* Updating`theme-preval` snapshots

* Re-run

```
npm run build
npm run test -- -u
```

So that /themePreval.test.ts.snap also gets the new timestamp

* Update `theme-preval` snapshots docs

* Create .changeset/old-falcons-learn.md

* test(vrt): update snapshots

---------

Co-authored-by: simurai <simurai@users.noreply.github.com>

* Update RelativeTime stories (#3136)

* Update RelativeTime stories

* Update generated/components.json

---------

Co-authored-by: colebemis <colebemis@users.noreply.github.com>

* chore(deps-dev): bump @types/jest-axe from 3.5.3 to 3.5.5 (#3141)

Bumps [@types/jest-axe](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest-axe) from 3.5.3 to 3.5.5.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest-axe)

---
updated-dependencies:
- dependency-name: "@types/jest-axe"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @rollup/plugin-typescript from 11.0.0 to 11.1.0 (#3138)

Bumps [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/HEAD/packages/typescript) from 11.0.0 to 11.1.0.
- [Release notes](https://github.com/rollup/plugins/releases)
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/typescript/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/commonjs-v11.1.0/packages/typescript)

---
updated-dependencies:
- dependency-name: "@rollup/plugin-typescript"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3 (#3140)

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3

Bumps [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) from 2.0.2 to 2.0.3.
- [Release notes](https://github.com/primer/eslint-plugin-primer-react/releases)
- [Changelog](https://github.com/primer/eslint-plugin-primer-react/blob/main/CHANGELOG.md)
- [Commits](primer/eslint-plugin-primer-react@v2.0.2...v2.0.3)

---
updated-dependencies:
- dependency-name: eslint-plugin-primer-react
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore(eslint): remove unnecessary disable

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1 (#3139)

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1

Bumps [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) from 2.0.2 to 2.1.1.
- [Release notes](https://github.com/styled-components/babel-plugin-styled-components/releases)
- [Commits](styled-components/babel-plugin-styled-components@v2.0.2...v2.1.1)

---
updated-dependencies:
- dependency-name: babel-plugin-styled-components
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* test(snapshots): update snapshots

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(project): update project to use Node.js v18 LTS (#3133)

* chore(project): update project to use Node.js v18 LTS

* chore: add legacy openssl option for docs builds

* chore: update devcontainer image

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup (#3146)

* Update slots for checkbox group and radio group

* Update useSlot return type

* Update exports test

* Create .changeset/young-queens-notice.md

* Update comment indentation

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* docs(project): move code of conduct under .github (#3145)

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Add npm workspaces structure to primer/react (#3074)

* test(axe): default `color-contrast` check to false

* chore: update generate script to not conditionally disable contrast checks

* Create adr-015-npm-workspaces.md

* docs: update adr

* Update adr-015-npm-workspaces.md

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Update generated/components.json

* change styled_octicon key

* Update generated/components.json

* Update generated/components.json

* Update generated/components.json

* Octicon folder

* Fix package-lock

* Fix imports

* update path

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: Jeremy Neal <radglob@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>

.changeset/swift-cows-rest.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Rename component StyledOcticon to Octicon

codemods/__tests__/removeSystemProps.js

@@ -29,28 +29,28 @@ defineInlineTest(
   removeSystemProps,
   {},
   `
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, Octicon} from '@primer/components'
 import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
 
 const ClipboardCopy = ({value}) => <Button px={2}>
   {copied ? (
-    <StyledOcticon icon={CheckIcon} color="green.5" />
+    <Octicon icon={CheckIcon} color="green.5" />
   ) : (
-    <StyledOcticon icon={ClippyIcon} color="gray.5" />
+    <Octicon icon={ClippyIcon} color="gray.5" />
   )}
 </Button>
 
 `.trim(),
   `
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, Octicon} from '@primer/components'
 import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
 
 const ClipboardCopy = ({value}) => (
   <Button sx={{px: 2}}>
     {copied ? (
-      <StyledOcticon icon={CheckIcon} sx={{color: 'green.5'}} />
+      <Octicon icon={CheckIcon} sx={{color: 'green.5'}} />
     ) : (
-      <StyledOcticon icon={ClippyIcon} sx={{color: 'gray.5'}} />
+      <Octicon icon={ClippyIcon} sx={{color: 'gray.5'}} />
     )}
   </Button>
 )`.trim(),

codemods/removeSystemProps.js

@@ -171,7 +171,7 @@ const stylePropsMap = {
   SideNav: [...COMMON],
   Spinner: [...COMMON],
   StateLabel: [...COMMON],
-  StyledOcticon: [...COMMON],
+  Octicon: [...COMMON],
   SubNav: [...COMMON, ...FLEX],
   TabNav: [...COMMON],
   TabNavLink: [...COMMON, ...TYPOGRAPHY],

docs/content/Flash.mdx

@@ -32,7 +32,7 @@ Flash components with icons inside of them will automatically set the correct co
 
 ```jsx live
 <Flash variant="success">
-  <StyledOcticon icon={CheckIcon} />
+  <Octicon icon={CheckIcon} />
   Success!
 </Flash>
 ```

docs/content/Header.mdx

@@ -18,7 +18,7 @@ All items directly under the Header component should be a `Header.Item` componen
 <Header>
   <Header.Item>
     <Header.Link href="#" fontSize={2}>
-      <StyledOcticon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
+      <Octicon icon={MarkGithubIcon} size={32} sx={{mr: 2}} />
       <span>GitHub</span>
     </Header.Link>
   </Header.Item>

docs/content/StyledOcticon.mdx → docs/content/Octicon.mdx

@@ -1,19 +1,19 @@
 ---
-description: Use StyledOcticon to render an Octicon as a component.
-title: StyledOcticon
+description: Use Octicon to render an Octicon as a component.
+title: Octicon
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/StyledOcticon/StyledOcticon.tsx
-componentId: styled_octicon
+source: https://github.com/primer/react/blob/main/src/Octicon/Octicon.tsx
+componentId: octicon
 ---
 
-import data from '../../src/StyledOcticon/StyledOcticon.docs.json'
+import data from '../../src/Octicon/Octicon.docs.json'
 
 ## Example
 
 ```jsx live
 <>
-  <StyledOcticon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
-  <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
+  <Octicon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
+  <Octicon icon={XIcon} size={32} color="danger.fg" />
 </>
 ```
 

docs/content/Timeline.mdx

@@ -16,7 +16,7 @@ The Timeline.Item component is used to display items on a vertical timeline, con
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge>
-      <StyledOcticon icon={FlameIcon} />
+      <Octicon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>
       <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
@@ -41,7 +41,7 @@ The default Timeline.Badge color is dark text on a light grey background.
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge>
-      <StyledOcticon icon={FlameIcon} />
+      <Octicon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>Default badge color</Timeline.Body>
   </Timeline.Item>
@@ -51,25 +51,25 @@ The default Timeline.Badge color is dark text on a light grey background.
 ### Adding color to a Badge
 
 To have color variants, use the `bg` prop on the `Timeline.Badge`. If an icon is being used, set the `color` prop
-of the child `StyledOcticon` if necessary.
+of the child `Octicon` if necessary.
 
 ```jsx live
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
+      <Octicon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
+      <Octicon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
+      <Octicon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
   </Timeline.Item>
@@ -84,13 +84,13 @@ Timeline has a condensed prop that will reduce the vertical padding and remove t
 <Timeline>
   <Timeline.Item condensed>
     <Timeline.Badge>
-      <StyledOcticon icon={GitCommitIcon} />
+      <Octicon icon={GitCommitIcon} />
     </Timeline.Badge>
     <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item condensed>
     <Timeline.Badge>
-      <StyledOcticon icon={GitCommitIcon} />
+      <Octicon icon={GitCommitIcon} />
     </Timeline.Badge>
     <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
   </Timeline.Item>
@@ -105,14 +105,14 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
 <Timeline>
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
+      <Octicon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Break />
   <Timeline.Item>
     <Timeline.Badge sx={{bg: 'success.emphasis'}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
+      <Octicon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>

docs/content/TreeView.mdx

@@ -34,7 +34,7 @@ import {TreeView} from '@primer/react'
             </TreeView.LeadingVisual>
             Avatar.tsx
             <TreeView.TrailingVisual>
-              <StyledOcticon icon={DiffAddedIcon} color="success.fg" aria-label="added" />
+              <Octicon icon={DiffAddedIcon} color="success.fg" aria-label="added" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
           <TreeView.Item id="src/Button.tsx" current>
@@ -43,7 +43,7 @@ import {TreeView} from '@primer/react'
             </TreeView.LeadingVisual>
             Button.tsx
             <TreeView.TrailingVisual>
-              <StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
+              <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
             </TreeView.TrailingVisual>
           </TreeView.Item>
         </TreeView.SubTree>
@@ -54,7 +54,7 @@ import {TreeView} from '@primer/react'
         </TreeView.LeadingVisual>
         package.json
         <TreeView.TrailingVisual>
-          <StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
+          <Octicon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
         </TreeView.TrailingVisual>
       </TreeView.Item>
     </TreeView>

docs/content/deprecated/SideNav.md

@@ -69,12 +69,12 @@ Add the `variant='full'` prop to a `SideNav.Link` to spread child elements acros
     <Text>With an avatar</Text>
   </SideNav.Link>
   <SideNav.Link href="#url">
-    <StyledOcticon sx={{mr: 2}} size={16} icon={ZapIcon} />
+    <Octicon sx={{mr: 2}} size={16} icon={ZapIcon} />
     <Text>With an Octicon</Text>
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full" selected>
     <Text>With a status icon</Text>
-    <StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
+    <Octicon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
   </SideNav.Link>
   <SideNav.Link href="#url" variant="full">
     <Text>With a label</Text>
@@ -142,11 +142,11 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props
 ```jsx live
 <SideNav bordered maxWidth={360}>
   <SideNav.Link href="#url">
-    <StyledOcticon size={16} icon={PersonIcon} />
+    <Octicon size={16} icon={PersonIcon} />
     <Text>Account</Text>
   </SideNav.Link>
   <SideNav.Link href="#url" selected>
-    <StyledOcticon mr={2} size={16} icon={SmileyIcon} />
+    <Octicon mr={2} size={16} icon={SmileyIcon} />
     <Text>Profile</Text>
   </SideNav.Link>
 
@@ -163,7 +163,7 @@ It can also appear nested, as a sub navigation. Use margin/padding [System Props
   </SideNav>
 
   <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={MailIcon} />
+    <Octicon mr={2} size={16} icon={MailIcon} />
     <Text>Emails</Text>
   </SideNav.Link>
 </SideNav>

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -128,8 +128,8 @@
       url: /SplitPageLayout
     - title: StateLabel
       url: /StateLabel
-    - title: StyledOcticon
-      url: /StyledOcticon
+    - title: Octicon
+      url: /Octicon
     - title: SubNav
       url: /SubNav
     - title: ToggleSwitch

docs/src/component-checklist.js

@@ -1,4 +1,4 @@
-import {Box, StyledOcticon, Link, Text} from '@primer/react'
+import {Box, Octicon, Link, Text} from '@primer/react'
 import {H3} from '@primer/gatsby-theme-doctocat/src/components/heading'
 import {CheckCircleFillIcon, CircleIcon, SkipIcon} from '@primer/octicons-react'
 import React from 'react'
@@ -88,11 +88,11 @@ Checklist.Item = ({checked, children}) => {
     <Box as="li" display="grid" gridTemplateColumns="auto 1fr" gridGap={2} sx={{listStyleType: 'none'}}>
       <Box height="24px" display="flex" alignItems="center">
         {checked ? (
-          <StyledOcticon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
+          <Octicon aria-label="Completed" icon={CheckCircleFillIcon} sx={{color: 'success.fg'}} />
         ) : checked === null ? (
-          <StyledOcticon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
+          <Octicon icon={SkipIcon} sx={{color: 'fg.subtle'}} />
         ) : (
-          <StyledOcticon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
+          <Octicon aria-label="To do" icon={CircleIcon} sx={{color: 'fg.subtle'}} />
         )}
       </Box>
       <Text color={checked === null ? 'fg.subtle' : 'fg.default'}>

docs/src/component-statuses.js

@@ -1,5 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {Link, Label, StyledOcticon} from '@primer/react'
+import {Link, Label, Octicon} from '@primer/react'
 import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label'
 import Table from '@primer/gatsby-theme-doctocat/src/components/table'
@@ -79,7 +79,7 @@ export function ComponentStatuses() {
                         borderColor: 'transparent',
                       }}
                     >
-                      <StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
+                      <Octicon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
                       Reviewed
                     </Label>
                   ) : (