From 2023938b91d7f1f7875e9cf728150a0a67510585 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 15:12:34 +0000
Subject: [PATCH 1/2] Version Packages

---
 .changeset/lovely-shirts-hope.md    |   5 -
 .changeset/odd-ways-jog.md          |   5 -
 .changeset/shiny-chefs-matter.md    |   5 -
 .changeset/spotty-rice-explain.md   |   5 -
 examples/app-router/package.json    |   2 +-
 examples/codesandbox/package.json   |   2 +-
 examples/consumer-test/package.json |   2 +-
 examples/theming/package.json       |   2 +-
 packages/react/CHANGELOG.md         | 283 +++++++++++++++++-----------
 packages/react/package.json         |   2 +-
 10 files changed, 182 insertions(+), 131 deletions(-)
 delete mode 100644 .changeset/lovely-shirts-hope.md
 delete mode 100644 .changeset/odd-ways-jog.md
 delete mode 100644 .changeset/shiny-chefs-matter.md
 delete mode 100644 .changeset/spotty-rice-explain.md

diff --git a/.changeset/lovely-shirts-hope.md b/.changeset/lovely-shirts-hope.md
deleted file mode 100644
index d628f02357e..00000000000
--- a/.changeset/lovely-shirts-hope.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': minor
----
-
-TreeView: Adds indication of no nodes in a tree item, allows for `aria-expanded even if the item is empty.
diff --git a/.changeset/odd-ways-jog.md b/.changeset/odd-ways-jog.md
deleted file mode 100644
index 80d1bc5171a..00000000000
--- a/.changeset/odd-ways-jog.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": patch
----
-
-chore(Banner): Move Banner CSS module flag from staff to ga
diff --git a/.changeset/shiny-chefs-matter.md b/.changeset/shiny-chefs-matter.md
deleted file mode 100644
index dc0ccd0325b..00000000000
--- a/.changeset/shiny-chefs-matter.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@primer/react": minor
----
-
-Update `SubNav` component to use CSS modules behind the feature flag primer_react_css_modules_team
diff --git a/.changeset/spotty-rice-explain.md b/.changeset/spotty-rice-explain.md
deleted file mode 100644
index 1cca9ab2190..00000000000
--- a/.changeset/spotty-rice-explain.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': patch
----
-
-Allow primitives dep to be if version 9 OR 10
diff --git a/examples/app-router/package.json b/examples/app-router/package.json
index 25fe7dcc5c8..faa75d603b7 100644
--- a/examples/app-router/package.json
+++ b/examples/app-router/package.json
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
index 95f9c60febd..92be01382f1 100644
--- a/examples/codesandbox/package.json
+++ b/examples/codesandbox/package.json
@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",
diff --git a/examples/consumer-test/package.json b/examples/consumer-test/package.json
index 848d2f117ff..802eb212402 100644
--- a/examples/consumer-test/package.json
+++ b/examples/consumer-test/package.json
@@ -9,7 +9,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.11",
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "^5.3.11",
diff --git a/examples/theming/package.json b/examples/theming/package.json
index 1a08ef0eb92..4e8df949a62 100644
--- a/examples/theming/package.json
+++ b/examples/theming/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.9.0",
-    "@primer/react": "37.1.0",
+    "@primer/react": "37.2.0",
     "clsx": "^1.2.1",
     "next": "^14.2.10",
     "react": "^18.3.1",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 9766e813765..91ce7c14bdb 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @primer/react
 
+## 37.2.0
+
+### Minor Changes
+
+- [#5168](https://github.com/primer/react/pull/5168) [`b9749d4`](https://github.com/primer/react/commit/b9749d4efccf17b4aa669231a57df55333497ca2) Thanks [@TylerJDev](https://github.com/TylerJDev)! - TreeView: Adds indication of no nodes in a tree item, allows for `aria-expanded even if the item is empty.
+
+- [#5202](https://github.com/primer/react/pull/5202) [`293c574`](https://github.com/primer/react/commit/293c574a25d49bb52a2f5c17e4c54b1b1b598ddc) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - Update `SubNav` component to use CSS modules behind the feature flag primer_react_css_modules_team
+
+### Patch Changes
+
+- [#5225](https://github.com/primer/react/pull/5225) [`e732591`](https://github.com/primer/react/commit/e732591e939e5a86dc5ce2ce2da25388177b6a54) Thanks [@jonrohan](https://github.com/jonrohan)! - chore(Banner): Move Banner CSS module flag from staff to ga
+
+- [#5177](https://github.com/primer/react/pull/5177) [`26b54d8`](https://github.com/primer/react/commit/26b54d8a58e83e50127b5c04ac26ec953a89c108) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Allow primitives dep to be if version 9 OR 10
+
 ## 37.1.0
 
 ### Minor Changes
@@ -2431,7 +2445,7 @@
 
   ```jsx
   // Hide pane on narrow viewports
-  <PageLayout.Pane hidden={{narrow: true}}>...</PageLayout.Pane>
+  <PageLayout.Pane hidden={{ narrow: true }}>...</PageLayout.Pane>
   ```
 
 - [#2199](https://github.com/primer/react/pull/2199) [`fb385b63`](https://github.com/primer/react/commit/fb385b63f22c1eb76193e42e92ea2a056e61fdbb) Thanks [@colebemis](https://github.com/colebemis)! - \* Updated the `position` prop in `PageLayout.Pane` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174.
@@ -2592,7 +2606,7 @@
 - [#2112](https://github.com/primer/react/pull/2112) [`74e1d138`](https://github.com/primer/react/commit/74e1d1386bc6bb6326c3c2b64b5e31146f9cc56b) Thanks [@colebemis](https://github.com/colebemis)! - [NavList](https://primer.style/NavList) is ready to use. You can now import it from the main bundle:
 
   ```js
-  import {NavList} from '@primer/react'
+  import { NavList } from "@primer/react";
   ```
 
 ### Patch Changes
@@ -2733,11 +2747,11 @@
   ```jsx
   <ActionList
     items={[
-      {text: 'New file'},
-      {text: 'Copy link'},
-      {text: 'Edit file'},
+      { text: "New file" },
+      { text: "Copy link" },
+      { text: "Edit file" },
       ActionList.Divider,
-      {text: 'Delete file', variant: 'danger'},
+      { text: "Delete file", variant: "danger" },
     ]}
   />
   ```
@@ -2765,21 +2779,21 @@
     showItemDividers
     items={[
       {
-        key: '0',
+        key: "0",
         leadingVisual: LinkIcon,
-        text: 'github/primer',
+        text: "github/primer",
       },
       {
-        key: '1',
+        key: "1",
         leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
-        text: 'mona',
-        description: 'Monalisa Octocat',
-        descriptionVariant: 'block',
+        text: "mona",
+        description: "Monalisa Octocat",
+        descriptionVariant: "block",
       },
       {
-        key: '2',
+        key: "2",
         leadingVisual: GearIcon,
-        text: 'View Settings',
+        text: "View Settings",
         trailingVisual: ArrowRightIcon,
       },
     ]}
@@ -2802,7 +2816,9 @@
         <Avatar src="https://github.com/mona.png" />
       </ActionList.LeadingVisual>
       mona
-      <ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
+      <ActionList.Description variant="block">
+        Monalisa Octocat
+      </ActionList.Description>
     </ActionList.Item>
     <ActionList.Item>
       <ActionList.LeadingVisual>
@@ -2824,14 +2840,14 @@
   ```jsx
   <ActionList
     groupMetadata={[
-      {groupId: '0', header: {title: 'Live query'}},
-      {groupId: '1', header: {title: 'Layout'}},
+      { groupId: "0", header: { title: "Live query" } },
+      { groupId: "1", header: { title: "Layout" } },
     ]}
     items={[
-      {key: '0', text: 'repo:github/github', groupId: '0'},
-      {key: '1', text: 'Table', groupId: '1'},
-      {key: '2', text: 'Board', groupId: '1'},
-      {key: '3', text: 'View settings'},
+      { key: "0", text: "repo:github/github", groupId: "0" },
+      { key: "1", text: "Table", groupId: "1" },
+      { key: "2", text: "Board", groupId: "1" },
+      { key: "3", text: "View settings" },
     ]}
   />
   ```
@@ -2863,7 +2879,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import {ActionList} from '@primer/react/deprecated'
+  import { ActionList } from "@primer/react/deprecated";
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -2914,13 +2930,13 @@
     anchorContent="Menu"
     onAction={fn}
     items={[
-      {text: 'New file'},
-      {text: 'Copy link'},
-      {text: 'Edit file'},
+      { text: "New file" },
+      { text: "Copy link" },
+      { text: "Edit file" },
       ActionMenu.Divider,
-      {text: 'Delete file', variant: 'danger'},
+      { text: "Delete file", variant: "danger" },
     ]}
-    overlayProps={{width: 'small'}}
+    overlayProps={{ width: "small" }}
   />
   ```
 
@@ -2949,7 +2965,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import {ActionMenu} from '@primer/react/deprecated'
+  import { ActionMenu } from "@primer/react/deprecated";
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -2981,19 +2997,19 @@
 
   ```js
   const fieldTypes = [
-    {key: 0, text: 'Text'},
-    {key: 1, text: 'Number'},
-    {key: 3, text: 'Date'},
-    {key: 4, text: 'Single select'},
-    {key: 5, text: 'Iteration'},
-  ]
+    { key: 0, text: "Text" },
+    { key: 1, text: "Number" },
+    { key: 3, text: "Date" },
+    { key: 4, text: "Single select" },
+    { key: 5, text: "Iteration" },
+  ];
 
   const Example = () => {
-    const [selectedType, setSelectedType] = React.useState()
+    const [selectedType, setSelectedType] = React.useState();
 
     return (
       <DropdownMenu
-        renderAnchor={({children, ...anchorProps}) => (
+        renderAnchor={({ children, ...anchorProps }) => (
           <ButtonInvisible {...anchorProps}>
             {children} <GearIcon />
           </ButtonInvisible>
@@ -3002,10 +3018,10 @@
         items={fieldTypes}
         selectedItem={selectedType}
         onChange={setSelectedType}
-        overlayProps={{width: 'medium'}}
+        overlayProps={{ width: "medium" }}
       />
-    )
-  }
+    );
+  };
   ```
 
    </td>
@@ -3013,22 +3029,24 @@
 
   ```jsx
   const fieldTypes = [
-    {id: 0, text: 'Text'},
-    {id: 1, text: 'Number'},
-    {id: 3, text: 'Date'},
-    {id: 4, text: 'Single select'},
-    {id: 5, text: 'Iteration'},
-  ]
+    { id: 0, text: "Text" },
+    { id: 1, text: "Number" },
+    { id: 3, text: "Date" },
+    { id: 4, text: "Single select" },
+    { id: 5, text: "Iteration" },
+  ];
 
   const Example = () => {
-    const [selectedType, setSelectedType] = React.useState()
+    const [selectedType, setSelectedType] = React.useState();
 
     render(
       <ActionMenu>
-        <ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
+        <ActionMenu.Button aria-label="Select field type">
+          {selectedType.name || "Field type"}
+        </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
           <ActionList selectionVariant="single">
-            {fieldTypes.map(type => (
+            {fieldTypes.map((type) => (
               <ActionList.Item
                 key={type.id}
                 selected={type.id === selectedType.id}
@@ -3040,8 +3058,8 @@
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>,
-    )
-  }
+    );
+  };
   ```
 
   </td>
@@ -3051,7 +3069,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import {DropdownMenu} from '@primer/react/deprecated'
+  import { DropdownMenu } from "@primer/react/deprecated";
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3082,17 +3100,21 @@
   <td valign="top">
 
   ```jsx
-  import {Label} from '@primer/react'
+  import { Label } from "@primer/react";
 
   function Example() {
     return (
       <>
         <Label outline>default</Label>
-        <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>
+        <Label
+          variant="small"
+          outline
+          sx={{ borderColor: "danger.emphasis", color: "danger.fg" }}
+        >
           danger
         </Label>
       </>
-    )
+    );
   }
   ```
 
@@ -3100,7 +3122,7 @@
   <td valign="top">
 
   ```jsx
-  import {Label} from '@primer/react'
+  import { Label } from "@primer/react";
 
   function Example() {
     return (
@@ -3110,7 +3132,7 @@
           danger
         </Label>
       </>
-    )
+    );
   }
   ```
 
@@ -3121,7 +3143,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import {Label} from '@primer/react/deprecated'
+  import { Label } from "@primer/react/deprecated";
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3144,7 +3166,12 @@
   <td valign="top">
 
   ```jsx
-  import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react'
+  import {
+    ButtonPrimary,
+    ButtonInvisible,
+    ButtonOutline,
+    ButtonDanger,
+  } from "@primer/react";
 
   function Example() {
     return (
@@ -3154,7 +3181,7 @@
         <ButtonOutline>Outline Button</ButtonOutline>
         <ButtonDanger>Danger Button</ButtonDanger>
       </>
-    )
+    );
   }
   ```
 
@@ -3162,7 +3189,7 @@
   <td valign="top">
 
   ```jsx
-  import {Button} from '@primer/react'
+  import { Button } from "@primer/react";
 
   function Example() {
     return (
@@ -3172,7 +3199,7 @@
         <Button variant="outline">Outline Button</Button>
         <Button variant="danger">Danger Button</Button>
       </>
-    )
+    );
   }
   ```
 
@@ -3279,34 +3306,50 @@
   <td valign="top">
 
   ```jsx
-  import {ChoiceFieldset} from '@primer/react'
+  import { ChoiceFieldset } from "@primer/react";
 
   function Example() {
     return (
       <>
         {/* Multi-select */}
         <ChoiceFieldset>
-          <ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
+          <ChoiceFieldset.Legend>
+            Preferred Primer component interface
+          </ChoiceFieldset.Legend>
           <ChoiceFieldset.List selectionVariant="multiple">
-            <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
+            <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.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.Legend>
+            Preferred Primer component interface
+          </ChoiceFieldset.Legend>
           <ChoiceFieldset.List>
-            <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
+            <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.Item value="react">
+              Primer React components
+            </ChoiceFieldset.Item>
+            <ChoiceFieldset.Item value="viewcomponents">
+              Primer ViewComponents
+            </ChoiceFieldset.Item>
           </ChoiceFieldset.List>
         </ChoiceFieldset>
       </>
-    )
+    );
   }
   ```
 
@@ -3314,14 +3357,22 @@
   <td valign="top">
 
   ```jsx
-  import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react'
+  import {
+    CheckboxGroup,
+    RadioGroup,
+    FormControl,
+    Checkbox,
+    Radio,
+  } from "@primer/react";
 
   function Example() {
     return (
       <>
         {/* Multi-select */}
         <CheckboxGroup>
-          <CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label>
+          <CheckboxGroup.Label>
+            Preferred Primer component interface
+          </CheckboxGroup.Label>
           <FormControl>
             <Checkbox value="figma" />
             <FormControl.Label>Figma</FormControl.Label>
@@ -3342,7 +3393,9 @@
 
         {/* Single select */}
         <RadioGroup name="preferred-primer">
-          <RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label>
+          <RadioGroup.Label>
+            Preferred Primer component interface
+          </RadioGroup.Label>
           <FormControl>
             <Radio value="figma" />
             <FormControl.Label>Figma</FormControl.Label>
@@ -3361,7 +3414,7 @@
           </FormControl>
         </RadioGroup>
       </>
-    )
+    );
   }
   ```
 
@@ -3372,7 +3425,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import {ChoiceFieldset} from '@primer/react/deprecated'
+  import { ChoiceFieldset } from "@primer/react/deprecated";
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3404,7 +3457,7 @@
   <td valign="top">
 
   ```jsx
-  import {FormControl, Checkbox, TextInput} from '@primer/react'
+  import { FormControl, Checkbox, TextInput } from "@primer/react";
 
   function Example() {
     return (
@@ -3424,7 +3477,7 @@
           <Checkbox />
         </ChoiceInputField>
       </>
-    )
+    );
   }
   ```
 
@@ -3432,7 +3485,7 @@
   <td valign="top">
 
   ```jsx
-  import {FormGroup, TextInput} from '@primer/react'
+  import { FormGroup, TextInput } from "@primer/react";
 
   function Example() {
     return (
@@ -3447,7 +3500,7 @@
           <Checkbox />
         </FormControl>
       </>
-    )
+    );
   }
   ```
 
@@ -3457,7 +3510,7 @@
   <td valign="top">
 
   ```jsx
-  import {InputField, TextInput} from '@primer/react'
+  import { InputField, TextInput } from "@primer/react";
 
   function Example() {
     return (
@@ -3465,7 +3518,7 @@
         <InputField.Label>Example text</InputField.Label>
         <TextInput />
       </InputField>
-    )
+    );
   }
   ```
 
@@ -3473,7 +3526,7 @@
   <td valign="top">
 
   ```jsx
