@primer/react 38.0.0-rc.6 → 38.0.0-rc.8

package/generated/components.json

@@ -19,15 +19,13 @@
           "name": "aria-label",
           "type": "string",
           "required": false,
-          "description": "When provided, a label is added to the action bar",
-          "defaultValue": ""
+          "description": "When provided, a label is added to the action bar"
         },
         {
           "name": "aria-labelledby",
           "type": "string",
           "required": false,
-          "description": "When provided, uses the element with that ID as the accessible name for the ActionBar",
-          "defaultValue": ""
+          "description": "When provided, uses the element with that ID as the accessible name for the ActionBar"
         },
         {
           "name": "children",
@@ -40,15 +38,15 @@
           "name": "size",
           "type": "'small' | 'large' | 'medium'",
           "required": false,
-          "description": "Size of the action bar",
-          "defaultValue": ""
+          "defaultValue": "'medium'",
+          "description": "Size of the action bar"
         },
         {
           "name": "flush",
           "type": "boolean",
           "required": false,
-          "description": "Allows ActionBar to be flush with the container",
-          "defaultValue": "false"
+          "defaultValue": "false",
+          "description": "Allows ActionBar to be flush with the container"
         },
         {
           "name": "className",
@@ -56,6 +54,13 @@
           "required": false,
           "description": "Custom className",
           "defaultValue": ""
+        },
+        {
+          "name": "gap",
+          "type": "'none' | 'condensed'",
+          "required": false,
+          "defaultValue": "'condensed'",
+          "description": "Horizontal gap scale between items (restricted to none or condensed)."
         }
       ],
       "subcomponents": [
@@ -275,11 +280,6 @@
           "type": "AriaRole",
           "defaultValue": "",
           "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -352,11 +352,6 @@
               "required": false,
               "description": "id to attach to the root element of the Item",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -383,11 +378,6 @@
               "required": false,
               "description": "",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -422,11 +412,6 @@
               "required": false,
               "description": "Text describing why the item is inactive. This may be used when an item's usual functionality\nis unavailable due to a system error such as a database outage.",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -443,11 +428,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Icon (or similar) positioned before item text."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -460,11 +440,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Visual positioned after item text."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -521,11 +496,6 @@
               "defaultValue": "'inline'",
               "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "className",
               "type": "string | undefined",
@@ -576,11 +546,6 @@
               "defaultValue": "h3",
               "required": false,
               "description": "The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles)"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -624,22 +589,6 @@
               "type": "AriaRole",
               "defaultValue": "",
               "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
-        },
-        {
-          "filePath": "/Users/mperrotti/work-dir/react/packages/react/src/ActionList/Divider.tsx",
-          "name": "ActionList.Divider",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -1922,11 +1871,6 @@
           "type": "'small'\n| 'medium'\n| 'large'",
           "defaultValue": "'medium'"
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "trailingIcon",
           "type": "React.ComponentType<OcticonProps>",
@@ -2112,11 +2056,6 @@
           "required": false,
           "description": "If `description` is provided, we will use a Tooltip to describe the button. Then `aria-label` is used to label the button.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -2431,7 +2370,7 @@
         },
         {
           "id": "components-confirmationdialog-features--shorthand-hook",
-          "code": "() => {\n  const confirm = useConfirm()\n  const { theme } = useTheme()\n  const onButtonClick = useCallback(\n    async (event: React.MouseEvent) => {\n      if (\n        (await confirm({\n          title: 'Are you sure?',\n          content: 'Do you really want to turn this button green?',\n        })) &&\n        event.target instanceof HTMLElement\n      ) {\n        event.target.style.color = theme?.colors.success.fg ?? 'green'\n        event.target.textContent = \"I'm green!\"\n      }\n    },\n    [confirm, theme],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n    </div>\n  )\n}"
+          "code": "() => {\n  const confirm = useConfirm()\n  const onButtonClick = useCallback(\n    async (event: React.MouseEvent) => {\n      if (\n        (await confirm({\n          title: 'Are you sure?',\n          content: 'Do you really want to turn this button green?',\n        })) &&\n        event.target instanceof HTMLElement\n      ) {\n        event.target.style.color = 'var(--fgColor-success)'\n        event.target.textContent = \"I'm green!\"\n      }\n    },\n    [confirm],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n    </div>\n  )\n}"
         },
         {
           "id": "components-confirmationdialog-features--shorthand-hook-from-action-menu",
@@ -3468,11 +3407,6 @@
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -3522,11 +3456,6 @@
               "type": "string",
               "description": "Class name(s) for custom styling.",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3544,11 +3473,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The content (usually just text) that is rendered to give contextual info about the field"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3573,11 +3497,6 @@
               "type": "string",
               "description": "May be used to override the ID assigned by FormControl's React Context",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3589,11 +3508,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The visual to render before the choice input's label"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -4023,7 +3937,76 @@
       "name": "NavList",
       "status": "alpha",
       "a11yReviewed": "2025-01-08",
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-navlist--default",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Item 1\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 2</NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--expand-with-custom-items",
+          "code": "() => {\n  const items: {\n    href: string\n    text: string\n    'aria-current'?: 'page'\n  }[] = [\n    {\n      href: '#',\n      text: 'Item 4',\n      'aria-current': 'page',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  const Item = ({\n    leadingVisual,\n    text,\n    trailingVisual,\n    ...rest\n  }: CustomItemProps) => {\n    return (\n      <NavList.Item key={text} onClick={() => {}} href=\"#\" {...rest}>\n        {leadingVisual ? (\n          <NavList.LeadingVisual>\n            <Octicon icon={leadingVisual} />\n          </NavList.LeadingVisual>\n        ) : null}\n        {text}\n\n        {trailingVisual ? (\n          <NavList.TrailingVisual>\n            {typeof trailingVisual === 'string' ? (\n              trailingVisual\n            ) : (\n              <Octicon icon={trailingVisual as React.ElementType} />\n            )}\n            <VisuallyHidden>results</VisuallyHidden>\n          </NavList.TrailingVisual>\n        ) : null}\n      </NavList.Item>\n    )\n  }\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\">Item 1</NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand\n            label=\"Show more\"\n            items={items}\n            renderItem={Item}\n          />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--expand-with-pages",
+          "code": "() => {\n  const items = [\n    {\n      href: '#',\n      text: 'Item 4',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\" aria-current=\"page\">\n            Item 1\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand pages={2} label=\"Show more\" items={items} />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--group-with-expand-and-custom-items",
+          "code": "() => {\n  const Item = ({\n    leadingVisual: LeadingVisual,\n    text,\n    trailingVisual: TrailingVisual,\n    ...rest\n  }: CustomItemProps) => {\n    return (\n      <NavList.Item onClick={() => {}} href=\"#\" {...rest} key={text}>\n        {LeadingVisual ? (\n          <NavList.LeadingVisual>\n            <LeadingVisual />\n          </NavList.LeadingVisual>\n        ) : null}\n        {text}\n\n        {TrailingVisual ? (\n          <NavList.TrailingVisual>\n            {typeof TrailingVisual === 'string' ? (\n              TrailingVisual\n            ) : (\n              <TrailingVisual />\n            )}\n            <VisuallyHidden>results</VisuallyHidden>\n          </NavList.TrailingVisual>\n        ) : null}\n      </NavList.Item>\n    )\n  }\n  const items = [\n    {\n      href: '#',\n      text: 'Commits',\n      leadingVisual: GitCommitIcon,\n      trailingVisual: '32k',\n    },\n    {\n      href: '#',\n      text: 'Packages',\n      leadingVisual: PackageIcon,\n      trailingVisual: '1k',\n    },\n    {\n      href: '#',\n      text: 'Wikis',\n      leadingVisual: BookIcon,\n      trailingVisual: '121',\n    },\n    {\n      href: '#',\n      text: 'Topics',\n      leadingVisual: MilestoneIcon,\n      trailingVisual: '12k',\n    },\n    {\n      href: '#',\n      text: 'Marketplace',\n      leadingVisual: TelescopeIcon,\n      trailingVisual: ArrowRightIcon,\n    },\n  ]\n  return (\n    <NavList>\n      <NavList.Group>\n        <NavList.Item aria-current=\"page\">\n          <NavList.LeadingVisual>\n            <CodeIcon />\n          </NavList.LeadingVisual>\n          Code\n          <NavList.TrailingVisual>3k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <RepoIcon />\n          </NavList.LeadingVisual>\n          Repositories\n          <NavList.TrailingVisual>713</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <IssueOpenedIcon />\n          </NavList.LeadingVisual>\n          Issues\n          <NavList.TrailingVisual>6k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <GitPullRequestIcon />\n          </NavList.LeadingVisual>\n          Pull requests\n          <NavList.TrailingVisual>4k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <CommentDiscussionIcon />\n          </NavList.LeadingVisual>\n          Discussions\n          <NavList.TrailingVisual>236</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.Item>\n          <NavList.LeadingVisual>\n            <PeopleIcon />\n          </NavList.LeadingVisual>\n          Users\n          <NavList.TrailingVisual>10k</NavList.TrailingVisual>\n        </NavList.Item>\n        <NavList.GroupExpand items={items} renderItem={Item} />\n      </NavList.Group>\n    </NavList>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-expand",
+          "code": "() => {\n  const items = [\n    {\n      href: '#',\n      text: 'Item 4',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\" aria-current=\"page\">\n            Item 1\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand label=\"Show more\" items={items} />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-expand-and-icons",
+          "code": "() => {\n  const items = [\n    {\n      href: '#',\n      text: 'Item 4',\n    },\n    {\n      href: '#',\n      text: 'Item 5',\n    },\n    {\n      href: '#',\n      text: 'Item 6',\n    },\n    {\n      href: '#',\n      text: 'Item 7',\n    },\n    {\n      href: '#',\n      text: 'Item 8',\n    },\n    {\n      href: '#',\n      text: 'Item 9',\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item href=\"#\" aria-current=\"page\">\n            Item 1\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 2</NavList.Item>\n          <NavList.Item href=\"#\">Item 3</NavList.Item>\n          <NavList.GroupExpand label=\"Show more\" items={items} />\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-group",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Group title=\"Group 1\">\n          <NavList.Item aria-current=\"true\" href=\"#\">\n            Item 1A\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 1B</NavList.Item>\n          <NavList.Item href=\"#\">Item 1C</NavList.Item>\n        </NavList.Group>\n        <NavList.Group title=\"Group 2\">\n          <NavList.Item href=\"#\">Item 2A</NavList.Item>\n          <NavList.Item href=\"#\">Item 2B</NavList.Item>\n          <NavList.Item href=\"#\">Item 2C</NavList.Item>\n        </NavList.Group>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-group-expand",
+          "code": "() => {\n  const items1 = [\n    {\n      href: '#',\n      text: 'Item 1D',\n    },\n    {\n      href: '#',\n      text: 'Item 1E',\n      trailingAction: {\n        label: 'Some action',\n        icon: ArrowRightIcon,\n      },\n    },\n  ]\n  const items2 = [\n    {\n      href: '#',\n      text: 'Item 2D',\n      trailingVisual: BookIcon,\n    },\n    {\n      href: '#',\n      text: 'Item 2E',\n      trailingVisual: FileDirectoryIcon,\n    },\n  ]\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Group title=\"Group 1\">\n            <NavList.Item aria-current=\"true\" href=\"#\">\n              Item 1A\n            </NavList.Item>\n            <NavList.Item href=\"#\">Item 1B</NavList.Item>\n            <NavList.Item href=\"#\">Item 1C</NavList.Item>\n            <NavList.GroupExpand label=\"More\" items={items1} />\n          </NavList.Group>\n          <NavList.Group title=\"Group 2\">\n            <NavList.Item href=\"#\">Item 2A</NavList.Item>\n            <NavList.Item href=\"#\">Item 2B</NavList.Item>\n            <NavList.Item href=\"#\">Item 2C</NavList.Item>\n            <NavList.GroupExpand label=\"Show\" items={items2} />\n          </NavList.Group>\n        </NavList>\n      </PageLayout.Pane>\n      <PageLayout.Content></PageLayout.Content>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-group-heading-links",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Group>\n          <NavList.GroupHeading>\n            <a href=\"#group-1\">Group 1</a>\n          </NavList.GroupHeading>\n          <NavList.Item aria-current=\"true\" href=\"#\">\n            Item 1A\n          </NavList.Item>\n          <NavList.Item href=\"#\">Item 1B</NavList.Item>\n          <NavList.Item href=\"#\">Item 1C</NavList.Item>\n        </NavList.Group>\n        <NavList.Group>\n          <NavList.GroupHeading>\n            <a href=\"#group-2\">Group 2</a>\n          </NavList.GroupHeading>\n          <NavList.Item href=\"#\">Item 2A</NavList.Item>\n          <NavList.Item href=\"#\">Item 2B</NavList.Item>\n          <NavList.Item href=\"#\">Item 2C</NavList.Item>\n        </NavList.Group>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-inactive-items",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n          Item 1\n        </NavList.Item>\n        <NavList.Item>\n          Item 2\n          <NavList.SubNav>\n            <NavList.Item href=\"#\" aria-current=\"page\">\n              Sub item 1\n            </NavList.Item>\n            <NavList.Item href=\"#\" inactiveText=\"Unavailable due to an outage\">\n              Sub item 2\n            </NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-nested-sub-items",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item defaultOpen={true} href=\"#\">\n          Item 1\n          <NavList.SubNav>\n            <NavList.Item href=\"#\">Sub item 1</NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">\n          Item 2{/* NOTE: Don't nest SubNavs. For testing purposes only */}\n          <NavList.SubNav>\n            <NavList.Item href=\"#\">\n              Sub item 1\n              <NavList.SubNav>\n                <NavList.Item href=\"#\">\n                  Sub item 1.1\n                  <NavList.SubNav>\n                    <NavList.Item href=\"#\">Sub item 1.1.1</NavList.Item>\n                    <NavList.Item href=\"#\">\n                      Sub item 1.1.2\n                      <NavList.SubNav>\n                        <NavList.Item href=\"#\">Sub item 1.1.2.1</NavList.Item>\n                        <NavList.Item href=\"#\" aria-current=\"page\">\n                          Sub item 1.1.2.2\n                        </NavList.Item>\n                      </NavList.SubNav>\n                    </NavList.Item>\n                  </NavList.SubNav>\n                </NavList.Item>\n                <NavList.Item href=\"#\">Sub item 1.2</NavList.Item>\n              </NavList.SubNav>\n            </NavList.Item>\n            <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-next-js-link",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NextJSLikeLink href=\"#\">\n          <NavList.Item aria-current=\"page\">Item 1</NavList.Item>\n        </NextJSLikeLink>\n        <NextJSLikeLink href=\"#\">\n          <NavList.Item>Item 2</NavList.Item>\n        </NextJSLikeLink>\n        <NextJSLikeLink href=\"#\">\n          <NavList.Item>Item 3</NavList.Item>\n        </NextJSLikeLink>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-react-router-link",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item as={ReactRouterLikeLink} to=\"#\" aria-current=\"page\">\n          Item 1\n        </NavList.Item>\n        <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n          Item 2\n        </NavList.Item>\n        <NavList.Item as={ReactRouterLikeLink} to=\"#\">\n          Item 3\n        </NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-reloads",
+          "code": "() => {\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n  const location = window.location\n  const storyId = new URLSearchParams(location.search).get('id')\n  const urlBase = `${location.origin + location.pathname}?id=${storyId}`\n  const itemId = new URLSearchParams(location.search).get('itemId')\n  return (\n    <>\n      <PageLayout>\n        <PageLayout.Pane position=\"start\">\n          <NavList>\n            <NavList.Item\n              href={`${urlBase}&itemId=1`}\n              aria-current={itemId === '1' ? 'page' : 'false'}\n            >\n              Item 1\n            </NavList.Item>\n            <NavList.Item>\n              Item 2\n              <NavList.SubNav>\n                <NavList.Item\n                  href={`${urlBase}&itemId=2.1`}\n                  aria-current={itemId === '2.1' ? 'page' : 'false'}\n                >\n                  Sub item 2.1\n                </NavList.Item>\n                <NavList.Item\n                  href={`${urlBase}&itemId=2.2`}\n                  aria-current={itemId === '2.2' ? 'page' : 'false'}\n                >\n                  Sub item 2.2\n                </NavList.Item>\n              </NavList.SubNav>\n            </NavList.Item>\n            <NavList.Item>\n              Item 3\n              <NavList.SubNav>\n                <NavList.Item\n                  href={`${urlBase}&itemId=3.1`}\n                  aria-current={itemId === '3.1' ? 'page' : 'false'}\n                >\n                  Sub item 3.1\n                </NavList.Item>\n                <NavList.Item\n                  href={`${urlBase}&itemId=3.2`}\n                  aria-current={itemId === '3.2' ? 'page' : 'false'}\n                >\n                  Sub item 3.2\n                </NavList.Item>\n              </NavList.SubNav>\n            </NavList.Item>\n          </NavList>\n        </PageLayout.Pane>\n        <PageLayout.Content></PageLayout.Content>\n      </PageLayout>\n    </>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-sub-items",
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Pane position=\"start\">\n      <NavList>\n        <NavList.Item href=\"#\">Item 1</NavList.Item>\n        <NavList.Item>\n          Item 2\n          <NavList.SubNav>\n            <NavList.Item href=\"#\" aria-current=\"page\">\n              Sub item 1\n            </NavList.Item>\n            <NavList.Item href=\"#\">Sub item 2</NavList.Item>\n          </NavList.SubNav>\n        </NavList.Item>\n        <NavList.Item href=\"#\">Item 3</NavList.Item>\n      </NavList>\n    </PageLayout.Pane>\n    <PageLayout.Content></PageLayout.Content>\n  </PageLayout>\n)"
+        },
+        {
+          "id": "components-navlist-features--with-trailing-action",
+          "code": "() => {\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item>\n            <NavList.LeadingVisual>\n              <FileDirectoryIcon />\n            </NavList.LeadingVisual>\n            Item 1\n            <NavList.TrailingAction\n              label=\"Expand sidebar\"\n              icon={ArrowLeftIcon}\n            />\n          </NavList.Item>\n          <NavList.Item>\n            Item 2\n            <NavList.TrailingAction\n              as=\"a\"\n              href=\"#\"\n              label=\"Some action\"\n              icon={ArrowRightIcon}\n            />\n          </NavList.Item>\n        </NavList>\n      </PageLayout.Pane>\n    </PageLayout>\n  )\n}"
+        },
+        {
+          "id": "components-navlist-features--with-trailing-action-in-sub-item",
+          "code": "() => {\n  return (\n    <PageLayout>\n      <PageLayout.Pane position=\"start\">\n        <NavList>\n          <NavList.Item>\n            <NavList.LeadingVisual>\n              <FileDirectoryIcon />\n            </NavList.LeadingVisual>\n            Item 1\n            <NavList.TrailingAction\n              label=\"Expand sidebar\"\n              icon={ArrowLeftIcon}\n            />\n          </NavList.Item>\n          <NavList.Item>\n            Item 2\n            <NavList.TrailingAction\n              as=\"a\"\n              href=\"#\"\n              label=\"Some action\"\n              icon={ArrowRightIcon}\n            />\n          </NavList.Item>\n          <NavList.Item>\n            Item 3\n            <NavList.SubNav>\n              <NavList.Item href=\"#\">\n                Sub item 1\n                <NavList.TrailingAction\n                  label=\"Another action\"\n                  icon={BookIcon}\n                />\n              </NavList.Item>\n            </NavList.SubNav>\n          </NavList.Item>\n        </NavList>\n      </PageLayout.Pane>\n    </PageLayout>\n  )\n}"
+        }
+      ],
       "importPath": "@primer/react",
       "props": [
         {
@@ -4288,11 +4271,6 @@
           "type": "string",
           "defaultValue": "text-bottom",
           "description": "Sets the `vertical-align` CSS property"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -4314,7 +4292,7 @@
         },
         {
           "id": "private-components-overlay-features--positioned-overlays",
-          "code": "({ right, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [direction, setDirection] = useState<'left' | 'right'>(\n    right ? 'right' : 'left',\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('left')\n        }}\n      >\n        Open left overlay\n      </Button>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('right')\n        }}\n        sx={{\n          mt: 2,\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonLeft}\n                />\n                <Text>Look! left aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonRight}\n                />\n                <Text>Look! right aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        )\n      ) : null}\n    </div>\n  )\n}"
+          "code": "({ right, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [direction, setDirection] = useState<'left' | 'right'>(\n    right ? 'right' : 'left',\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('left')\n        }}\n      >\n        Open left overlay\n      </Button>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('right')\n        }}\n        style={{\n          marginTop: '8px',\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonLeft}\n                />\n                <Text>Look! left aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonRight}\n                />\n                <Text>Look! right aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        )\n      ) : null}\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -4840,7 +4818,7 @@
       "stories": [
         {
           "id": "components-pagelayout--default",
-          "code": "(args) => (\n  <PageLayout\n    containerWidth={args.containerWidth}\n    padding={args.padding}\n    rowGap={args.rowGap}\n    columnGap={args.columnGap}\n    sx={args.sx}\n  >\n    {args['Render header?'] ? (\n      <PageLayout.Header\n        padding={args['Header.padding']}\n        divider={{\n          narrow: args['Header.divider.narrow'],\n          regular: args['Header.divider.regular'],\n          wide: args['Header.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Header.hidden.narrow'],\n          regular: args['Header.hidden.regular'],\n          wide: args['Header.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Header placeholder height']}\n          label=\"Header\"\n        />\n      </PageLayout.Header>\n    ) : null}\n    <PageLayout.Content\n      width={args['Content.width']}\n      padding={args['Content.padding']}\n      hidden={{\n        narrow: args['Content.hidden.narrow'],\n        regular: args['Content.hidden.regular'],\n        wide: args['Content.hidden.wide'],\n      }}\n    >\n      <Placeholder\n        height={args['Content placeholder height']}\n        label=\"Content\"\n      />\n    </PageLayout.Content>\n    {args['Render pane?'] ? (\n      <PageLayout.Pane\n        position={{\n          narrow: args['Pane.position.narrow'],\n          regular: args['Pane.position.regular'],\n          wide: args['Pane.position.wide'],\n        }}\n        width={args['Pane.width']}\n        minWidth={args['Pane.minWidth']}\n        sticky={args['Pane.sticky']}\n        resizable={args['Pane.resizable']}\n        padding={args['Pane.padding']}\n        divider={{\n          narrow: args['Pane.divider.narrow'],\n          regular: args['Pane.divider.regular'],\n          wide: args['Pane.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Pane.hidden.narrow'],\n          regular: args['Pane.hidden.regular'],\n          wide: args['Pane.hidden.wide'],\n        }}\n      >\n        <Placeholder height={args['Pane placeholder height']} label=\"Pane\" />\n      </PageLayout.Pane>\n    ) : null}\n    {args['Render footer?'] ? (\n      <PageLayout.Footer\n        padding={args['Footer.padding']}\n        divider={{\n          narrow: args['Footer.divider.narrow'],\n          regular: args['Footer.divider.regular'],\n          wide: args['Footer.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Footer.hidden.narrow'],\n          regular: args['Footer.hidden.regular'],\n          wide: args['Footer.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Footer placeholder height']}\n          label=\"Footer\"\n        />\n      </PageLayout.Footer>\n    ) : null}\n  </PageLayout>\n)"
+          "code": "(args) => (\n  <PageLayout\n    containerWidth={args.containerWidth}\n    padding={args.padding}\n    rowGap={args.rowGap}\n    columnGap={args.columnGap}\n  >\n    {args['Render header?'] ? (\n      <PageLayout.Header\n        padding={args['Header.padding']}\n        divider={{\n          narrow: args['Header.divider.narrow'],\n          regular: args['Header.divider.regular'],\n          wide: args['Header.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Header.hidden.narrow'],\n          regular: args['Header.hidden.regular'],\n          wide: args['Header.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Header placeholder height']}\n          label=\"Header\"\n        />\n      </PageLayout.Header>\n    ) : null}\n    <PageLayout.Content\n      width={args['Content.width']}\n      padding={args['Content.padding']}\n      hidden={{\n        narrow: args['Content.hidden.narrow'],\n        regular: args['Content.hidden.regular'],\n        wide: args['Content.hidden.wide'],\n      }}\n    >\n      <Placeholder\n        height={args['Content placeholder height']}\n        label=\"Content\"\n      />\n    </PageLayout.Content>\n    {args['Render pane?'] ? (\n      <PageLayout.Pane\n        position={{\n          narrow: args['Pane.position.narrow'],\n          regular: args['Pane.position.regular'],\n          wide: args['Pane.position.wide'],\n        }}\n        width={args['Pane.width']}\n        minWidth={args['Pane.minWidth']}\n        sticky={args['Pane.sticky']}\n        resizable={args['Pane.resizable']}\n        padding={args['Pane.padding']}\n        divider={{\n          narrow: args['Pane.divider.narrow'],\n          regular: args['Pane.divider.regular'],\n          wide: args['Pane.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Pane.hidden.narrow'],\n          regular: args['Pane.hidden.regular'],\n          wide: args['Pane.hidden.wide'],\n        }}\n      >\n        <Placeholder height={args['Pane placeholder height']} label=\"Pane\" />\n      </PageLayout.Pane>\n    ) : null}\n    {args['Render footer?'] ? (\n      <PageLayout.Footer\n        padding={args['Footer.padding']}\n        divider={{\n          narrow: args['Footer.divider.narrow'],\n          regular: args['Footer.divider.regular'],\n          wide: args['Footer.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Footer.hidden.narrow'],\n          regular: args['Footer.hidden.regular'],\n          wide: args['Footer.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Footer placeholder height']}\n          label=\"Footer\"\n        />\n      </PageLayout.Footer>\n    ) : null}\n  </PageLayout>\n)"
         },
         {
           "id": "components-pagelayout-features--pull-request-page",
@@ -4970,6 +4948,12 @@
               "description": "An id to an element which uniquely labels the rendered main landmark",
               "defaultValue": ""
             },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'main'",
+              "description": "Change the root node to another HTML element or custom component."
+            },
             {
               "name": "width",
               "type": "| 'full' | 'medium' | 'large' | 'xlarge'",
@@ -5890,7 +5874,7 @@
         },
         {
           "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
-          "code": "() => (\n  <div className={classes.LabelAndCaptionContainer}>\n    <div className={classes.LabelAndCaption}>\n      <Text className={classes.TextLargeBold} id=\"scLabel-vert\" display=\"block\">\n        File view\n      </Text>\n      <Text\n        className={classes.TextMediumSubtle}\n        id=\"scCaption-vert\"\n        display=\"block\"\n      >\n        Change the way the file is viewed\n      </Text>\n    </div>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </div>\n)"
+          "code": "() => (\n  <div className={classes.LabelAndCaptionContainer}>\n    <div className={classes.LabelAndCaption}>\n      <Text\n        className={classes.TextLargeBold}\n        id=\"scLabel-vert\"\n        style={{\n          display: 'block',\n        }}\n      >\n        File view\n      </Text>\n      <Text\n        className={classes.TextMediumSubtle}\n        id=\"scCaption-vert\"\n        style={{\n          display: 'block',\n        }}\n      >\n        Change the way the file is viewed\n      </Text>\n    </div>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6646,6 +6630,12 @@
               "description": "An id to an element which uniquely labels the rendered main landmark",
               "defaultValue": ""
             },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'main'",
+              "description": "Change the root node to another HTML element or custom component."
+            },
             {
               "name": "width",
               "type": "| 'full' | 'medium' | 'large' | 'xlarge'",
@@ -7291,24 +7281,24 @@
         },
         {
           "name": "width",
-          "type": "string | number | Array<string | number>",
+          "type": "string | number",
           "defaultValue": "",
           "deprecated": true,
-          "description": "(Use sx prop) Set the width of the input"
+          "description": "(Use css modules) Set the width of the input"
         },
         {
           "name": "maxWidth",
-          "type": "string | number | Array<string | number>",
+          "type": "string | number",
           "defaultValue": "",
           "deprecated": true,
-          "description": "(Use sx prop) Set the maximum width of the input"
+          "description": "(Use css modules) Set the maximum width of the input"
         },
         {
           "name": "minWidth",
-          "type": "string | number | Array<string | number>",
+          "type": "string | number",
           "defaultValue": "",
           "deprecated": true,
-          "description": "(Use sx prop) Set the minimum width of the input"
+          "description": "(Use css modules) Set the minimum width of the input"
         },
         {
           "name": "icon",
@@ -7631,7 +7621,7 @@
         },
         {
           "id": "components-timeline-features--timeline-break",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge className={classes.BadgeWithDoneBackground}>\n        <Octicon\n          icon={GitMergeIcon}\n          color=\"fg.onEmphasis\"\n          aria-label=\"Merged\"\n        />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge className={classes.BadgeWithDoneBackground}>\n        <Octicon\n          icon={GitMergeIcon}\n          className={classes.GitMergeIcon}\n          aria-label=\"Merged\"\n        />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--with-inline-links",
@@ -8121,7 +8111,7 @@
       "stories": [
         {
           "id": "components-treeview--default",
-          "code": "() => (\n  <nav aria-label=\"Files changed\">\n    <TreeView aria-label=\"Files changed\">\n      <TreeView.Item id=\"src\" defaultExpanded>\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id=\"src/Avatar.tsx\">\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Avatar.tsx\n            <TreeView.TrailingVisual label=\"Added\">\n              <Octicon icon={DiffAddedIcon} color=\"success.fg\" />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n          <TreeView.Item id=\"src/Button.tsx\" current>\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Button.tsx\n            <TreeView.TrailingVisual label=\"Modified\">\n              <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n      <TreeView.Item id=\"package.json\">\n        <TreeView.LeadingVisual>\n          <FileIcon />\n        </TreeView.LeadingVisual>\n        package.json\n        <TreeView.TrailingVisual label=\"Modified\">\n          <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n        </TreeView.TrailingVisual>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n)"
+          "code": "() => (\n  <nav aria-label=\"Files changed\">\n    <TreeView aria-label=\"Files changed\">\n      <TreeView.Item id=\"src\" defaultExpanded>\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id=\"src/Avatar.tsx\">\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Avatar.tsx\n            <TreeView.TrailingVisual label=\"Added\">\n              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n          <TreeView.Item id=\"src/Button.tsx\" current>\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Button.tsx\n            <TreeView.TrailingVisual label=\"Modified\">\n              <Octicon\n                icon={DiffModifiedIcon}\n                className={classes.AttentionIcon}\n              />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n      <TreeView.Item id=\"package.json\">\n        <TreeView.LeadingVisual>\n          <FileIcon />\n        </TreeView.LeadingVisual>\n        package.json\n        <TreeView.TrailingVisual label=\"Modified\">\n          <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />\n        </TreeView.TrailingVisual>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n)"
         },
         {
           "id": "components-treeview-features--files",
@@ -8129,7 +8119,7 @@
         },
         {
           "id": "components-treeview-features--files-changed",
-          "code": "() => {\n  return (\n    <nav aria-label=\"Files\">\n      <TreeView aria-label=\"Files\" truncate={false}>\n        <TreeView.Item id=\"src\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          src\n          <TreeView.SubTree>\n            <TreeView.Item id=\"src/Avatar.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              Avatar.tsx\n              <TreeView.TrailingVisual label=\"added\">\n                <Octicon icon={DiffAddedIcon} color=\"success.fg\" />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/Button\" defaultExpanded>\n              <TreeView.LeadingVisual>\n                <TreeView.DirectoryIcon />\n              </TreeView.LeadingVisual>\n              Button\n              <TreeView.SubTree>\n                <TreeView.Item id=\"src/Button/Button.tsx\" current>\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n                <TreeView.Item id=\"src/Button/Button.test.tsx\">\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.test.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n              </TreeView.SubTree>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/ReallyLongFileNameThatShouldBeTruncated.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              ReallyLongFileNameThatShouldBeTruncated.tsx\n              <TreeView.TrailingVisual label=\"modified\">\n                <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n        <TreeView.Item id=\"public\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          public\n          <TreeView.SubTree>\n            <TreeView.Item id=\"public/index.html\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              index.html\n              <TreeView.TrailingVisual label=\"renamed\">\n                <Octicon icon={DiffRenamedIcon} />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"public/favicon.ico\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              favicon.ico\n              <TreeView.TrailingVisual label=\"removed\">\n                <Octicon icon={DiffRemovedIcon} color=\"danger.fg\" />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n      </TreeView>\n    </nav>\n  )\n}"
+          "code": "() => {\n  return (\n    <nav aria-label=\"Files\">\n      <TreeView aria-label=\"Files\" truncate={false}>\n        <TreeView.Item id=\"src\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          src\n          <TreeView.SubTree>\n            <TreeView.Item id=\"src/Avatar.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              Avatar.tsx\n              <TreeView.TrailingVisual label=\"added\">\n                <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/Button\" defaultExpanded>\n              <TreeView.LeadingVisual>\n                <TreeView.DirectoryIcon />\n              </TreeView.LeadingVisual>\n              Button\n              <TreeView.SubTree>\n                <TreeView.Item id=\"src/Button/Button.tsx\" current>\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon\n                      icon={DiffModifiedIcon}\n                      className={classes.AttentionIcon}\n                    />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n                <TreeView.Item id=\"src/Button/Button.test.tsx\">\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.test.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon\n                      icon={DiffModifiedIcon}\n                      className={classes.AttentionIcon}\n                    />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n              </TreeView.SubTree>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/ReallyLongFileNameThatShouldBeTruncated.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              ReallyLongFileNameThatShouldBeTruncated.tsx\n              <TreeView.TrailingVisual label=\"modified\">\n                <Octicon\n                  icon={DiffModifiedIcon}\n                  className={classes.AttentionIcon}\n                />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n        <TreeView.Item id=\"public\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          public\n          <TreeView.SubTree>\n            <TreeView.Item id=\"public/index.html\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              index.html\n              <TreeView.TrailingVisual label=\"renamed\">\n                <Octicon icon={DiffRenamedIcon} />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"public/favicon.ico\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              favicon.ico\n              <TreeView.TrailingVisual label=\"removed\">\n                <Octicon\n                  icon={DiffRemovedIcon}\n                  className={classes.DangerIcon}\n                />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n      </TreeView>\n    </nav>\n  )\n}"
         },
         {
           "id": "components-treeview-features--async-success",
@@ -8692,7 +8682,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-groups",
-          "code": "() => {\n  /* Selection */\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const onCollaboratorSelect = (colloratorId: string) => {\n    if (!selectedAssigneeIds.includes(colloratorId))\n      setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])\n    else\n      setSelectedAssigneeIds(\n        selectedAssigneeIds.filter((id) => id !== colloratorId),\n      )\n  }\n  const onClearSelection = () => setSelectedAssigneeIds([])\n  const onSubmit = () => {\n    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedAssigneeIds(initialAssigneeIds)\n  }\n\n  /* Filtering */\n  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredUsers(data.collaborators)\n    else {\n      setFilteredUsers(\n        data.collaborators\n          .map((collaborator) => {\n            if (collaborator.login.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                collaborator,\n              }\n            else if (collaborator.name.startsWith(query))\n              return {\n                priority: 2,\n                collaborator,\n              }\n            else if (collaborator.login.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                collaborator,\n              }\n            else if (collaborator.name.toLowerCase().includes(query))\n              return {\n                priority: 4,\n                collaborator,\n              }\n            else\n              return {\n                priority: -1,\n                collaborator,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.collaborator),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.assigneeIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n  return (\n    <>\n      <h1>SelectPanel with groups</h1>\n\n      <SelectPanel\n        title=\"Request up to 100 reviewers\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          sx={{\n            width: '200px',\n            '[data-component=buttonContent]': {\n              justifyContent: 'start',\n            },\n          }}\n        >\n          Reviewers\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Suggestions\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Everyone else\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => !collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  /* Selection */\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const onCollaboratorSelect = (collaboratorId: string) => {\n    if (!selectedAssigneeIds.includes(collaboratorId))\n      setSelectedAssigneeIds([...selectedAssigneeIds, collaboratorId])\n    else\n      setSelectedAssigneeIds(\n        selectedAssigneeIds.filter((id) => id !== collaboratorId),\n      )\n  }\n  const onClearSelection = () => setSelectedAssigneeIds([])\n  const onSubmit = () => {\n    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedAssigneeIds(initialAssigneeIds)\n  }\n\n  /* Filtering */\n  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredUsers(data.collaborators)\n    else {\n      setFilteredUsers(\n        data.collaborators\n          .map((collaborator) => {\n            if (collaborator.login.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                collaborator,\n              }\n            else if (collaborator.name.startsWith(query))\n              return {\n                priority: 2,\n                collaborator,\n              }\n            else if (collaborator.login.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                collaborator,\n              }\n            else if (collaborator.name.toLowerCase().includes(query))\n              return {\n                priority: 4,\n                collaborator,\n              }\n            else\n              return {\n                priority: -1,\n                collaborator,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.collaborator),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.assigneeIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n  return (\n    <>\n      <h1>SelectPanel with groups</h1>\n\n      <SelectPanel\n        title=\"Request up to 100 reviewers\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          style={{\n            width: '200px',\n          }}\n          className={classes.ButtonContentStartJustify}\n        >\n          Reviewers\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Suggestions\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Everyone else\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => !collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-examples--async-search-with-use-transition",
@@ -8704,7 +8694,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-filter-buttons",
-          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight:\n                  selectedFilter === 'branches' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'branches'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'tags'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",