diff --git a/.changeset/heavy-points-marry.md b/.changeset/heavy-points-marry.md
index 441a441f09f..e2ab675ccde 100644
--- a/.changeset/heavy-points-marry.md
+++ b/.changeset/heavy-points-marry.md
@@ -24,24 +24,36 @@ If you were using the `Label` component to render issue/PR labels, use the [Issu
 <td valign="top">
 
 ```jsx
-import {Label} from "@primer/react"
-
-<>
-  <Label outline>default</Label>
-  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
-</>
+import {Label} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      <Label outline>default</Label>
+      <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>
+        danger
+      </Label>
+    </>
+  )
+}
 ```
 
  </td>
 <td valign="top">
 
 ```jsx
-import {Label} from "@primer/react"
-
-<>
-  <Label>default</Label>
-  <Label size="small" variant="danger">danger</Label>
-</>
+import {Label} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      <Label>default</Label>
+      <Label size="small" variant="danger">
+        danger
+      </Label>
+    </>
+  )
+}
 ```
 
 </td>
diff --git a/.changeset/many-roses-hammer.md b/.changeset/many-roses-hammer.md
index af4480c795c..f7c3d5ae467 100644
--- a/.changeset/many-roses-hammer.md
+++ b/.changeset/many-roses-hammer.md
@@ -18,52 +18,40 @@ We now support a variant property which takes values `primary`, `invisible`, `ou
 </tr>
 <tr>
 <td valign="top">
-    
-```jsx
 
-import { ButtonPrimary, ButtonInvisible,
-ButtonOutline, ButtonDanger }
-from '@primer/react'
-
-<>
-  <ButtonPrimary> 
-    Primary Button 
-  </ButtonPrimary>
-  <ButtonInvisible>
-    Invisible Button 
-  </ButtonInvisible>
-  <ButtonOutline>
-    Outline Button
-  </ButtonOutline>
-  <ButtonDanger>
-    Danger Button
-  </ButtonDanger>
-</>
+```jsx
+import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      <ButtonPrimary>Primary Button</ButtonPrimary>
+      <ButtonInvisible>Invisible Button</ButtonInvisible>
+      <ButtonOutline>Outline Button</ButtonOutline>
+      <ButtonDanger>Danger Button</ButtonDanger>
+    </>
+  )
+}
 ```
-    
+
  </td>
 <td valign="top">
-    
-```jsx
 
-import { Button } from '@primer/react'
-
-<>
-  <Button variant="primary">
-    Primary Button
-  </Button>
-  <Button variant="invisible">
-    Invisible Button
-  </Button>
-  <Button variant="outline">
-    Outline Button
-  </Button>
-  <Button variant="danger">
-    Danger Button
-  </Button>
-</>
+```jsx
+import {Button} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      <Button variant="primary">Primary Button</Button>
+      <Button variant="invisible">Invisible Button</Button>
+      <Button variant="outline">Outline Button</Button>
+      <Button variant="danger">Danger Button</Button>
+    </>
+  )
+}
 ```
-    
+
 </td>
 </tr>
 </table>
diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md
index 5ce25e22c6b..3c8a546b471 100644
--- a/.changeset/nervous-pets-sleep.md
+++ b/.changeset/nervous-pets-sleep.md
@@ -4,9 +4,9 @@
 
 <br />
 
-### ChoiceFieldset and ChoiceFieldset
+### ChoiceFieldset
 
-The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`.
+The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component.
 
 `CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology.
 
@@ -18,131 +18,96 @@ The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldse
 <td valign="top">
 
 ```jsx
