diff --git a/.changeset/heavy-points-marry.md b/.changeset/heavy-points-marry.md
index 18821003286..441a441f09f 100644
--- a/.changeset/heavy-points-marry.md
+++ b/.changeset/heavy-points-marry.md
@@ -26,8 +26,10 @@ If you were using the `Label` component to render issue/PR labels, use the [Issu
 ```jsx
 import {Label} from "@primer/react"
 
-<Label outline>default</Label>
-<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
+<>
+  <Label outline>default</Label>
+  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
+</>
 ```
 
  </td>
@@ -36,8 +38,10 @@ import {Label} from "@primer/react"
 ```jsx
 import {Label} from "@primer/react"
 
-<Label>default</Label>
-<Label size="small" variant="danger">danger</Label>
+<>
+  <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 6a0aebbc653..af4480c795c 100644
--- a/.changeset/many-roses-hammer.md
+++ b/.changeset/many-roses-hammer.md
@@ -25,18 +25,20 @@ import { ButtonPrimary, ButtonInvisible,
 ButtonOutline, ButtonDanger }
 from '@primer/react'
 
-<ButtonPrimary> 
+<>
+  <ButtonPrimary> 
     Primary Button 
-</ButtonPrimary>
-<ButtonInvisible>
+  </ButtonPrimary>
+  <ButtonInvisible>
     Invisible Button 
-</ButtonInvisible>
-<ButtonOutline>
+  </ButtonInvisible>
+  <ButtonOutline>
     Outline Button
-</ButtonOutline>
-<ButtonDanger>
+  </ButtonOutline>
+  <ButtonDanger>
     Danger Button
-</ButtonDanger>
+  </ButtonDanger>
+</>
 ```
     
  </td>
@@ -46,18 +48,20 @@ from '@primer/react'
 
 import { Button } from '@primer/react'
 
-<Button variant="primary">
+<>
+  <Button variant="primary">
     Primary Button
-</Button>
-<Button variant="invisible">
+  </Button>
+  <Button variant="invisible">
     Invisible Button
-</Button>
-<Button variant="outline">
+  </Button>
+  <Button variant="outline">
     Outline Button
-</Button>
-<Button variant="danger">
+  </Button>
+  <Button variant="danger">
     Danger Button
-</Button>
+  </Button>
+</>
 ```
     
 </td>
diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md
index f503758a570..5ce25e22c6b 100644
--- a/.changeset/nervous-pets-sleep.md
+++ b/.changeset/nervous-pets-sleep.md
@@ -20,49 +20,51 @@ The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldse
 ```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>
+<>
+  // 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>
+</>
 
 ```
 
@@ -72,51 +74,53 @@ import {ChoiceFieldset} from "@primer/react"
 ```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>
+<>
+  // 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>
diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md
index 94d16738b24..9a3198a0de7 100644
--- a/.changeset/olive-bears-act.md
+++ b/.changeset/olive-bears-act.md
@@ -18,25 +18,26 @@ The `FormControl` component is replacing the `FormGroup`, `InputField`, and `Cho
 ```jsx
 import {FormControl, Checkbox, TextInput} from "@primer/react"
 
+<>
+  <FormGroup>
+    <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
+    <TextInput id="example-text" />
+  </FormGroup>
 
-<FormGroup>
-  <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
-  <TextInput id="example-text" />
-</FormGroup>
+  // OR
 
-// OR
+  <InputField>
+    <InputField.Label>Example text</InputField.Label>
+    <TextInput />
+  </InputField>
 
-<InputField>
-  <InputField.Label>Example text</InputField.Label>
-  <TextInput />
-</InputField>
-
-// OR
+  // OR
 
-<ChoiceInputField>
-  <ChoiceInputField.Label>Example text</ChoiceInputField.Label>
-  <Checkbox />
-</ChoiceInputField>
+  <ChoiceInputField>
+    <ChoiceInputField.Label>Example text</ChoiceInputField.Label>
+    <Checkbox />
+  </ChoiceInputField>
+</>
 
 ```
 
@@ -46,17 +47,19 @@ import {FormControl, Checkbox, TextInput} from "@primer/react"
 ```jsx
 import {FormGroup, TextInput} from "@primer/react"
 
-<FormControl>
-  <FormControl.Label>Example text</FormControl.Label>
-  <TextInput />
-</FormControl>
+<>
+  <FormControl>
+    <FormControl.Label>Example text</FormControl.Label>
+    <TextInput />
+  </FormControl>
 
-// OR
+  // OR
 
-<FormControl>
-  <FormControl.Label>Example text</FormControl.Label>
-  <Checkbox />
-</FormControl>
+  <FormControl>
+    <FormControl.Label>Example text</FormControl.Label>
+    <Checkbox />
+  </FormControl>
+</>
 
 ```