-  import {FormControl, TextInput} from '@primer/react'
+  import { FormControl, TextInput } from "@primer/react";
 
   function Example() {
     return (
@@ -3481,7 +3534,7 @@
         <FormControl.Label>Example text</FormControl.Label>
         <TextInput />
       </FormControl>
-    )
+    );
   }
   ```
 
@@ -3492,7 +3545,11 @@
   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'
+  import {
+    FormGroup,
+    ChoiceInputField,
+    InputField,
+  } from "@primer/react/deprecated";
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3563,23 +3620,25 @@
 
   ```jsx
   const fieldTypes = [
-    {leadingVisual: TypographyIcon, text: 'Text'},
-    {leadingVisual: NumberIcon, text: 'Number'},
-  ]
+    { leadingVisual: TypographyIcon, text: "Text" },
+    { leadingVisual: NumberIcon, text: "Number" },
+  ];
 
   const Example = () => {
-    const [selectedItem, setSelectedItem] = React.useState()
+    const [selectedItem, setSelectedItem] = React.useState();
 
     return (
       <DropdownMenu
-        renderAnchor={({children, ...anchorProps}) => <ButtonInvisible {...anchorProps}>{children}</ButtonInvisible>}
+        renderAnchor={({ children, ...anchorProps }) => (
+          <ButtonInvisible {...anchorProps}>{children}</ButtonInvisible>
+        )}
         placeholder="Select a field type"
         items={fieldTypes}
         selectedItem={selectedItem}
         onChange={() => setSelectedIndex(index)}
       />
-    )
-  }
+    );
+  };
   ```
 
    </td>
@@ -3587,29 +3646,36 @@
 
   ```jsx
   const fieldTypes = [
-    {icon: <TypographyIcon />, name: 'Text'},
-    {icon: <NumberIcon />, name: 'Number'},
-  ]
+    { icon: <TypographyIcon />, name: "Text" },
+    { icon: <NumberIcon />, name: "Number" },
+  ];
 
   const Example = () => {
-    const [selectedItem, setSelectedItem] = React.useState()
+    const [selectedItem, setSelectedItem] = React.useState();
 
     return (
       <ActionMenu>
-        <ActionMenu.Button>{selectedItem ? selectedItem.name : 'Select a field type'}</ActionMenu.Button>
+        <ActionMenu.Button>
+          {selectedItem ? selectedItem.name : "Select a field type"}
+        </ActionMenu.Button>
         <ActionMenu.Overlay>
           <ActionList selectionVariant="single">
-            {fieldTypes.map(field => (
-              <ActionList.Item onSelect={() => setSelectedItem(field)} key={field.name}>
-                <ActionList.LeadingVisual>{field.icon}</ActionList.LeadingVisual>
+            {fieldTypes.map((field) => (
+              <ActionList.Item
+                onSelect={() => setSelectedItem(field)}
+                key={field.name}
+              >
+                <ActionList.LeadingVisual>
+                  {field.icon}
+                </ActionList.LeadingVisual>
                 {field.name}
               </ActionList.Item>
             ))}
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
-    )
-  }
+    );
+  };
   ```
 
   </td>
@@ -3711,7 +3777,12 @@
   <td valign="top">
 
   ```jsx
-  <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
+  <Box
+    borderWidth="1px"
+    borderStyle="solid"
+    borderColor="border.default"
+    borderRadius={2}
+  >
     Item 1
   </Box>
   ```
@@ -4755,8 +4826,8 @@
 * [`beef075e`](https://github.com/primer/react/commit/beef075e0274396b77887adf0b912583fe564b3f) [#1094](https://github.com/primer/react/pull/1094) Thanks [@colebemis](https://github.com/colebemis)! - Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `<ThemeProvider>` at the root of your application:
 
   ```jsx
-  import {ThemeProvider} from 'styled-components'
-  import {theme} from '@primer/react'
+  import { ThemeProvider } from "styled-components";
+  import { theme } from "@primer/react";
 
   function App(props) {
     return (
@@ -4765,7 +4836,7 @@
           <div>your app here</div>
         </ThemeProvider>
       </div>
-    )
+    );
   }
   ```
 
diff --git a/packages/react/package.json b/packages/react/package.json
index 95ffec530cd..f84e01dba94 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.1.0",
+  "version": "37.2.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

From fb9a258aa41421bd73d9adfebf9b2c4e5f069102 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 5 Nov 2024 16:19:58 +0100
Subject: [PATCH 2/2] run prettier on changelog

---
 packages/react/CHANGELOG.md | 269 ++++++++++++++----------------------
 1 file changed, 106 insertions(+), 163 deletions(-)

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 91ce7c14bdb..7de84c6b740 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -2445,7 +2445,7 @@
 
   ```jsx
   // Hide pane on narrow viewports