-import {ChoiceFieldset} from "@primer/react"
-
-<>
-  // Multi-select
-  <ChoiceFieldset>
-    <ChoiceFieldset.Legend>
-      Preferred Primer component interface
-    </ChoiceFieldset.Legend>
-
-    <ChoiceFieldset.List selectionVariant="multiple">
-      <ChoiceFieldset.Item value="figma">
-        Figma library
-      </ChoiceFieldset.Item>
-      <ChoiceFieldset.Item value="css">
-        Primer CSS
-      </ChoiceFieldset.Item>
-      <ChoiceFieldset.Item value="react">
-        Primer React components
-      </ChoiceFieldset.Item>
-      <ChoiceFieldset.Item value="viewcomponents">
-        Primer ViewComponents
-      </ChoiceFieldset.Item>
-    </ChoiceFieldset.List>
-  </ChoiceFieldset>
-
-  // Single select
-  <ChoiceFieldset>
-    <ChoiceFieldset.Legend>
-      Preferred Primer component interface
-    </ChoiceFieldset.Legend>
-
-    <ChoiceFieldset.List>
-      <ChoiceFieldset.Item value="figma">
-        Figma library
-      </ChoiceFieldset.Item>
-      <ChoiceFieldset.Item value="css">
-        Primer CSS
-      </ChoiceFieldset.Item>
-      <ChoiceFieldset.Item value="react">
-        Primer React components
-      </ChoiceFieldset.Item>
-      <ChoiceFieldset.Item value="viewcomponents">
-        Primer ViewComponents
-      </ChoiceFieldset.Item>
-    </ChoiceFieldset.List>
-  </ChoiceFieldset>
-</>
-
+import {ChoiceFieldset} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      {/* Multi-select */}
+      <ChoiceFieldset>
+        <ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
+        <ChoiceFieldset.List selectionVariant="multiple">
+          <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
+          <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
+          <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
+          <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
+        </ChoiceFieldset.List>
+      </ChoiceFieldset>
+
+      {/* Single select */}
+      <ChoiceFieldset>
+        <ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
+        <ChoiceFieldset.List>
+          <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
+          <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
+          <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
+          <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
+        </ChoiceFieldset.List>
+      </ChoiceFieldset>
+    </>
+  )
+}
 ```
 
 </td>
 <td valign="top">
 
 ```jsx
-import {FormGroup, Checkbox} from "@primer/react"
-
-<>
-  // Multi-select
-  <CheckboxGroup>
-    <CheckboxGroup.Label>
-      Preferred Primer component interface
-    </CheckboxGroup.Label>
-    <FormControl>
-      <Checkbox value="figma" />
-      <FormControl.Label>Figma</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Checkbox value="css" />
-      <FormControl.Label>CSS</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Checkbox value="react" />
-      <FormControl.Label>Primer React components</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Checkbox value="viewcomponents" />
-      <FormControl.Label>Primer ViewComponents</FormControl.Label>
-    </FormControl>
-  </CheckboxGroup>
-
-  // Single select
-  <RadioGroup name="preferred-primer">
-    <RadioGroup.Label>
-      Preferred Primer component interface
-    </RadioGroup.Label>
-    <FormControl>
-      <Radio value="figma" />
-      <FormControl.Label>Figma</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Radio value="css" />
-      <FormControl.Label>CSS</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Radio value="react" />
-      <FormControl.Label>Primer React components</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Radio value="viewcomponents" />
-      <FormControl.Label>Primer ViewComponents</FormControl.Label>
-    </FormControl>
-  </RadioGroup>
-</>
+import {CheckboxGroup, RadioGroup, FormControl Checkbox, Radio} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      {/* Multi-select */}
+      <CheckboxGroup>
+        <CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label>
+        <FormControl>
+          <Checkbox value="figma" />
+          <FormControl.Label>Figma</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Checkbox value="css" />
+          <FormControl.Label>CSS</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Checkbox value="react" />
+          <FormControl.Label>Primer React components</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Checkbox value="viewcomponents" />
+          <FormControl.Label>Primer ViewComponents</FormControl.Label>
+        </FormControl>
+      </CheckboxGroup>
+
+      {/* Single select */}
+      <RadioGroup name="preferred-primer">
+        <RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label>
+        <FormControl>
+          <Radio value="figma" />
+          <FormControl.Label>Figma</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Radio value="css" />
+          <FormControl.Label>CSS</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Radio value="react" />
+          <FormControl.Label>Primer React components</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Radio value="viewcomponents" />
+          <FormControl.Label>Primer ViewComponents</FormControl.Label>
+        </FormControl>
+      </RadioGroup>
+    </>
+  )
+}
 ```
 
-</td>
-</tr>
-</table>
-<table style="display: table">
-<tr><th>Migration steps to CheckboxGroup and RadioGroup</th></tr>
-<tr>
-<td>
-
-<strong>Upgrade to the new</strong> `CheckboxGroup` and `RadioGroup` components by referring to the examples in our documentation: [CheckboxGroup](https://primer.style/react/CheckboxGroup), [RadioGroup](https://primer.style/react/RadioGroup).
-
-or
-
-<strong>Continue using the deprecated</strong> `ChoiceFieldset` component :
+To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
 ```js