-  <PageLayout.Pane hidden={{ narrow: true }}>...</PageLayout.Pane>
+  <PageLayout.Pane hidden={{narrow: true}}>...</PageLayout.Pane>
   ```
 
 - [#2199](https://github.com/primer/react/pull/2199) [`fb385b63`](https://github.com/primer/react/commit/fb385b63f22c1eb76193e42e92ea2a056e61fdbb) Thanks [@colebemis](https://github.com/colebemis)! - \* Updated the `position` prop in `PageLayout.Pane` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174.
@@ -2606,7 +2606,7 @@
 - [#2112](https://github.com/primer/react/pull/2112) [`74e1d138`](https://github.com/primer/react/commit/74e1d1386bc6bb6326c3c2b64b5e31146f9cc56b) Thanks [@colebemis](https://github.com/colebemis)! - [NavList](https://primer.style/NavList) is ready to use. You can now import it from the main bundle:
 
   ```js
-  import { NavList } from "@primer/react";
+  import {NavList} from '@primer/react'
   ```
 
 ### Patch Changes
@@ -2747,11 +2747,11 @@
   ```jsx
   <ActionList
     items={[
-      { text: "New file" },
-      { text: "Copy link" },
-      { text: "Edit file" },
+      {text: 'New file'},
+      {text: 'Copy link'},
+      {text: 'Edit file'},
       ActionList.Divider,
-      { text: "Delete file", variant: "danger" },
+      {text: 'Delete file', variant: 'danger'},
     ]}
   />
   ```
@@ -2779,21 +2779,21 @@
     showItemDividers
     items={[
       {
-        key: "0",
+        key: '0',
         leadingVisual: LinkIcon,
-        text: "github/primer",
+        text: 'github/primer',
       },
       {
-        key: "1",
+        key: '1',
         leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
-        text: "mona",
-        description: "Monalisa Octocat",
-        descriptionVariant: "block",
+        text: 'mona',
+        description: 'Monalisa Octocat',
+        descriptionVariant: 'block',
       },
       {
-        key: "2",
+        key: '2',
         leadingVisual: GearIcon,
-        text: "View Settings",
+        text: 'View Settings',
         trailingVisual: ArrowRightIcon,
       },
     ]}
@@ -2816,9 +2816,7 @@
         <Avatar src="https://github.com/mona.png" />
       </ActionList.LeadingVisual>
       mona
-      <ActionList.Description variant="block">
-        Monalisa Octocat
-      </ActionList.Description>
+      <ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
     </ActionList.Item>
     <ActionList.Item>
       <ActionList.LeadingVisual>
@@ -2840,14 +2838,14 @@
   ```jsx
   <ActionList
     groupMetadata={[
-      { groupId: "0", header: { title: "Live query" } },
-      { groupId: "1", header: { title: "Layout" } },
+      {groupId: '0', header: {title: 'Live query'}},
+      {groupId: '1', header: {title: 'Layout'}},
     ]}
     items={[
-      { key: "0", text: "repo:github/github", groupId: "0" },
-      { key: "1", text: "Table", groupId: "1" },
-      { key: "2", text: "Board", groupId: "1" },
-      { key: "3", text: "View settings" },
+      {key: '0', text: 'repo:github/github', groupId: '0'},
+      {key: '1', text: 'Table', groupId: '1'},
+      {key: '2', text: 'Board', groupId: '1'},
+      {key: '3', text: 'View settings'},
     ]}
   />
   ```
@@ -2879,7 +2877,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import { ActionList } from "@primer/react/deprecated";
+  import {ActionList} from '@primer/react/deprecated'
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -2930,13 +2928,13 @@
     anchorContent="Menu"
     onAction={fn}
     items={[
-      { text: "New file" },
-      { text: "Copy link" },
-      { text: "Edit file" },
+      {text: 'New file'},
+      {text: 'Copy link'},
+      {text: 'Edit file'},
       ActionMenu.Divider,
-      { text: "Delete file", variant: "danger" },
+      {text: 'Delete file', variant: 'danger'},
     ]}
-    overlayProps={{ width: "small" }}
+    overlayProps={{width: 'small'}}
   />
   ```
 