-import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements
+import {ChoiceFieldset} from '@primer/react/deprecated'
 ```
 
-ChoiceFieldset codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-choicefieldset.js
-
-</td>
-</tr>
-</table>
+You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md
index 9a3198a0de7..d946f2f815f 100644
--- a/.changeset/olive-bears-act.md
+++ b/.changeset/olive-bears-act.md
@@ -16,51 +16,51 @@ The `FormControl` component is replacing the `FormGroup`, `InputField`, and `Cho
 <td valign="top">
 
 ```jsx
-import {FormControl, Checkbox, TextInput} from "@primer/react"
-
-<>
-  <FormGroup>
-    <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
-    <TextInput id="example-text" />
-  </FormGroup>
-
-  // OR
-
-  <InputField>
-    <InputField.Label>Example text</InputField.Label>
-    <TextInput />
-  </InputField>
-
-  // OR
-
-  <ChoiceInputField>
-    <ChoiceInputField.Label>Example text</ChoiceInputField.Label>
-    <Checkbox />
-  </ChoiceInputField>
-</>
-
+import {FormControl, Checkbox, TextInput} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      <FormGroup>
+        <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
+        <TextInput id="example-text" />
+      </FormGroup>
+      {/* OR */}
+      <InputField>
+        <InputField.Label>Example text</InputField.Label>
+        <TextInput />
+      </InputField>
+      {/* OR */}
+      <ChoiceInputField>
+        <ChoiceInputField.Label>Example text</ChoiceInputField.Label>
+        <Checkbox />
+      </ChoiceInputField>
+    </>
+  )
+}
 ```
 
 </td>
 <td valign="top">
 
 ```jsx
-import {FormGroup, TextInput} from "@primer/react"
-
-<>
-  <FormControl>
-    <FormControl.Label>Example text</FormControl.Label>
-    <TextInput />
-  </FormControl>
-
-  // OR
-
-  <FormControl>
-    <FormControl.Label>Example text</FormControl.Label>
-    <Checkbox />
-  </FormControl>
-</>
-
+import {FormGroup, TextInput} from '@primer/react'
+
+function Example() {
+  return (
+    <>
+      <FormControl>
+        <FormControl.Label>Example text</FormControl.Label>
+        <TextInput />
+      </FormControl>
+      {/* OR */}
+      <FormControl>
+        <FormControl.Label>Example text</FormControl.Label>
+        <Checkbox />
+      </FormControl>
+    </>
+  )
+}
 ```
 
 </td>
@@ -69,49 +69,42 @@ import {FormGroup, TextInput} from "@primer/react"
 <td valign="top">
 
 ```jsx
-import {InputField} from '@primer/react'
-<InputField>
-  <InputField.Label>Example text</InputField.Label>
-  <TextInput />
-</InputField>
+import {InputField, TextInput} from '@primer/react'
+
+function Example() {
+  return (
+    <InputField>
+      <InputField.Label>Example text</InputField.Label>
+      <TextInput />
+    </InputField>
+  )
+}
 ```
 
 </td>
 <td valign="top">
 
 ```jsx
-import {FormControl} from '@primer/react'
-<FormControl>
-  <FormControl.Label>Example Text</FormControl.Label>
-  <TextInput />
-</FormControl>
+import {FormControl, TextInput} from '@primer/react'
+
+function Example() {
+  return (
+    <FormControl>
+      <FormControl.Label>Example text</FormControl.Label>
+      <TextInput />
+    </FormControl>
+  )
+}
 ```
 
 </td>
 </tr>
 </table>
 
-<table style="display: table">
-<tr><th>Migration steps to FormControl</th></tr>
-<tr>
-<td>
-
-<strong>Upgrade to the new</strong> `FormControl` component by referring to the [examples in our documentation](https://primer.style/react/FormControl).
-
-or
-
-<strong>Continue using the deprecated</strong> `FormGroup`, `ChoiceInputField` or `InputField` :
+To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
 ```js
-import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated' // change your import statements
+import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated'
 ```
 
-Codemods:
-
-- InputField codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-inputfield.js
-- ChoiceInputField https://github.com/primer/react-migrate/blob/main/src/use-deprecated-choiceinputfield.js
-- FormGroup codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-formgroup.js
-
-</td>
-</tr>
-</table>
+You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.