@@ -2965,7 +2963,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import { ActionMenu } from "@primer/react/deprecated";
+  import {ActionMenu} from '@primer/react/deprecated'
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -2997,19 +2995,19 @@
 
   ```js
   const fieldTypes = [
-    { key: 0, text: "Text" },
-    { key: 1, text: "Number" },
-    { key: 3, text: "Date" },
-    { key: 4, text: "Single select" },
-    { key: 5, text: "Iteration" },
-  ];
+    {key: 0, text: 'Text'},
+    {key: 1, text: 'Number'},
+    {key: 3, text: 'Date'},
+    {key: 4, text: 'Single select'},
+    {key: 5, text: 'Iteration'},
+  ]
 
   const Example = () => {
-    const [selectedType, setSelectedType] = React.useState();
+    const [selectedType, setSelectedType] = React.useState()
 
     return (
       <DropdownMenu
-        renderAnchor={({ children, ...anchorProps }) => (
+        renderAnchor={({children, ...anchorProps}) => (
           <ButtonInvisible {...anchorProps}>
             {children} <GearIcon />
           </ButtonInvisible>
@@ -3018,10 +3016,10 @@
         items={fieldTypes}
         selectedItem={selectedType}
         onChange={setSelectedType}
-        overlayProps={{ width: "medium" }}
+        overlayProps={{width: 'medium'}}
       />
-    );
-  };
+    )
+  }
   ```
 
    </td>
@@ -3029,24 +3027,22 @@
 
   ```jsx
   const fieldTypes = [
-    { id: 0, text: "Text" },
-    { id: 1, text: "Number" },
-    { id: 3, text: "Date" },
-    { id: 4, text: "Single select" },
-    { id: 5, text: "Iteration" },
-  ];
+    {id: 0, text: 'Text'},
+    {id: 1, text: 'Number'},
+    {id: 3, text: 'Date'},
+    {id: 4, text: 'Single select'},
+    {id: 5, text: 'Iteration'},
+  ]
 
   const Example = () => {
-    const [selectedType, setSelectedType] = React.useState();
+    const [selectedType, setSelectedType] = React.useState()
 
     render(
       <ActionMenu>
-        <ActionMenu.Button aria-label="Select field type">
-          {selectedType.name || "Field type"}
-        </ActionMenu.Button>
+        <ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
           <ActionList selectionVariant="single">
-            {fieldTypes.map((type) => (
+            {fieldTypes.map(type => (
               <ActionList.Item
                 key={type.id}
                 selected={type.id === selectedType.id}
@@ -3058,8 +3054,8 @@
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>,
-    );
-  };
+    )
+  }
   ```
 
   </td>
@@ -3069,7 +3065,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import { DropdownMenu } from "@primer/react/deprecated";
+  import {DropdownMenu} from '@primer/react/deprecated'
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3100,21 +3096,17 @@
   <td valign="top">
 
   ```jsx
-  import { Label } from "@primer/react";
+  import {Label} from '@primer/react'
 
   function Example() {
     return (
       <>
         <Label outline>default</Label>
-        <Label
-          variant="small"
-          outline
-          sx={{ borderColor: "danger.emphasis", color: "danger.fg" }}
-        >
+        <Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>
           danger
         </Label>
       </>
-    );
+    )
   }
   ```
 
@@ -3122,7 +3114,7 @@
   <td valign="top">
 
   ```jsx
-  import { Label } from "@primer/react";
+  import {Label} from '@primer/react'
 
   function Example() {
     return (
@@ -3132,7 +3124,7 @@
           danger
         </Label>
       </>
-    );
+    )
   }
   ```
 
@@ -3143,7 +3135,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import { Label } from "@primer/react/deprecated";
+  import {Label} from '@primer/react/deprecated'
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3166,12 +3158,7 @@
   <td valign="top">
 
   ```jsx
-  import {
-    ButtonPrimary,
-    ButtonInvisible,
-    ButtonOutline,
-    ButtonDanger,
-  } from "@primer/react";
+  import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react'
 
   function Example() {
     return (
@@ -3181,7 +3168,7 @@
         <ButtonOutline>Outline Button</ButtonOutline>
         <ButtonDanger>Danger Button</ButtonDanger>
       </>
-    );
+    )
   }
   ```
 
@@ -3189,7 +3176,7 @@
   <td valign="top">
 
   ```jsx
-  import { Button } from "@primer/react";
+  import {Button} from '@primer/react'
 
   function Example() {
     return (
@@ -3199,7 +3186,7 @@
         <Button variant="outline">Outline Button</Button>
         <Button variant="danger">Danger Button</Button>
       </>
-    );
+    )
   }
   ```
 
@@ -3306,50 +3293,34 @@
   <td valign="top">
 
   ```jsx
-  import { ChoiceFieldset } from "@primer/react";
+  import {ChoiceFieldset} from '@primer/react'
 
   function Example() {
     return (
       <>
         {/* Multi-select */}
         <ChoiceFieldset>
-          <ChoiceFieldset.Legend>
-            Preferred Primer component interface
-          </ChoiceFieldset.Legend>
+          <ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
           <ChoiceFieldset.List selectionVariant="multiple">
-            <ChoiceFieldset.Item value="figma">
-              Figma library
-            </ChoiceFieldset.Item>
+            <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.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.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
           <ChoiceFieldset.List>
-            <ChoiceFieldset.Item value="figma">
-              Figma library
-            </ChoiceFieldset.Item>
+            <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.Item value="react">Primer React components</ChoiceFieldset.Item>
+            <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
           </ChoiceFieldset.List>
         </ChoiceFieldset>
       </>
-    );
+    )
   }
   ```
 
@@ -3357,22 +3328,14 @@
   <td valign="top">
 
   ```jsx
-  import {
-    CheckboxGroup,
-    RadioGroup,
-    FormControl,
-    Checkbox,
-    Radio,
-  } from "@primer/react";
+  import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react'
 
   function Example() {
     return (
       <>
         {/* Multi-select */}
         <CheckboxGroup>
-          <CheckboxGroup.Label>
-            Preferred Primer component interface
-          </CheckboxGroup.Label>
+          <CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label>
           <FormControl>
             <Checkbox value="figma" />
             <FormControl.Label>Figma</FormControl.Label>
@@ -3393,9 +3356,7 @@
 
         {/* Single select */}
         <RadioGroup name="preferred-primer">
-          <RadioGroup.Label>
-            Preferred Primer component interface
-          </RadioGroup.Label>
+          <RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label>
           <FormControl>
             <Radio value="figma" />
             <FormControl.Label>Figma</FormControl.Label>
@@ -3414,7 +3375,7 @@
           </FormControl>
         </RadioGroup>
       </>
-    );
+    )
   }
   ```
 
@@ -3425,7 +3386,7 @@
   To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
 
   ```js
-  import { ChoiceFieldset } from "@primer/react/deprecated";
+  import {ChoiceFieldset} from '@primer/react/deprecated'
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3457,7 +3418,7 @@
   <td valign="top">
 
   ```jsx
-  import { FormControl, Checkbox, TextInput } from "@primer/react";
+  import {FormControl, Checkbox, TextInput} from '@primer/react'
 
   function Example() {
     return (
@@ -3477,7 +3438,7 @@
           <Checkbox />
         </ChoiceInputField>
       </>
-    );
+    )
   }
   ```
 
@@ -3485,7 +3446,7 @@
   <td valign="top">
 
   ```jsx
-  import { FormGroup, TextInput } from "@primer/react";
+  import {FormGroup, TextInput} from '@primer/react'
 
   function Example() {
     return (
@@ -3500,7 +3461,7 @@
           <Checkbox />
         </FormControl>
       </>
-    );
+    )
   }
   ```
 
@@ -3510,7 +3471,7 @@
   <td valign="top">
 
   ```jsx
-  import { InputField, TextInput } from "@primer/react";
+  import {InputField, TextInput} from '@primer/react'
 
   function Example() {
     return (
@@ -3518,7 +3479,7 @@
         <InputField.Label>Example text</InputField.Label>
         <TextInput />
       </InputField>
-    );
+    )
   }
   ```
 
@@ -3526,7 +3487,7 @@
   <td valign="top">
 
   ```jsx
-  import { FormControl, TextInput } from "@primer/react";
+  import {FormControl, TextInput} from '@primer/react'
 
   function Example() {
     return (
@@ -3534,7 +3495,7 @@
         <FormControl.Label>Example text</FormControl.Label>
         <TextInput />
       </FormControl>
-    );
+    )
   }
   ```
 
@@ -3545,11 +3506,7 @@
   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";
+  import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated'
   ```
 
   You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
@@ -3620,25 +3577,23 @@
 
   ```jsx
   const fieldTypes = [
-    { leadingVisual: TypographyIcon, text: "Text" },
-    { leadingVisual: NumberIcon, text: "Number" },
-  ];
+    {leadingVisual: TypographyIcon, text: 'Text'},
+    {leadingVisual: NumberIcon, text: 'Number'},
+  ]
 
   const Example = () => {
-    const [selectedItem, setSelectedItem] = React.useState();
+    const [selectedItem, setSelectedItem] = React.useState()
 
     return (
       <DropdownMenu
-        renderAnchor={({ children, ...anchorProps }) => (
-          <ButtonInvisible {...anchorProps}>{children}</ButtonInvisible>
-        )}
+        renderAnchor={({children, ...anchorProps}) => <ButtonInvisible {...anchorProps}>{children}</ButtonInvisible>}
         placeholder="Select a field type"
         items={fieldTypes}
         selectedItem={selectedItem}
         onChange={() => setSelectedIndex(index)}
       />
-    );
-  };
+    )
+  }
   ```
 
    </td>
@@ -3646,36 +3601,29 @@
 
   ```jsx
   const fieldTypes = [
-    { icon: <TypographyIcon />, name: "Text" },
-    { icon: <NumberIcon />, name: "Number" },
-  ];
+    {icon: <TypographyIcon />, name: 'Text'},
+    {icon: <NumberIcon />, name: 'Number'},
+  ]
 
   const Example = () => {
-    const [selectedItem, setSelectedItem] = React.useState();
+    const [selectedItem, setSelectedItem] = React.useState()
 
     return (
       <ActionMenu>
-        <ActionMenu.Button>
-          {selectedItem ? selectedItem.name : "Select a field type"}
-        </ActionMenu.Button>
+        <ActionMenu.Button>{selectedItem ? selectedItem.name : 'Select a field type'}</ActionMenu.Button>
         <ActionMenu.Overlay>
           <ActionList selectionVariant="single">
-            {fieldTypes.map((field) => (
-              <ActionList.Item
-                onSelect={() => setSelectedItem(field)}
-                key={field.name}
-              >
-                <ActionList.LeadingVisual>
-                  {field.icon}
-                </ActionList.LeadingVisual>
+            {fieldTypes.map(field => (
+              <ActionList.Item onSelect={() => setSelectedItem(field)} key={field.name}>
+                <ActionList.LeadingVisual>{field.icon}</ActionList.LeadingVisual>
                 {field.name}
               </ActionList.Item>
             ))}
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
-    );
-  };
+    )
+  }
   ```
 
   </td>
@@ -3777,12 +3725,7 @@
   <td valign="top">
 
   ```jsx
-  <Box
-    borderWidth="1px"
-    borderStyle="solid"
-    borderColor="border.default"
-    borderRadius={2}
-  >
+  <Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
     Item 1
   </Box>
   ```
@@ -4826,8 +4769,8 @@
 * [`beef075e`](https://github.com/primer/react/commit/beef075e0274396b77887adf0b912583fe564b3f) [#1094](https://github.com/primer/react/pull/1094) Thanks [@colebemis](https://github.com/colebemis)! - Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `<ThemeProvider>` at the root of your application:
 
   ```jsx
-  import { ThemeProvider } from "styled-components";
-  import { theme } from "@primer/react";
+  import {ThemeProvider} from 'styled-components'
+  import {theme} from '@primer/react'
 
   function App(props) {
     return (
@@ -4836,7 +4779,7 @@
           <div>your app here</div>
         </ThemeProvider>
       </div>
-    );
+    )
   }
   ```