@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

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": [
@@ -96,6 +101,16 @@
         {
           "name": "ActionBar.Divider",
           "props": []
+        },
+        {
+          "name": "ActionBar.Group",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "defaultValue": ""
+            }
+          ]
         }
       ]
     },
@@ -275,11 +290,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 +362,6 @@
               "required": false,
               "description": "id to attach to the root element of the Item",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -383,11 +388,6 @@
               "required": false,
               "description": "",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -422,11 +422,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 +438,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Icon (or similar) positioned before item text."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -460,11 +450,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Visual positioned after item text."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -521,11 +506,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 +556,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 +599,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
             }
           ]
         }
@@ -796,7 +755,7 @@
       "stories": [
         {
           "id": "components-anchoredoverlay--default",
-          "code": "() => {\n  const [open, setOpen] = useState(false)\n  return (\n    <AnchoredOverlay\n      open={open}\n      onOpen={() => setOpen(true)}\n      onClose={() => setOpen(false)}\n      renderAnchor={(props) => <Button {...props}>Button</Button>}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        sx: {\n          minWidth: '320px',\n        },\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      {hoverCard}\n    </AnchoredOverlay>\n  )\n}"
+          "code": "() => {\n  const [open, setOpen] = useState(false)\n  return (\n    <AnchoredOverlay\n      open={open}\n      onOpen={() => setOpen(true)}\n      onClose={() => setOpen(false)}\n      renderAnchor={(props) => <Button {...props}>Button</Button>}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        style: {\n          minWidth: '320px',\n        },\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      {hoverCard}\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--portal-inside-scrolling-element",
@@ -989,7 +948,7 @@
       "stories": [
         {
           "id": "components-autocomplete--default",
-          "code": "() => {\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n      onSubmit={(event) => event.preventDefault()}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-default\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-default\"\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form\n      className={classes.DefaultForm}\n      onSubmit={(event) => event.preventDefault()}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-default\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-default\"\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--with-token-input",
@@ -1209,11 +1168,6 @@
           "required": false,
           "description": "URL of the avatar image.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1289,11 +1243,6 @@
           "type": "string",
           "description": "Class name for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1304,67 +1253,67 @@
       "name": "Banner",
       "status": "alpha",
       "a11yReviewed": "2025-01-08",
-      "importPath": "@primer/react/experimental",
+      "importPath": "@primer/react",
       "stories": [
         {
-          "id": "experimental-components-banner--default",
+          "id": "components-banner--default",
           "code": "() => {\n  return (\n    <Banner\n      onDismiss={action('onDismiss')}\n      title=\"Info\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--critical",
+          "id": "components-banner-features--critical",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Critical\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      variant=\"critical\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--info",
+          "id": "components-banner-features--info",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Info\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"info\"\n    ></Banner>\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--success",
+          "id": "components-banner-features--success",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Success\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"success\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--upsell",
+          "id": "components-banner-features--upsell",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Upsell\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"upsell\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--warning",
+          "id": "components-banner-features--warning",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"warning\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismiss",
+          "id": "components-banner-features--dismiss",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Notice\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismiss-with-actions",
+          "id": "components-banner-features--dismiss-with-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Notice\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--with-hidden-title",
+          "id": "components-banner-features--with-hidden-title",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      variant=\"warning\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--with-hidden-title-and-actions",
+          "id": "components-banner-features--with-hidden-title-and-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      variant=\"warning\"\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-actions",
+          "id": "components-banner-features--dismissible-with-hidden-title-and-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"warning\"\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action",
+          "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"warning\"\n      secondaryAction={\n        <Banner.SecondaryAction leadingVisual={GitPullRequestIcon}>\n          Button\n        </Banner.SecondaryAction>\n      }\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--with-actions",
+          "id": "components-banner-features--with-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n      variant=\"warning\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--custom-icon",
+          "id": "components-banner-features--custom-icon",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Upsell\"\n      description=\"An example banner with a custom icon\"\n      icon={<CopilotIcon />}\n      onDismiss={action('onDismiss')}\n      variant=\"upsell\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-examples--with-announcement",
-          "code": "() => {\n  type Choice = 'one' | 'two' | 'three'\n  const messages: Map<Choice, string> = new Map([\n    ['one', 'This is a message for choice one'],\n    ['two', 'This is a message for choice two'],\n    ['three', 'This is a message for choice three'],\n  ])\n  const [selected, setSelected] = React.useState<Choice>('one')\n  return (\n    <>\n      <Banner\n        title=\"Info\"\n        description={<AriaStatus>{messages.get(selected)}</AriaStatus>}\n        onDismiss={action('onDismiss')}\n        primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n        secondaryAction={\n          <Banner.SecondaryAction>Button</Banner.SecondaryAction>\n        }\n      />\n      <RadioGroup\n        sx={{\n          marginTop: 4,\n        }}\n        name=\"options\"\n        onChange={(selected) => {\n          setSelected(selected as Choice)\n        }}\n      >\n        <RadioGroup.Label>Choices</RadioGroup.Label>\n        <FormControl>\n          <Radio value=\"one\" defaultChecked />\n          <FormControl.Label>Choice one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"two\" />\n          <FormControl.Label>Choice two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"three\" />\n          <FormControl.Label>Choice three</FormControl.Label>\n        </FormControl>\n      </RadioGroup>\n    </>\n  )\n}"
+          "id": "components-banner-examples--with-announcement",
+          "code": "() => {\n  type Choice = 'one' | 'two' | 'three'\n  const messages: Map<Choice, string> = new Map([\n    ['one', 'This is a message for choice one'],\n    ['two', 'This is a message for choice two'],\n    ['three', 'This is a message for choice three'],\n  ])\n  const [selected, setSelected] = React.useState<Choice>('one')\n  return (\n    <>\n      <Banner\n        title=\"Info\"\n        description={<AriaStatus>{messages.get(selected)}</AriaStatus>}\n        onDismiss={action('onDismiss')}\n        primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n        secondaryAction={\n          <Banner.SecondaryAction>Button</Banner.SecondaryAction>\n        }\n      />\n      <RadioGroup\n        name=\"options\"\n        onChange={(selected) => {\n          setSelected(selected as Choice)\n        }}\n        className={classes.RadioGroupWithTopMargin}\n      >\n        <RadioGroup.Label>Choices</RadioGroup.Label>\n        <FormControl>\n          <Radio value=\"one\" defaultChecked />\n          <FormControl.Label>Choice one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"two\" />\n          <FormControl.Label>Choice two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"three\" />\n          <FormControl.Label>Choice three</FormControl.Label>\n        </FormControl>\n      </RadioGroup>\n    </>\n  )\n}"
         }
       ],
       "props": [
@@ -1416,7 +1365,17 @@
         {
           "name": "variant",
           "type": "'critical' | 'info' | 'success' | 'upsell' | 'warning'",
-          "description": ""
+          "description": "Specify the type of the Banner"
+        },
+        {
+          "name": "layout",
+          "type": "'default' | 'compact'",
+          "description": "Specify the layout of the Banner. Compact layout will reduce the padding."
+        },
+        {
+          "name": "actionsLayout",
+          "type": "'default' | 'inline' | 'stacked'",
+          "description": "Override the responsive layout of the action buttons. 'inline' layout will display the buttons inline with the title and description, while 'stacked' layout will always render the buttons in a new row."
         }
       ],
       "subcomponents": [
@@ -1569,53 +1528,6 @@
         }
       ]
     },
-    "box": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/Box",
-      "id": "box",
-      "name": "Box",
-      "status": "deprecated",
-      "a11yReviewed": "2025-01-08",
-      "stories": [
-        {
-          "id": "deprecated-components-box--default",
-          "code": "() => <Box>Default Box</Box>"
-        },
-        {
-          "id": "deprecated-components-box-features--border",
-          "code": "() => (\n  <Box\n    sx={{\n      borderWidth: 1,\n      borderStyle: 'solid',\n      borderColor: 'border.default',\n      p: 3,\n    }}\n  >\n    Box with border\n  </Box>\n)"
-        },
-        {
-          "id": "deprecated-components-box-features--border-bottom",
-          "code": "() => (\n  <Box\n    sx={{\n      borderBottomWidth: 1,\n      borderBottomStyle: 'solid',\n      borderColor: 'border.default',\n      p: 3,\n    }}\n  >\n    Box with bottom border\n  </Box>\n)"
-        },
-        {
-          "id": "deprecated-components-box-features--flexbox",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n    }}\n  >\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      1\n    </Box>\n    <Box\n      sx={{\n        flexGrow: 1,\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      2\n    </Box>\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      3\n    </Box>\n  </Box>\n)"
-        },
-        {
-          "id": "deprecated-components-box-features--grid",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: '1fr 1fr',\n      gap: 3,\n    }}\n  >\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      1\n    </Box>\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      2\n    </Box>\n    <Box\n      sx={{\n        p: 3,\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderColor: 'border.default',\n      }}\n    >\n      3\n    </Box>\n  </Box>\n)"
-        }
-      ],
-      "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLDivElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": []
-    },
     "branch_name": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/BranchName",
       "id": "branch_name",
@@ -1646,11 +1558,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"a\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1673,19 +1580,21 @@
           "name": "className",
           "type": "string",
           "required": false,
-          "description": "",
+          "description": "Additional CSS class names to apply to the breadcrumbs container",
           "defaultValue": ""
         },
         {
           "name": "children",
           "type": "Breadcrumbs.Item[]",
           "defaultValue": "",
-          "description": ""
+          "description": "Breadcrumb items to render. Each item should be a Breadcrumbs.Item component."
         },
         {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
+          "name": "overflow",
+          "type": "'wrap' | 'menu' | 'menu-with-root'",
+          "required": false,
+          "description": "How to handle overflow when breadcrumbs don't fit in the container. 'wrap' allows items to wrap to new lines. 'menu' collapses items into an overflow menu. 'menu-with-root' also collapses items into an overflow menu but includes the root (first) breadcrumb in the menu so only the last items remain visible.",
+          "defaultValue": "'wrap'"
         }
       ],
       "subcomponents": [
@@ -1696,7 +1605,7 @@
               "name": "selected",
               "type": "boolean",
               "defaultValue": "false",
-              "description": "Whether this item represents the current page"
+              "description": "Whether this item represents the current page. Sets aria-current='page' for accessibility."
             },
             {
               "name": "to",
@@ -1705,6 +1614,18 @@
               "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to.",
               "defaultValue": ""
             },
+            {
+              "name": "href",
+              "type": "string",
+              "required": false,
+              "description": "The URL that the breadcrumb item links to. Used with regular anchor elements."
+            },
+            {
+              "name": "children",
+              "type": "React.ReactNode",
+              "required": true,
+              "description": "The content to display inside the breadcrumb item, typically text."
+            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLAnchorElement>"
@@ -1713,11 +1634,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -1832,7 +1748,7 @@
         },
         {
           "id": "components-button-features--inactive-button-with-tooltip",
-          "code": "() => (\n  <Tooltip\n    text=\"Action unavailable: an error occurred while loading respository permissions\"\n    direction=\"n\"\n  >\n    <Button inactive>Review changes</Button>\n  </Tooltip>\n)"
+          "code": "() => (\n  <Tooltip\n    text=\"Action unavailable: an error occurred while loading repository permissions\"\n    direction=\"n\"\n  >\n    <Button inactive>Review changes</Button>\n  </Tooltip>\n)"
         },
         {
           "id": "components-button-features--expanded-button",
@@ -1907,11 +1823,6 @@
           "type": "'small'\n| 'medium'\n| 'large'",
           "defaultValue": "'medium'"
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "trailingIcon",
           "type": "React.ComponentType<OcticonProps>",
@@ -2097,11 +2008,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": []
@@ -2136,11 +2042,6 @@
       ],
       "importPath": "@primer/react",
       "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -2161,19 +2062,19 @@
         },
         {
           "id": "components-checkbox-features--with-leading-visual",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--disabled",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl disabled>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl disabled>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--with-caption",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--indeterminate",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <Checkbox value=\"default\" indeterminate />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <Checkbox value=\"default\" indeterminate />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -2228,11 +2129,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -2307,11 +2203,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "If true, the user must make a selection before the owning form can be submitted"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -2323,11 +2214,6 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, the fieldset legend will be visually hidden"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -2339,11 +2225,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The caption content"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -2362,11 +2243,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Changes the visual style to match the validation status"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -2376,11 +2252,11 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleBadge",
       "id": "circle_badge",
       "name": "CircleBadge",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-circlebadge--default",
+          "id": "deprecated-components-circlebadge--default",
           "code": "() => (\n  <CircleBadge>\n    <CircleBadge.Icon icon={ZapIcon} aria-label=\"User badge\" />\n  </CircleBadge>\n)"
         }
       ],
@@ -2412,11 +2288,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -2436,38 +2307,6 @@
         }
       ]
     },
-    "circle_octicon": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
-      "id": "circle_octicon",
-      "name": "CircleOcticon",
-      "status": "alpha",
-      "a11yReviewed": "2025-01-08",
-      "stories": [
-        {
-          "id": "components-circleocticon--default",
-          "code": "() => (\n  <CircleOcticon\n    icon={CheckIcon}\n    size={32}\n    sx={{\n      backgroundColor: 'success.emphasis',\n      color: 'fg.onEmphasis',\n    }}\n    aria-label=\"Changes approved\"\n  />\n)"
-        }
-      ],
-      "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "icon",
-          "type": "Octicon"
-        },
-        {
-          "name": "size",
-          "defaultValue": "32",
-          "type": "number",
-          "description": "Set the width and height of the icon in pixels."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": []
-    },
     "confirmationdialog": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/ConfirmationDialog",
       "id": "confirmationdialog",
@@ -2483,11 +2322,15 @@
         },
         {
           "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",
           "code": "() => {\n  const confirm = useConfirm()\n  const [text, setText] = useState('open me')\n  const onButtonClick = useCallback(async () => {\n    if (\n      await confirm({\n        title: 'Are you sure?',\n        content: 'Do you really want to do a trick?',\n      })\n    ) {\n      setText('tada!')\n    }\n  }, [confirm])\n  return (\n    <div className={classes.ButtonContainer}>\n      <ActionMenu>\n        <ActionMenu.Button>{text}</ActionMenu.Button>\n        <ActionMenu.Overlay>\n          <ActionList>\n            <ActionList.Item onSelect={onButtonClick}>\n              Do a trick!\n            </ActionList.Item>\n          </ActionList>\n        </ActionMenu.Overlay>\n      </ActionMenu>\n    </div>\n  )\n}"
+        },
+        {
+          "id": "components-confirmationdialog-features--loading-states",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [isConfirmLoading, setIsConfirmLoading] = useState(false)\n  const [isCancelLoading, setIsCancelLoading] = useState(false)\n  const handleConfirm = useCallback(() => {\n    setIsConfirmLoading(true)\n    // Simulate async operation\n    setTimeout(() => {\n      setIsConfirmLoading(false)\n      setIsOpen(false)\n    }, 2000)\n  }, [])\n  const handleCancel = useCallback(() => {\n    setIsCancelLoading(true)\n    // Simulate async operation\n    setTimeout(() => {\n      setIsCancelLoading(false)\n      setIsOpen(false)\n    }, 1500)\n  }, [])\n  const handleClose = useCallback(\n    (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => {\n      if (gesture === 'confirm') {\n        handleConfirm()\n      } else if (gesture === 'cancel') {\n        handleCancel()\n      } else {\n        setIsOpen(false)\n      }\n    },\n    [handleConfirm, handleCancel],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={() => setIsOpen(true)}>Show Loading Dialog</Button>\n      {isOpen && (\n        <ConfirmationDialog\n          title=\"Delete this file?\"\n          confirmButtonType=\"danger\"\n          confirmButtonContent=\"Delete\"\n          confirmButtonLoading={isConfirmLoading}\n          cancelButtonLoading={isCancelLoading}\n          onClose={handleClose}\n        >\n          This action cannot be undone. The file will be permanently deleted\n          from your repository.\n        </ConfirmationDialog>\n      )}\n    </div>\n  )\n}"
         }
       ],
       "props": [
@@ -2521,6 +2364,11 @@
           "defaultValue": "normal",
           "description": "The type of button to use for the confirm button."
         },
+        {
+          "name": "overrideButtonFocus",
+          "type": "'confirm' | 'cancel'",
+          "description": "The button that should be initially focused when the dialog is opened. By default, the initial button focus is the confirm button, unless the confirm button is dangerous, in which case the cancel button is focused. This prop should be used rarely, as it can allow dangerous actions to be taken accidentally."
+        },
         {
           "name": "className",
           "type": "string",
@@ -2572,11 +2420,6 @@
           "type": "string",
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "BetterSystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -3035,13 +2878,7 @@
         }
       ],
       "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
+      "props": [],
       "subcomponents": [
         {
           "name": "Details.Summary",
@@ -3056,11 +2893,6 @@
             {
               "name": "children",
               "type": "React.ReactNode"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -3088,7 +2920,7 @@
         },
         {
           "id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer",
-          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: 4,\n              }}\n            >\n              <Box\n                sx={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                }}\n              >\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Box>\n              <Box\n                sx={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                }}\n              >\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Box>\n            </Box>\n          ) : (\n            <div>\n              <Box\n                sx={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: 1,\n                }}\n              >\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Box>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
+          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Stack gap=\"spacious\" direction=\"vertical\">\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n            </Stack>\n          ) : (\n            <div>\n              <Stack gap=\"condensed\" direction=\"vertical\">\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Stack>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
         },
         {
           "id": "components-dialog-features--bottom-sheet-narrow",
@@ -3112,7 +2944,7 @@
         },
         {
           "id": "components-dialog-features--retains-focus-trap-with-dynamic-content",
-          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [secondOpen, setSecondOpen] = useState(false)\n  const [expandContent, setExpandContent] = useState(false)\n  const [changeBodyContent, setChangeBodyContent] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n  const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n  const renderFooterConditionally = () => {\n    if (!changeBodyContent) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  return (\n    <>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        Show dialog\n      </Button>\n      {isOpen && (\n        <Dialog\n          title=\"My Dialog\"\n          onClose={onDialogClose}\n          renderFooter={renderFooterConditionally}\n        >\n          <Button onClick={() => setExpandContent(!expandContent)}>\n            Click me to dynamically {expandContent ? 'remove' : 'render'}{' '}\n            content\n          </Button>\n          <Button onClick={() => setChangeBodyContent(!changeBodyContent)}>\n            Click me to {changeBodyContent ? 'remove' : 'add'} a footer\n          </Button>\n          <Button onClick={openSecondDialog}>\n            Click me to open a new dialog\n          </Button>\n          {expandContent && (\n            <Box>\n              {lipsum}\n              <Button>Dialog Button Example 1</Button>\n              <Button>Dialog Button Example 2</Button>\n            </Box>\n          )}\n          {secondOpen && (\n            <Dialog\n              title=\"Inner dialog!\"\n              onClose={onSecondDialogClose}\n              width=\"small\"\n            >\n              Hello world\n            </Dialog>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [secondOpen, setSecondOpen] = useState(false)\n  const [expandContent, setExpandContent] = useState(false)\n  const [changeBodyContent, setChangeBodyContent] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n  const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n  const renderFooterConditionally = () => {\n    if (!changeBodyContent) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  return (\n    <>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        Show dialog\n      </Button>\n      {isOpen && (\n        <Dialog\n          title=\"My Dialog\"\n          onClose={onDialogClose}\n          renderFooter={renderFooterConditionally}\n        >\n          <Button onClick={() => setExpandContent(!expandContent)}>\n            Click me to dynamically {expandContent ? 'remove' : 'render'}{' '}\n            content\n          </Button>\n          <Button onClick={() => setChangeBodyContent(!changeBodyContent)}>\n            Click me to {changeBodyContent ? 'remove' : 'add'} a footer\n          </Button>\n          <Button onClick={openSecondDialog}>\n            Click me to open a new dialog\n          </Button>\n          {expandContent && (\n            <Stack gap=\"normal\" direction=\"vertical\">\n              {lipsum}\n              <Button>Dialog Button Example 1</Button>\n              <Button>Dialog Button Example 2</Button>\n            </Stack>\n          )}\n          {secondOpen && (\n            <Dialog\n              title=\"Inner dialog!\"\n              onClose={onSecondDialogClose}\n              width=\"small\"\n            >\n              Hello world\n            </Dialog>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -3258,83 +3090,11 @@
         }
       ]
     },
-    "dialog": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/DialogV1",
-      "id": "dialog",
-      "docsId": "dialog",
-      "name": "Dialog",
-      "status": "deprecated",
-      "a11yReviewed": false,
-      "stories": [
-        {
-          "id": "components-dialog--default",
-          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <Box\n        sx={{\n          mb: 3,\n        }}\n      >\n        <Banner\n          title=\"This component is deprecated\"\n          description=\"We recommend using Dialog instead.\"\n          variant=\"warning\"\n        />\n      </Box>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <Box p={3}>\n            <Text>Some content</Text>\n          </Box>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"
-        }
-      ],
-      "importPath": "@primer/react/deprecated",
-      "props": [
-        {
-          "name": "isOpen",
-          "type": "boolean",
-          "description": "Whether or not the dialog is open"
-        },
-        {
-          "name": "onDismiss",
-          "type": "() => void",
-          "description": "Function that will be called when the dialog is closed"
-        },
-        {
-          "name": "returnFocusRef",
-          "type": " React.RefObject<HTMLElement>",
-          "description": "The element to restore focus back to after the `Dialog` is closed"
-        },
-        {
-          "name": "initialFocusRef",
-          "type": " React.RefObject<HTMLElement>",
-          "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
-        },
-        {
-          "name": "narrow",
-          "type": "boolean"
-        },
-        {
-          "name": "wide",
-          "type": "boolean"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "Dialog.Header",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
-        }
-      ]
-    },
-    "feature_flags": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/FeatureFlags",
-      "id": "feature_flags",
-      "name": "FeatureFlags",
-      "status": "draft",
+    "feature_flags": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/FeatureFlags",
+      "id": "feature_flags",
+      "name": "FeatureFlags",
+      "status": "draft",
       "a11yReviewed": false,
       "stories": [],
       "importPath": "@primer/react/experimental",
@@ -3361,27 +3121,27 @@
         },
         {
           "id": "components-flash-features--success",
-          "code": "() => (\n  <Flash\n    variant=\"success\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={CheckCircleIcon} aria-label=\"Success\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Success\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"success\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <CheckCircleIcon aria-label=\"Success\" />\n    </div>\n    <div className={classes.Message}>Success</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--danger",
-          "code": "() => (\n  <Flash\n    variant=\"danger\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Danger\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Danger\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"danger\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Danger\" />\n    </div>\n    <div className={classes.Message}>Danger</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--warning",
-          "code": "() => (\n  <Flash\n    variant=\"warning\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={AlertIcon} aria-label=\"Warning\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Warning\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"warning\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <AlertIcon aria-label=\"Warning\" />\n    </div>\n    <div className={classes.Message}>Warning</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--full",
-          "code": "() => (\n  <Flash\n    full\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Full\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    full\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>Full</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--with-icon-and-action",
-          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message'\n        '.      actions'\n      `,\n      },\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </Box>\n    <Box\n      sx={{\n        gridArea: 'actions',\n        '@media screen and (max-width: 543.98px)': {\n          alignSelf: 'start',\n          margin: 'var(--base-size-8) 0 0 var(--base-size-8)',\n        },\n      }}\n    >\n      <Button>Join waitlist</Button>\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash className={classes.WithIconAndAction}>\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--with-icon-action-dismiss",
-          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions close'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message close'\n        '.      actions actions'\n      `,\n      },\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </Box>\n    <Box\n      sx={{\n        gridArea: 'actions',\n        '@media screen and (max-width: 543.98px)': {\n          alignSelf: 'start',\n          margin: 'var(--base-size-8) 0 0 var(--base-size-8)',\n        },\n      }}\n    >\n      <Button>Join waitlist</Button>\n    </Box>\n    <Box\n      sx={{\n        gridArea: 'close',\n        marginLeft: 'var(--controlStack-medium-gap-condensed)',\n      }}\n    >\n      <IconButton\n        variant=\"invisible\"\n        icon={XIcon}\n        aria-label=\"Dismiss\"\n        sx={{\n          svg: {\n            margin: '0',\n            color: 'fg.muted',\n          },\n        }}\n      />\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash className={classes.WithIconActionDismiss}>\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n    <div className={classes.Close}>\n      <IconButton variant=\"invisible\" icon={XIcon} aria-label=\"Dismiss\" />\n    </div>\n  </Flash>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -3406,11 +3166,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -3532,11 +3287,6 @@
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -3586,11 +3336,6 @@
               "type": "string",
               "description": "Class name(s) for custom styling.",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3608,11 +3353,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
             }
           ]
         },
@@ -3637,11 +3377,6 @@
               "type": "string",
               "description": "May be used to override the ID assigned by FormControl's React Context",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3653,11 +3388,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The visual to render before the choice input's label"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -3672,11 +3402,11 @@
       "stories": [
         {
           "id": "components-header--default",
-          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link\n        href=\"#\"\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        <Octicon\n          icon={MarkGithubIcon}\n          size={32}\n          sx={{\n            mr: 2,\n          }}\n        />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item full>Menu</Header.Item>\n    <Header.Item\n      sx={{\n        mr: 0,\n      }}\n    >\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
+          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link href=\"#\" className={classes.HeaderLink}>\n        <MarkGithubIcon className={classes.Icon} size={32} />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item full>Menu</Header.Item>\n    <Header.Item className={classes.AvatarContainer}>\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
         },
         {
           "id": "components-header-features--with-full-size-item",
-          "code": "() => (\n  <Header>\n    <Header.Item>Item 1</Header.Item>\n    <Header.Item full>Item 2</Header.Item>\n    <Header.Item\n      sx={{\n        mr: 0,\n      }}\n    >\n      Item 3\n    </Header.Item>\n  </Header>\n)"
+          "code": "() => (\n  <Header>\n    <Header.Item>Item 1</Header.Item>\n    <Header.Item full>Item 2</Header.Item>\n    <Header.Item className={classes.LastItem}>Item 3</Header.Item>\n  </Header>\n)"
         },
         {
           "id": "components-header-features--with-links",
@@ -3684,17 +3414,11 @@
         },
         {
           "id": "components-header-features--with-many-items",
-          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link\n        href=\"#\"\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        <Octicon\n          icon={MarkGithubIcon}\n          size={32}\n          sx={{\n            mr: 2,\n          }}\n        />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item\n      sx={{\n        mr: 0,\n      }}\n    >\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
+          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link className={classes.Logo} href=\"#\">\n        <MarkGithubIcon className={classes.Icon} size={32} />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item className={classes.LastItem}>\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
         }
       ],
       "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
+      "props": [],
       "subcomponents": [
         {
           "name": "Header.Item",
@@ -3704,11 +3428,6 @@
               "type": "string",
               "defaultValue": "",
               "description": "Stretches item to fill the available space"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3725,11 +3444,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -3750,10 +3464,6 @@
           "id": "components-heading--default",
           "code": "() => <Heading>Default H2 Heading</Heading>"
         },
-        {
-          "id": "components-heading-features--test-sx",
-          "code": "() => (\n  <Heading\n    sx={{\n      fontSize: 2,\n      fontWeight: 'normal',\n    }}\n  >\n    Heading with sx override\n  </Heading>\n)"
-        },
         {
           "id": "components-heading-features--small",
           "code": "() => <Heading variant=\"small\">Small heading</Heading>"
@@ -3769,11 +3479,6 @@
       ],
       "importPath": "@primer/react",
       "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "as",
           "type": "React.ElementType",
@@ -3798,11 +3503,11 @@
         },
         {
           "id": "experimental-components-hidden-features--hide-content",
-          "code": "() => (\n  <Box>\n    <Hidden when=\"narrow\">\n      {' '}\n      This value is shown in regular and wide viewports\n    </Hidden>\n    <Hidden when=\"regular\">\n      {' '}\n      This value is shown in narrow and wide viewports\n    </Hidden>\n    <Hidden when=\"wide\">\n      {' '}\n      This value is shown in narrow and regular viewports\n    </Hidden>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Hidden when=\"narrow\">\n      {' '}\n      This value is shown in regular and wide viewports\n    </Hidden>\n    <Hidden when=\"regular\">\n      {' '}\n      This value is shown in narrow and wide viewports\n    </Hidden>\n    <Hidden when=\"wide\">\n      {' '}\n      This value is shown in narrow and regular viewports\n    </Hidden>\n  </div>\n)"
         },
         {
           "id": "experimental-components-hidden-features--render-content-responsively",
-          "code": "() => (\n  <Box>\n    <Hidden when=\"narrow\">\n      <Button variant=\"primary\">\n        I am visible when the viewport is regular or wide viewport\n      </Button>\n    </Hidden>\n\n    <Hidden when={['regular', 'wide']}>\n      <Button variant=\"primary\">\n        I am visible when the viewport is narrow\n      </Button>\n    </Hidden>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Hidden when=\"narrow\">\n      <Button variant=\"primary\">\n        I am visible when the viewport is regular or wide viewport\n      </Button>\n    </Hidden>\n\n    <Hidden when={['regular', 'wide']}>\n      <Button variant=\"primary\">\n        I am visible when the viewport is narrow\n      </Button>\n    </Hidden>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -3874,11 +3579,11 @@
       "stories": [
         {
           "id": "experimental-components-keybindinghint-features--on-emphasis",
-          "code": "(args) => (\n  <Box\n    sx={{\n      backgroundColor: 'var(--bgColor-black)',\n      p: 3,\n    }}\n  >\n    <KeybindingHint {...args} />\n  </Box>\n)"
+          "code": "(args) => (\n  <div className={classes.EmphasisBackground}>\n    <KeybindingHint {...args} />\n  </div>\n)"
         },
         {
           "id": "experimental-components-keybindinghint-features--on-primary",
-          "code": "(args) => (\n  <Box\n    sx={{\n      backgroundColor: 'var(--button-primary-bgColor-rest)',\n      p: 3,\n    }}\n  >\n    <KeybindingHint {...args} />\n  </Box>\n)"
+          "code": "(args) => (\n  <div className={classes.PrimaryBackground}>\n    <KeybindingHint {...args} />\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -4046,7 +3751,7 @@
       "stories": [
         {
           "id": "components-link--default",
-          "code": "() => <Link href=\"#\">Link</Link>"
+          "code": "() => <Link href=\"#\">Links are great</Link>"
         },
         {
           "id": "components-link-features--muted",
@@ -4102,11 +3807,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"a\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -4117,7 +3817,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": [
         {
@@ -4140,11 +3909,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"nav\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -4182,11 +3946,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -4197,11 +3956,6 @@
         {
           "name": "NavList.LeadingVisual",
           "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLElement>"
@@ -4211,11 +3965,6 @@
         {
           "name": "NavList.TrailingVisual",
           "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLElement>"
@@ -4225,11 +3974,6 @@
         {
           "name": "NavList.SubNav",
           "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLElement>"
@@ -4251,11 +3995,6 @@
               "type": "string",
               "description": "The text that gets rendered as the group's heading. Alternatively, you can pass the `NavList.GroupHeading` component as a child of `NavList.Group`.\nIf both `title` and `NavList.GroupHeading` are passed, `NavList.GroupHeading` will be rendered as the heading."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLElement>"
@@ -4286,11 +4025,6 @@
               "description": "",
               "defaultValue": ""
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLElement>"
@@ -4300,11 +4034,6 @@
         {
           "name": "NavList.Divider",
           "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLElement>"
@@ -4422,11 +4151,6 @@
           "type": "string",
           "defaultValue": "text-bottom",
           "description": "Sets the `vertical-align` CSS property"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -4440,15 +4164,15 @@
       "stories": [
         {
           "id": "private-components-overlay--default",
-          "code": "(args: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\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    <Box ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n        }}\n      >\n        Open overlay\n      </Button>\n      {isOpen || args.open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"large\"\n          anchorSide=\"inside-right\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Sample overlay\"\n          ref={containerRef}\n        >\n          <Box\n            sx={{\n              height: '100vh',\n              maxWidth: 'calc(-1rem + 100vw)',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <IconButton\n              aria-label=\"Close\"\n              onClick={closeOverlay}\n              icon={XIcon}\n              variant=\"invisible\"\n              sx={{\n                position: 'absolute',\n                left: '5px',\n                top: '5px',\n              }}\n            />\n            <Text>Look! an overlay</Text>\n          </Box>\n        </Overlay>\n      ) : null}\n    </Box>\n  )\n}"
+          "code": "(args: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\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        }}\n      >\n        Open overlay\n      </Button>\n      {isOpen || args.open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"large\"\n          anchorSide=\"inside-right\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Sample overlay\"\n          ref={containerRef}\n        >\n          <div className={classes.FullHeightContent}>\n            <IconButton\n              aria-label=\"Close\"\n              onClick={closeOverlay}\n              icon={XIcon}\n              variant=\"invisible\"\n              className={classes.CloseButtonOverlay}\n            />\n            <Text>Look! an overlay</Text>\n          </div>\n        </Overlay>\n      ) : null}\n    </div>\n  )\n}"
         },
         {
           "id": "private-components-overlay-features--dialog-overlay",
-          "code": "({ anchorSide, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n    initialFocusRef: confirmButtonRef,\n    returnFocusRef: buttonRef,\n  })\n  return (\n    <Box ref={anchorRef}>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        open overlay\n      </Button>\n      {isOpen || open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"small\"\n          anchorSide={anchorSide}\n          role={role}\n          aria-modal={role === 'dialog' ? 'true' : undefined}\n          aria-label={role === 'dialog' ? 'Confirmation screen' : undefined}\n          ref={containerRef}\n        >\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            <Text>Are you sure?</Text>\n            <Button variant=\"danger\" onClick={closeOverlay}>\n              Cancel\n            </Button>\n            <Button onClick={closeOverlay} ref={confirmButtonRef}>\n              Confirm\n            </Button>\n          </Box>\n        </Overlay>\n      ) : null}\n    </Box>\n  )\n}"
+          "code": "({ anchorSide, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n    initialFocusRef: confirmButtonRef,\n    returnFocusRef: buttonRef,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        open overlay\n      </Button>\n      {isOpen || open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"small\"\n          anchorSide={anchorSide}\n          role={role}\n          aria-modal={role === 'dialog' ? 'true' : undefined}\n          aria-label={role === 'dialog' ? 'Confirmation screen' : undefined}\n          ref={containerRef}\n        >\n          <div className={classes.DialogContent}>\n            <Text>Are you sure?</Text>\n            <Button variant=\"danger\" onClick={closeOverlay}>\n              Cancel\n            </Button>\n            <Button onClick={closeOverlay} ref={confirmButtonRef}>\n              Confirm\n            </Button>\n          </div>\n        </Overlay>\n      ) : null}\n    </div>\n  )\n}"
         },
         {
           "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    <Box 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            <Box\n              sx={{\n                width: ['350px', '500px'],\n              }}\n            >\n              <Box\n                sx={{\n                  height: '100vh',\n                  maxWidth: 'calc(-1rem + 100vw)',\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  sx={{\n                    position: 'absolute',\n                    left: '5px',\n                    top: '5px',\n                  }}\n                />\n                <Text>Look! left aligned</Text>\n              </Box>\n            </Box>\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            <Box\n              sx={{\n                width: ['350px', '500px'],\n              }}\n            >\n              <Box\n                sx={{\n                  height: '100vh',\n                  maxWidth: 'calc(-1rem + 100vw)',\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  sx={{\n                    position: 'absolute',\n                    right: '5px',\n                    top: '5px',\n                  }}\n                />\n                <Text>Look! right aligned</Text>\n              </Box>\n            </Box>\n          </Overlay>\n        )\n      ) : null}\n    </Box>\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",
@@ -4501,7 +4225,7 @@
         {
           "name": "maxHeight",
           "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-          "defaultValue": "",
+          "defaultValue": "100vh",
           "description": "Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`."
         },
         {
@@ -4561,7 +4285,7 @@
           "type": "'hidden' | 'scroll' | 'auto' | 'visible'",
           "required": false,
           "description": "",
-          "defaultValue": ""
+          "defaultValue": "hidden"
         },
         {
           "name": "preventOverflow",
@@ -4583,11 +4307,6 @@
           "description": "",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "responsiveVariant",
           "type": "'fullscreen'",
@@ -4679,11 +4398,6 @@
           "type": "AriaRole",
           "description": "The ARIA role to assign to the top-level node of this component."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "as",
           "type": "React.ElementType",
@@ -4710,11 +4424,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4744,11 +4453,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "`{ narrow: false regular: true wide: true }`",
               "description": "Whether the parent link is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4766,11 +4470,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4788,11 +4487,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4816,11 +4510,6 @@
               "type": "| 'subtitle' | 'medium' | 'large' | { narrow?: | 'subtitle' | 'medium' | 'large' regular?: | 'subtitle' | 'medium' | 'large' wide?: | 'subtitle' | 'medium' | 'large' }",
               "defaultValue": "medium",
               "description": "Default title (medium) is the most common page title size. Use for static titles in most situations.\nLarge variant should be used for user-generated content such as issues, pull requests, or discussions.\nSubtitle variant can be used when a PageHeader.Title is already present in the page, such as in a SplitPageLayout."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4838,11 +4527,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4860,11 +4544,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4883,11 +4562,6 @@
               "defaultValue": "false",
               "description": "Whether the content is hidden."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "as",
               "type": "React.ElementType",
@@ -4909,11 +4583,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4931,11 +4600,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4953,11 +4617,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4975,11 +4634,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4997,11 +4651,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5035,11 +4684,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5054,7 +4698,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",
@@ -5114,11 +4758,6 @@
           "type": "| 'none' | 'condensed' | 'normal'",
           "defaultValue": "'normal'",
           "description": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5161,11 +4800,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the header is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5184,6 +4818,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'",
@@ -5201,11 +4841,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5289,11 +4924,6 @@
               "description": "Which side of the page the pane should be on. Can be changed for different viewport widths.",
               "defaultValue": ""
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLDivElement>"
@@ -5339,11 +4969,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the footer is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5368,11 +4993,6 @@
           "type": "string",
           "defaultValue": "div",
           "description": "Sets the underlying HTML tag for the component"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -5456,52 +5076,6 @@
           "type": "function",
           "defaultValue": "(props: PageProps) => ReactNode",
           "description": "Provide a custom component or render prop to render each page link within the component."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": []
-    },
-    "pointer_box": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/PointerBox",
-      "id": "pointer_box",
-      "name": "PointerBox",
-      "status": "alpha",
-      "a11yReviewed": "2025-01-08",
-      "stories": [
-        {
-          "id": "components-pointerbox--default",
-          "code": "() => <PointerBox>Pointer box content</PointerBox>"
-        }
-      ],
-      "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "bg",
-          "type": "string | string & (string | number | symbol | null)[] | string & { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; }",
-          "description": "Background color of the box\nThe color utility parses a component's `color` and `bg` props and converts them into CSS declarations.\nBy default the raw value of the prop is returned.\n\nColor palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation.\nArray values are converted into responsive values.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)",
-          "defaultValue": ""
-        },
-        {
-          "name": "border",
-          "type": "string | number | string & (Border<TLengthStyledSystem> | null)[] | string & { [x: string]: Border<TLengthStyledSystem> | undefined; [x: number]: Border<TLengthStyledSystem> | undefined; } | number & (Border<TLengthStyledSystem> | null)[] | number & { [x: string]: Border<TLengthStyledSystem> | undefined; [x: number]: Border<TLengthStyledSystem> | undefined; }",
-          "description": "Width of the border around the box\nThe border CSS property sets an element's border. It's a shorthand for border-width, border-style,\nand border-color.\n\n[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border)",
-          "defaultValue": ""
-        },
-        {
-          "name": "borderColor",
-          "type": "string | string & (string | number | symbol | null)[] | string & { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; }",
-          "description": "Color of the border around the box\nThe border-color shorthand CSS property sets the color of all sides of an element's border.\n\n[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)",
-          "defaultValue": ""
-        },
-        {
-          "name": "caret",
-          "type": "| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'",
-          "defaultValue": "'bottom'",
-          "description": "Sets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top"
         }
       ],
       "subcomponents": []
@@ -5515,7 +5089,7 @@
       "stories": [
         {
           "id": "components-popover--default",
-          "code": "() => (\n  <Popover relative open={true} caret=\"top\">\n    <Popover.Content\n      sx={{\n        marginTop: 2,\n      }}\n    >\n      <Heading\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        Popover heading\n      </Heading>\n      <Text as=\"p\">Message about popovers</Text>\n      <Button>Got it!</Button>\n    </Popover.Content>\n  </Popover>\n)"
+          "code": "() => (\n  <Popover relative open={true} caret=\"top\">\n    <Popover.Content\n      style={{\n        marginTop: 'var(--base-size-8)',\n      }}\n    >\n      <Heading\n        style={{\n          fontSize: 'var(--text-title-size-small)',\n        }}\n      >\n        Popover heading\n      </Heading>\n      <Text as=\"p\">Message about popovers</Text>\n      <Button>Got it!</Button>\n    </Popover.Content>\n  </Popover>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -5543,11 +5117,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "Set to true to render the popover using relative positioning."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5560,11 +5129,6 @@
               "defaultValue": "div",
               "description": "Sets the underlying HTML tag for the component"
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "width",
               "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'auto'",
@@ -5596,19 +5160,19 @@
       "stories": [
         {
           "id": "behaviors-portal--default",
-          "code": "() => (\n  <>\n    Root position\n    <Box bg=\"red.2\" p={3}>\n      Outer container\n      <Box bg=\"green.2\" p={3}>\n        Inner container\n        <Portal>\n          Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.\n        </Portal>\n      </Box>\n    </Box>\n  </>\n)"
+          "code": "() => (\n  <>\n    Root position\n    <div className={clsx(classes.PortalContainer, classes.OuterContainer)}>\n      Outer container\n      <div className={clsx(classes.PortalContainer, classes.InnerContainer)}>\n        Inner container\n        <Portal>\n          Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.\n        </Portal>\n      </div>\n    </div>\n  </>\n)"
         },
         {
           "id": "behaviors-portal-features--custom-portal-root-by-id",
-          "code": "() => (\n  <>\n    Root position\n    <Box bg=\"red.2\" p={3} id=\"__primerPortalRoot__\">\n      Outer container\n      <Box bg=\"green.2\" p={3}>\n        Inner container\n        <Portal>Portaled content rendered at the outer container.</Portal>\n      </Box>\n    </Box>\n  </>\n)"
+          "code": "() => (\n  <>\n    Root position\n    <div\n      className={clsx(classes.PortalContainer, classes.OuterContainer)}\n      id=\"__primerPortalRoot__\"\n    >\n      Outer container\n      <div className={clsx(classes.PortalContainer, classes.InnerContainer)}>\n        Inner container\n        <Portal>Portaled content rendered at the outer container.</Portal>\n      </div>\n    </div>\n  </>\n)"
         },
         {
           "id": "behaviors-portal-features--custom-portal-root-by-registration",
-          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <Box bg=\"red.2\" p={3} ref={outerContainerRef}>\n        {mounted ? (\n          <>\n            Outer container\n            <Box bg=\"green.2\" p={3}>\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </Box>\n          </>\n        ) : null}\n      </Box>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        {mounted ? (\n          <>\n            Outer container\n            <div\n              className={clsx(classes.PortalContainer, classes.InnerContainer)}\n            >\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </div>\n          </>\n        ) : null}\n      </div>\n    </>\n  )\n}"
         },
         {
           "id": "behaviors-portal-features--multiple-portal-roots",
-          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const innerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (\n      outerContainerRef.current instanceof HTMLElement &&\n      innerContainerRef.current instanceof HTMLElement\n    ) {\n      registerPortalRoot(outerContainerRef.current, 'outer')\n      registerPortalRoot(innerContainerRef.current, 'inner')\n      setMounted(true)\n    }\n  }, [outerContainerRef])\n  return (\n    <>\n      Root position\n      <Box bg=\"red.2\" p={3} ref={outerContainerRef}>\n        Outer container\n        <Box bg=\"green.2\" p={3} ref={innerContainerRef}>\n          {mounted ? (\n            <>\n              <Portal containerName=\"outer\">\n                Portaled content rendered at the outer container.\n              </Portal>\n              <Portal containerName=\"inner\">\n                Portaled content rendered at the end of the inner container.\n              </Portal>\n              <Portal>\n                Portaled content rendered at <code>&lt;BaseStyles&gt;</code>{' '}\n                root.\n              </Portal>\n            </>\n          ) : null}\n          Inner container\n        </Box>\n      </Box>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const innerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (\n      outerContainerRef.current instanceof HTMLElement &&\n      innerContainerRef.current instanceof HTMLElement\n    ) {\n      registerPortalRoot(outerContainerRef.current, 'outer')\n      registerPortalRoot(innerContainerRef.current, 'inner')\n      setMounted(true)\n    }\n  }, [outerContainerRef])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        Outer container\n        <div\n          className={clsx(classes.PortalContainer, classes.InnerContainer)}\n          ref={innerContainerRef}\n        >\n          {mounted ? (\n            <>\n              <Portal containerName=\"outer\">\n                Portaled content rendered at the outer container.\n              </Portal>\n              <Portal containerName=\"inner\">\n                Portaled content rendered at the end of the inner container.\n              </Portal>\n              <Portal>\n                Portaled content rendered at <code>&lt;BaseStyles&gt;</code>{' '}\n                root.\n              </Portal>\n            </>\n          ) : null}\n          Inner container\n        </div>\n      </div>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -5661,15 +5225,15 @@
         },
         {
           "id": "components-progressbar-features--inline",
-          "code": "() => (\n  <ProgressBar\n    inline\n    progress=\"66\"\n    sx={{\n      width: '100px',\n    }}\n    aria-label=\"Upload test.png\"\n  />\n)"
+          "code": "() => (\n  <ProgressBar\n    inline\n    progress=\"66\"\n    style={{\n      width: '100px',\n    }}\n    aria-label=\"Upload test.png\"\n  />\n)"
         },
         {
-          "id": "components-progressbar-features--color",
-          "code": "() => (\n  <ProgressBar progress=\"66\" bg=\"done.emphasis\" aria-label=\"Upload test.png\" />\n)"
+          "id": "components-progressbar-features--all-colors",
+          "code": "() => (\n  <ProgressBar aria-label=\"Upload test.png\">\n    <ProgressBar.Item\n      progress={20}\n      aria-label=\"Photo Usage\"\n      bg=\"accent.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={15}\n      aria-label=\"Application Usage\"\n      bg=\"danger.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={12}\n      aria-label=\"Music Usage\"\n      bg=\"severe.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={11}\n      aria-label=\"Music Usage\"\n      bg=\"done.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={8}\n      aria-label=\"Music Usage\"\n      bg=\"sponsors.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={7}\n      aria-label=\"Music Usage\"\n      bg=\"neutral.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={7}\n      aria-label=\"Music Usage\"\n      bg=\"attention.emphasis\"\n    />\n  </ProgressBar>\n)"
         },
         {
           "id": "components-progressbar-features--multiple-items",
-          "code": "() => (\n  <ProgressBar>\n    <ProgressBar.Item\n      progress={33}\n      aria-label=\"Photo Usage\"\n      sx={{\n        bg: 'accent.emphasis',\n      }}\n    />\n    <ProgressBar.Item\n      progress={23}\n      aria-label=\"Application Usage\"\n      bg={'danger.emphasis'}\n    />\n    <ProgressBar.Item\n      progress={14}\n      aria-label=\"Music Usage\"\n      bg={'severe.emphasis'}\n    />\n  </ProgressBar>\n)"
+          "code": "() => (\n  <ProgressBar>\n    <ProgressBar.Item\n      progress={33}\n      aria-label=\"Photo Usage\"\n      bg=\"accent.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={23}\n      aria-label=\"Application Usage\"\n      bg={'danger.emphasis'}\n    />\n    <ProgressBar.Item\n      progress={14}\n      aria-label=\"Music Usage\"\n      bg={'severe.emphasis'}\n    />\n  </ProgressBar>\n)"
         },
         {
           "id": "components-progressbar-features--animated",
@@ -5706,11 +5270,6 @@
           "type": "string",
           "defaultValue": "'bg.successInverse'",
           "description": "Set the progress bar color"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5734,11 +5293,6 @@
               "type": "string | number",
               "description": "Used to set the size of the green bar",
               "defaultValue": "0"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5810,16 +5364,6 @@
         {
           "name": "ref",
           "type": "React.RefObject<HTMLInputElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -5901,11 +5445,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "If true, the user must make a selection before the owning form can be submitted"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -5917,11 +5456,6 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, the fieldset legend will be visually hidden"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5933,11 +5467,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The caption content"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5956,11 +5485,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Changes the visual style to match the validation status"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -6121,11 +5645,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"relative-time\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6143,7 +5662,7 @@
         },
         {
           "id": "components-segmentedcontrol-features--with-icons",
-          "code": "() => (\n  <SegmentedControl aria-label=\"File view\">\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl aria-label=\"File view\">\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--controlled",
@@ -6151,23 +5670,23 @@
         },
         {
           "id": "components-segmentedcontrol-features--variant-narrow-hide-labels",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'hideLabels',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'hideLabels',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--variant-narrow-action-menu",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'dropdown',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'dropdown',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--fullwidth-narrow",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: true,\n      regular: false,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: true,\n      regular: false,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--fullwidth-regular",
-          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: false,\n      regular: true,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: false,\n      regular: true,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--fullwidth-all",
-          "code": "() => (\n  <SegmentedControl aria-label=\"File view\" fullWidth>\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingIcon={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
+          "code": "() => (\n  <SegmentedControl aria-label=\"File view\" fullWidth>\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
         {
           "id": "components-segmentedcontrol-features--icon-only",
@@ -6175,7 +5694,7 @@
         },
         {
           "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
-          "code": "() => (\n  <Box\n    display=\"flex\"\n    sx={(theme) => ({\n      flexDirection: 'column',\n      gap: theme.space[1],\n      [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {\n        flexDirection: 'row',\n      },\n    })}\n  >\n    <Box flexGrow={1}>\n      <Text fontSize={2} fontWeight=\"bold\" id=\"scLabel-vert\" display=\"block\">\n        File view\n      </Text>\n      <Text color=\"fg.subtle\" fontSize={1} id=\"scCaption-vert\" display=\"block\">\n        Change the way the file is viewed\n      </Text>\n    </Box>\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  </Box>\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",
@@ -6222,11 +5741,6 @@
           "description": "The size of the buttons",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -6236,11 +5750,18 @@
         {
           "name": "SegmentedControl.Button",
           "props": [
+            {
+              "name": "leadingVisual",
+              "type": "Component",
+              "defaultValue": "",
+              "description": "The leading visual comes before item label"
+            },
             {
               "name": "leadingIcon",
+              "deprecated": true,
               "type": "Component",
               "defaultValue": "",
-              "description": "The leading icon comes before item label"
+              "description": "Deprecated: use `leadingVisual` instead. The leading icon comes before item label."
             },
             {
               "name": "selected",
@@ -6255,9 +5776,10 @@
               "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render."
             },
             {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
+              "name": "count",
+              "type": "number | string",
+              "defaultValue": "",
+              "description": "The number to display in the counter label."
             },
             {
               "name": "ref",
@@ -6300,11 +5822,6 @@
               "defaultValue": "",
               "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "ref",
               "type": "React.RefObject<HTMLButtonElement>"
@@ -6334,51 +5851,51 @@
       "stories": [
         {
           "id": "components-select--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-option-groups",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.OptGroup label=\"Group one\">\n          <Select.Option value=\"one\">Choice one</Select.Option>\n          <Select.Option value=\"two\">Choice two</Select.Option>\n          <Select.Option value=\"three\">Choice three</Select.Option>\n          <Select.Option value=\"four\">Choice four</Select.Option>\n        </Select.OptGroup>\n        <Select.OptGroup disabled label=\"Group two\">\n          <Select.Option value=\"five\">Choice five</Select.Option>\n          <Select.Option value=\"six\">Choice six</Select.Option>\n        </Select.OptGroup>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.OptGroup label=\"Group one\">\n          <Select.Option value=\"one\">Choice one</Select.Option>\n          <Select.Option value=\"two\">Choice two</Select.Option>\n          <Select.Option value=\"three\">Choice three</Select.Option>\n          <Select.Option value=\"four\">Choice four</Select.Option>\n        </Select.OptGroup>\n        <Select.OptGroup disabled label=\"Group two\">\n          <Select.Option value=\"five\">Choice five</Select.Option>\n          <Select.Option value=\"six\">Choice six</Select.Option>\n        </Select.OptGroup>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl disabled>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl disabled>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select block>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select block>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--small",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"small\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"small\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--large",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"large\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"large\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-custom-styling",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select\n        sx={{\n          borderRadius: '12px',\n          border: '1px dashed #000000',\n        }}\n      >\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select className={classes.CustomSelect}>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-placeholder-option",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select placeholder=\"No choice selected\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select placeholder=\"No choice selected\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6677,11 +6194,6 @@
           "type": "string",
           "description": "The className of the skeleton box",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6836,7 +6348,7 @@
         },
         {
           "id": "components-spinner-features--suppress-screen-reader-text",
-          "code": "() => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      display: 'flex',\n      gap: '0.25rem',\n    }}\n  >\n    <Spinner size=\"small\" srText={null} />\n    <AriaStatus>Loading...</AriaStatus>\n  </Box>\n)"
+          "code": "() => (\n  <Stack direction=\"horizontal\" className={classes.SuppressScreenReaderText}>\n    <Spinner size=\"small\" srText={null} />\n    <AriaStatus>Loading...</AriaStatus>\n  </Stack>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6867,11 +6379,6 @@
         {
           "name": "data-*",
           "type": "string"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6889,15 +6396,14 @@
         },
         {
           "id": "components-splitpagelayout-features--settings-page",
-          "code": "() => (\n  <SplitPageLayout>\n    <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n      <NavList aria-label=\"Main navigation\">\n        <NavList.Item href=\"#\">Profile</NavList.Item>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Account\n        </NavList.Item>\n        <NavList.Item href=\"#\">Emails</NavList.Item>\n        <NavList.Item href=\"#\">Notifications</NavList.Item>\n      </NavList>\n    </SplitPageLayout.Pane>\n    <SplitPageLayout.Content>\n      <Heading\n        as=\"h2\"\n        sx={{\n          fontSize: 4,\n          fontWeight: 'normal',\n          color: 'danger.fg',\n          mb: 2,\n        }}\n      >\n        Danger zone\n      </Heading>\n      <Box\n        sx={{\n          border: '1px solid',\n          borderColor: 'danger.emphasis',\n          borderRadius: 2,\n          p: 3,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 3,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'grid',\n            gap: 1,\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: 1,\n              fontWeight: 'bold',\n              color: 'danger.fg',\n            }}\n          >\n            Delete account\n          </Text>\n          <Text\n            sx={{\n              fontSize: 1,\n              color: 'fg.muted',\n            }}\n          >\n            Are you sure you don&apos;t want to just downgrade your account to a\n            free account? We won&apos;t charge your credit card anymore.\n          </Text>\n        </Box>\n        <Button variant=\"danger\">Delete account</Button>\n      </Box>\n    </SplitPageLayout.Content>\n  </SplitPageLayout>\n)"
+          "code": "() => (\n  <SplitPageLayout>\n    <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n      <NavList aria-label=\"Main navigation\">\n        <NavList.Item href=\"#\">Profile</NavList.Item>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Account\n        </NavList.Item>\n        <NavList.Item href=\"#\">Emails</NavList.Item>\n        <NavList.Item href=\"#\">Notifications</NavList.Item>\n      </NavList>\n    </SplitPageLayout.Pane>\n    <SplitPageLayout.Content>\n      <Heading as=\"h2\" className={classes.SectionHeading}>\n        Danger zone\n      </Heading>\n      <div className={classes.DeleteAccountContainer}>\n        <div className={classes.DeleteAccountTextContainer}>\n          <Text className={classes.DeleteAccountTitle}>Delete account</Text>\n          <Text className={classes.DeleteAccountDescription}>\n            Are you sure you don&apos;t want to just downgrade your account to a\n            free account? We won&apos;t charge your credit card anymore.\n          </Text>\n        </div>\n        <Button variant=\"danger\">Delete account</Button>\n      </div>\n    </SplitPageLayout.Content>\n  </SplitPageLayout>\n)"
         }
       ],
       "importPath": "@primer/react",
       "props": [
         {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
+          "name": "className",
+          "type": "string"
         }
       ],
       "subcomponents": [
@@ -6933,11 +6439,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the header is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -6956,6 +6457,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'",
@@ -6973,11 +6480,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -7052,12 +6554,7 @@
               "name": "position",
               "type": "'end' | 'start' | {narrow?: 'end' | 'start', narrow?: 'end' | 'start', wide?: 'end' | 'start'}",
               "description": "Which side of the page the pane should be on. Can be changed for different viewport widths.",
-              "defaultValue": "start"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
+              "defaultValue": "start"
             }
           ]
         },
@@ -7093,11 +6590,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the footer is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -7249,11 +6741,6 @@
           "name": "status",
           "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable' | 'open' | 'closed'",
           "required": true
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -7297,11 +6784,6 @@
           "name": "aria-label",
           "type": "string",
           "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -7326,23 +6808,12 @@
               "name": "to",
               "type": "string | Partial<Path>",
               "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
         {
           "name": "SubNav.Links",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         }
       ]
     },
@@ -7368,11 +6839,6 @@
           "name": "aria-label",
           "type": "string",
           "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -7396,11 +6862,6 @@
               "name": "to",
               "type": "string | Partial<Path>",
               "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -7419,11 +6880,11 @@
         },
         {
           "id": "components-text-features--polymorphism",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n      flexDirection: 'column',\n    }}\n  >\n    <Text as=\"em\">Emphasized text</Text>\n    <Text as=\"i\">Italicized text</Text>\n    <Text as=\"strong\">Strong text</Text>\n    <Text as=\"small\">Small text</Text>\n    <Text as=\"u\">Text with underline</Text>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PolymorphismContainer}>\n    <Text as=\"em\">Emphasized text</Text>\n    <Text as=\"i\">Italicized text</Text>\n    <Text as=\"strong\">Strong text</Text>\n    <Text as=\"small\">Small text</Text>\n    <Text as=\"u\">Text with underline</Text>\n  </div>\n)"
         },
         {
           "id": "components-text-features--styled-text",
-          "code": "() => (\n  <Text\n    as=\"p\"\n    sx={{\n      color: 'fg.onEmphasis',\n      bg: 'neutral.emphasis',\n      p: 2,\n    }}\n    size=\"small\"\n  >\n    Stylized text\n  </Text>\n)"
+          "code": "() => (\n  <Text as=\"p\" className={classes.StyledText} size=\"small\">\n    Stylized text\n  </Text>\n)"
         },
         {
           "id": "components-text-features--size-small",
@@ -7461,11 +6922,6 @@
           "defaultValue": "'span'",
           "type": "React.ElementType"
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "size",
           "type": "'large' | 'medium' | 'small'"
@@ -7490,67 +6946,67 @@
       "stories": [
         {
           "id": "components-textinput--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput disabled />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput disabled />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <TextInput />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <TextInput />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"success\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"success\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput block />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput block />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--small",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"small\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"small\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--large",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--required",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl required>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl required>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--with-leading-visual",
-          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput leadingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput leadingVisual=\"$\" />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput leadingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput leadingVisual=\"$\" />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-trailing-icon",
-          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <Box>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput trailingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <div>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput trailingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-trailing-action",
-          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-tooltip-direction",
-          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                  tooltipDirection=\"nw\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                  tooltipDirection=\"nw\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-loading-indicator",
-          "code": "(args: FormControlArgs<TextInputProps>) => {\n  return (\n    <Box as=\"form\">\n      <h3>No visual</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"auto\" {...args} />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n        </FormControl>\n      </Box>\n      <Box mb={5}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n        </FormControl>\n      </Box>\n\n      <h3>Leading visual</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={5}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </Box>\n\n      <h3>Trailing visual</h3>\n      <FormControl>\n        <Box mb={2}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n          </FormControl>\n        </Box>\n        <Box mb={2}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"leading\"\n              value=\"leading\"\n            />\n          </FormControl>\n        </Box>\n        <Box mb={5}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"trailing\"\n              value=\"trailing\"\n            />\n          </FormControl>\n        </Box>\n      </FormControl>\n\n      <h3>Both visuals</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"small\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            value=\"auto\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"large\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </Box>\n    </Box>\n  )\n}"
+          "code": "(args: FormControlArgs<TextInputProps>) => {\n  return (\n    <div>\n      <h3>No visual</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"auto\" {...args} />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottomLarge}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n        </FormControl>\n      </div>\n\n      <h3>Leading visual</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottomLarge}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </div>\n\n      <h3>Trailing visual</h3>\n      <FormControl>\n        <div className={classes.MarginBottom}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n          </FormControl>\n        </div>\n        <div className={classes.MarginBottom}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"leading\"\n              value=\"leading\"\n            />\n          </FormControl>\n        </div>\n        <div className={classes.MarginBottomLarge}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"trailing\"\n              value=\"trailing\"\n            />\n          </FormControl>\n        </div>\n      </FormControl>\n\n      <h3>Both visuals</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"small\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            value=\"auto\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"large\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </div>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-autocomplete-attribute",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>First name</FormControl.Label>\n      <TextInput autoComplete=\"given-name\" />\n    </FormControl>\n    <FormControl>\n      <FormControl.Label>Last name</FormControl.Label>\n      <TextInput autoComplete=\"family-name\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>First name</FormControl.Label>\n      <TextInput autoComplete=\"given-name\" />\n    </FormControl>\n    <FormControl>\n      <FormControl.Label>Last name</FormControl.Label>\n      <TextInput autoComplete=\"family-name\" />\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -7642,24 +7098,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",
@@ -7668,11 +7124,6 @@
           "deprecated": true,
           "description": "(Use leadingVisual or trailingVisual) An Octicon React component. To be used inside of input. Positioned on the left edge."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLInputElement>"
@@ -7715,11 +7166,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"button\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -7733,48 +7179,48 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/TextInputWithTokens",
       "id": "text_input_with_tokens",
       "name": "TextInputWithTokens",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-textinputwithtokens--default",
+          "id": "deprecated-components-textinputwithtokens--default",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} />\n    </FormControl>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--with-leading-visual",
+          "id": "deprecated-components-textinputwithtokens-features--with-leading-visual",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInputWithTokens\n        leadingVisual={NumberIcon}\n        tokens={tokens}\n        onTokenRemove={onTokenRemove}\n      />\n    </FormControl>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--with-trailing-visual",
+          "id": "deprecated-components-textinputwithtokens-features--with-trailing-visual",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInputWithTokens\n        trailingVisual={CheckIcon}\n        tokens={tokens}\n        onTokenRemove={onTokenRemove}\n      />\n    </FormControl>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--with-loading-indicator",
-          "code": "(args: FormControlArgs<TextInputWithTokensProps>) => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box\n      display=\"grid\"\n      sx={{\n        gap: 3,\n      }}\n      as=\"form\"\n    >\n      <FormControl>\n        <FormControl.Label>No visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Leading visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Both visuals</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n          trailingVisual={CheckIcon}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--with-loading-indicator",
+          "code": "(args: FormControlArgs<TextInputWithTokensProps>) => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form className={classes.Grid}>\n      <FormControl>\n        <FormControl.Label>No visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Leading visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Both visuals</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n          trailingVisual={CheckIcon}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--using-issue-label-tokens",
-          "code": "() => {\n  const [tokens, setTokens] = useState([\n    {\n      text: 'enhancement',\n      id: 1,\n      fillColor: '#a2eeef',\n    },\n    {\n      text: 'bug',\n      id: 2,\n      fillColor: '#d73a4a',\n    },\n    {\n      text: 'good first issue',\n      id: 3,\n      fillColor: '#0cf478',\n    },\n  ])\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokenComponent={IssueLabelToken}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens",
+          "code": "() => {\n  const [tokens, setTokens] = useState([\n    {\n      text: 'enhancement',\n      id: 1,\n      fillColor: '#a2eeef',\n    },\n    {\n      text: 'bug',\n      id: 2,\n      fillColor: '#d73a4a',\n    },\n    {\n      text: 'good first issue',\n      id: 3,\n      fillColor: '#0cf478',\n    },\n  ])\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokenComponent={IssueLabelToken}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--unstyled",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          sx={{\n            border: '0',\n            padding: '0',\n            boxShadow: 'none',\n            ':focus-within': {\n              border: '0',\n              boxShadow: 'none',\n            },\n          }}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--unstyled",
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          className={classes.Unstyled}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--prevent-tokens-from-wrapping",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          preventTokenWrapping\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping",
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          preventTokenWrapping\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--max-height",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 7))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box\n      sx={{\n        maxWidth: '300px',\n      }}\n    >\n      {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          maxHeight={70}\n          block // `block` only needed to fill parent width without overflowing\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--max-height",
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 7))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <div className={classes.MaxWidth}>\n      {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          maxHeight={70}\n          block // `block` only needed to fill parent width without overflowing\n        />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--size",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          size=\"small\"\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--size",
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          size=\"small\"\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--truncated",
-          "code": "() => {\n  const [tokens, setTokens] = useState(mockTokens)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          visibleTokenCount={5}\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "id": "deprecated-components-textinputwithtokens-features--truncated",
+          "code": "() => {\n  const [tokens, setTokens] = useState(mockTokens)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          visibleTokenCount={5}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -7851,39 +7297,39 @@
       "stories": [
         {
           "id": "components-textarea--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea disabled />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea disabled />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Textarea />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Textarea />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Textarea />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea block />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea block />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-height",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea rows={3} />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea rows={3} />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-width",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea cols={60} />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea cols={60} />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-resize-behavior",
@@ -7943,11 +7389,6 @@
           "type": "React.ElementType",
           "defaultValue": "\"input\""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "className",
           "type": "string | undefined",
@@ -7987,11 +7428,11 @@
         },
         {
           "id": "components-timeline-features--timeline-break",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge\n        sx={{\n          bg: 'done.emphasis',\n        }}\n      >\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",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link\n          href=\"#\"\n          sx={{\n            fontWeight: 'bold',\n            color: 'fg.default',\n            mr: 1,\n            '&:hover': {\n              color: 'var(--fgColor-accent)',\n            },\n          }}\n          muted\n        >\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -8000,11 +7441,6 @@
           "name": "clipSidebar",
           "type": "boolean",
           "description": "Hides the sidebar above the first Timeline.Item and below the last Timeline.Item."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -8015,43 +7451,20 @@
               "name": "condensed",
               "type": "boolean",
               "description": "Reduces vertical padding and removes background from an item's badge."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
         {
           "name": "Timeline.Badge",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         },
         {
           "name": "Timeline.Body",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         },
         {
           "name": "Timeline.Break",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         }
       ]
     },
@@ -8064,7 +7477,7 @@
       "stories": [
         {
           "id": "components-toggleswitch--default",
-          "code": "() => (\n  <>\n    <Text id=\"toggle\" fontWeight=\"bold\" fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch aria-labelledby=\"toggle\" />\n  </>\n)"
+          "code": "() => (\n  <>\n    <Text id=\"toggle\" className={classes.TextMediumBold}>\n      Toggle label\n    </Text>\n    <ToggleSwitch aria-labelledby=\"toggle\" />\n  </>\n)"
         },
         {
           "id": "components-toggleswitch-features--small",
@@ -8097,6 +7510,10 @@
         {
           "id": "components-toggleswitch-features--controlled",
           "code": "() => {\n  const [isOn, setIsOn] = React.useState(false)\n  const onClick = React.useCallback(() => {\n    setIsOn(!isOn)\n  }, [setIsOn, isOn])\n  const handleSwitchChange = (on: boolean) => {\n    action(`new switch \"on\" state: ${on}`)\n  }\n  return (\n    <>\n      <div\n        className={styles.Row}\n        style={{\n          maxWidth: '300px',\n        }}\n      >\n        <span\n          className={clsx(styles.ColGrow, styles.SwitchLabel)}\n          id=\"switchLabel\"\n        >\n          Notifications\n        </span>\n        <ToggleSwitch\n          onClick={onClick}\n          onChange={handleSwitchChange}\n          checked={isOn}\n          aria-labelledby=\"switchLabel\"\n        />\n      </div>\n      <p>The switch is {isOn ? 'on' : 'off'}</p>\n    </>\n  )\n}"
+        },
+        {
+          "id": "components-toggleswitch-features--with-custom-labels",
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch\n      buttonLabelOn=\"Active\"\n      buttonLabelOff=\"Inactive\"\n      aria-labelledby=\"toggle\"\n    />\n  </ToggleSwitchStoryWrapper>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -8179,6 +7596,18 @@
           "type": "'button' | 'submit' | 'reset'",
           "defaultValue": "'button'",
           "description": "As it’s part of form behavior, this controls whether the button is of type `button`, `submit`, or `reset`."
+        },
+        {
+          "name": "buttonLabelOn",
+          "type": "string",
+          "defaultValue": "'On'",
+          "description": "The text to display when the toggle switch is turned on. Only customize this label if there is a more specific label for the context. For example, you might use 'Show' if the setting is 'Show images'."
+        },
+        {
+          "name": "buttonLabelOff",
+          "type": "string",
+          "defaultValue": "'Off'",
+          "description": "The text to display when the toggle switch is turned off. Only customize this label if there is a more specific label for the context. For example, you might use 'Hide' if the setting is 'Show images'."
         }
       ],
       "subcomponents": []
@@ -8196,7 +7625,7 @@
         },
         {
           "id": "components-token-features--interactive-token",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--token-with-leading-visual",
@@ -8204,7 +7633,7 @@
         },
         {
           "id": "components-token-features--token-with-on-remove-fn",
-          "code": "({ ...args }) => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Token text=\"token\" onRemove={action('remove me')} {...args} />\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n        {...args}\n      />\n      <Token\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n        {...args}\n      />\n    </Box>\n  )\n}"
+          "code": "({ ...args }) => {\n  return (\n    <div className={classes.TokenRow}>\n      <Token text=\"token\" onRemove={action('remove me')} {...args} />\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n        {...args}\n      />\n      <Token\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n        {...args}\n      />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--default-issue-label-token",
@@ -8212,11 +7641,11 @@
         },
         {
           "id": "components-token-features--interactive-issue-label-token",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--issue-label-token-with-on-remove-fn",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n      />\n      <IssueLabelToken\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n      />\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n      />\n      <IssueLabelToken\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n      />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--small-token",
@@ -8232,7 +7661,7 @@
         },
         {
           "id": "components-token-features--issue-label-token-custom-colors",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        flexDirection: 'column',\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Box\n        display=\"flex\"\n        sx={{\n          alignItems: 'start',\n          gap: get('space.2'),\n        }}\n      >\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Link\"\n          fillColor=\"#0366d6\"\n        />\n        <IssueLabelToken\n          as=\"button\"\n          onClick={action('clicked')}\n          text=\"Button\"\n          fillColor=\"lightpink\"\n        />\n      </Box>\n      <h3>Color examples</h3>\n      <Box\n        display=\"flex\"\n        flexWrap=\"wrap\"\n        sx={{\n          alignItems: 'start',\n          gap: get('space.2'),\n        }}\n      >\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"😀 Link\"\n          fillColor=\"#8c50c8\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Token\"\n          fillColor=\"#a9d3bc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚨 Problem\"\n          fillColor=\"#98afa7\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"📥 Inbox\"\n          fillColor=\"#573807\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"deeppink\"\n          fillColor=\"#b7b41e\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"👹 Link\"\n          fillColor=\"#0f65b1\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Tiger\"\n          fillColor=\"#e7bc68\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🐛 coral\"\n          fillColor=\"#D6F2DE\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Long label\"\n          fillColor=\"#161E37\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"✅ Done\"\n          fillColor=\"#232323\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Hello\"\n          fillColor=\"#E0E0E0\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#aed531\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#d980fc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#e7f922\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚀 Lorem\"\n          fillColor=\"#ef70e9\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#72ea84\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#87e50b\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🤷 Lorem\"\n          fillColor=\"#fcf646\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"💡 Light\"\n          fillColor=\"#E40C74\"\n        />\n      </Box>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenColumn}>\n      <div className={classes.TokenRow}>\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Link\"\n          fillColor=\"#0366d6\"\n        />\n        <IssueLabelToken\n          as=\"button\"\n          onClick={action('clicked')}\n          text=\"Button\"\n          fillColor=\"lightpink\"\n        />\n      </div>\n      <h3>Color examples</h3>\n      <div className={classes.TokenWrapRow}>\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"😀 Link\"\n          fillColor=\"#8c50c8\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Token\"\n          fillColor=\"#a9d3bc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚨 Problem\"\n          fillColor=\"#98afa7\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"📥 Inbox\"\n          fillColor=\"#573807\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"deeppink\"\n          fillColor=\"#b7b41e\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"👹 Link\"\n          fillColor=\"#0f65b1\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Tiger\"\n          fillColor=\"#e7bc68\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🐛 coral\"\n          fillColor=\"#D6F2DE\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Long label\"\n          fillColor=\"#161E37\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"✅ Done\"\n          fillColor=\"#232323\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Hello\"\n          fillColor=\"#E0E0E0\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#aed531\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#d980fc\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#e7f922\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🚀 Lorem\"\n          fillColor=\"#ef70e9\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#72ea84\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"Lorem\"\n          fillColor=\"#87e50b\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"🤷 Lorem\"\n          fillColor=\"#fcf646\"\n        />\n        <IssueLabelToken\n          as=\"a\"\n          href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n          text=\"💡 Light\"\n          fillColor=\"#E40C74\"\n        />\n      </div>\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -8277,11 +7706,6 @@
           "name": "size",
           "type": "'small' | 'medium' | 'large' | 'xlarge'",
           "description": "Which size the token will be rendered at"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -8328,61 +7752,6 @@
               "name": "size",
               "type": "'small' | 'medium' | 'large' | 'xlarge'",
               "description": "Which size the token will be rendered at"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
-        },
-        {
-          "name": "AvatarToken",
-          "props": [
-            {
-              "name": "avatarSrc",
-              "type": "string"
-            },
-            {
-              "name": "text",
-              "required": true,
-              "type": "string",
-              "description": "The text label inside the token"
-            },
-            {
-              "name": "as",
-              "type": "'button' | 'a' | 'span'",
-              "defaultValue": "'span'"
-            },
-            {
-              "name": "onRemove",
-              "type": "() => void",
-              "description": "The function that gets called when a user clicks the remove button, or keys `Backspace` or `Delete` when focused on the token"
-            },
-            {
-              "name": "hideRemoveButton",
-              "type": "boolean",
-              "description": "Whether the remove button should be rendered in the token"
-            },
-            {
-              "name": "isSelected",
-              "type": "boolean",
-              "description": "Whether the token is selected"
-            },
-            {
-              "name": "id",
-              "type": "number | string",
-              "description": "A unique identifier that can be associated with the token"
-            },
-            {
-              "name": "size",
-              "type": "'small' | 'medium' | 'large' | 'xlarge'",
-              "description": "Which size the token will be rendered at"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -8398,15 +7767,15 @@
       "stories": [
         {
           "id": "deprecated-components-tooltip--default",
-          "code": "() => (\n  <>\n    <Box\n      sx={{\n        mb: 3,\n      }}\n    >\n      <Banner\n        title=\"Planned for deprecation\"\n        description={\n          <div data-a11y-link-underlines=\"true\">\n            There are plans to deprecate this component in a future release. We\n            recommend using{' '}\n            <Link\n              inline={true}\n              href=\"/react/storybook/?path=/story/components-tooltipv2--default\"\n            >\n              Tooltip\n            </Link>{' '}\n            instead.\n          </div>\n        }\n        variant=\"warning\"\n      />\n    </Box>\n    <Box\n      sx={{\n        p: 5,\n      }}\n    >\n      <Tooltip aria-label=\"Hello, Tooltip!\">\n        <Button>Hover me</Button>\n      </Tooltip>\n    </Box>\n  </>\n)"
+          "code": "() => (\n  <>\n    <div className={classes.BannerContainer}>\n      <Banner\n        title=\"Planned for deprecation\"\n        description={\n          <div data-a11y-link-underlines=\"true\">\n            There are plans to deprecate this component in a future release. We\n            recommend using{' '}\n            <Link\n              inline={true}\n              href=\"/react/storybook/?path=/story/components-tooltipv2--default\"\n            >\n              Tooltip\n            </Link>{' '}\n            instead.\n          </div>\n        }\n        variant=\"warning\"\n      />\n    </div>\n    <div className={classes.PaddedContainer}>\n      <Tooltip aria-label=\"Hello, Tooltip!\">\n        <Button>Hover me</Button>\n      </Tooltip>\n    </div>\n  </>\n)"
         },
         {
           "id": "deprecated-components-tooltip-features--all-directions",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 5,\n      display: 'flex',\n      gap: '8px',\n    }}\n  >\n    <Tooltip direction=\"n\" aria-label=\"Supplementary text\">\n      <Button>North</Button>\n    </Tooltip>\n    <Tooltip direction=\"s\" aria-label=\"Supplementary text\">\n      <Button>South</Button>\n    </Tooltip>\n    <Tooltip direction=\"e\" aria-label=\"Supplementary text\">\n      <Button>East</Button>\n    </Tooltip>\n    <Tooltip direction=\"w\" aria-label=\"Supplementary text\">\n      <Button>West</Button>\n    </Tooltip>\n    <Tooltip direction=\"ne\" aria-label=\"Supplementary text\">\n      <Button>North East</Button>\n    </Tooltip>\n    <Tooltip direction=\"nw\" aria-label=\"Supplementary text\">\n      <Button>North West</Button>\n    </Tooltip>\n    <Tooltip direction=\"se\" aria-label=\"Supplementary text\">\n      <Button>Southeast</Button>\n    </Tooltip>\n    <Tooltip direction=\"sw\" aria-label=\"Supplementary text\">\n      <Button>Southwest</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.AllDirectionsRow}>\n    <Tooltip direction=\"n\" aria-label=\"Supplementary text\">\n      <Button>North</Button>\n    </Tooltip>\n    <Tooltip direction=\"s\" aria-label=\"Supplementary text\">\n      <Button>South</Button>\n    </Tooltip>\n    <Tooltip direction=\"e\" aria-label=\"Supplementary text\">\n      <Button>East</Button>\n    </Tooltip>\n    <Tooltip direction=\"w\" aria-label=\"Supplementary text\">\n      <Button>West</Button>\n    </Tooltip>\n    <Tooltip direction=\"ne\" aria-label=\"Supplementary text\">\n      <Button>North East</Button>\n    </Tooltip>\n    <Tooltip direction=\"nw\" aria-label=\"Supplementary text\">\n      <Button>North West</Button>\n    </Tooltip>\n    <Tooltip direction=\"se\" aria-label=\"Supplementary text\">\n      <Button>Southeast</Button>\n    </Tooltip>\n    <Tooltip direction=\"sw\" aria-label=\"Supplementary text\">\n      <Button>Southwest</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "deprecated-components-tooltip-features--icon-button-tooltip",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip aria-label=\"Search\">\n      <IconButton icon={SearchIcon} aria-label=\"Search\" />\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip aria-label=\"Search\">\n      <IconButton icon={SearchIcon} aria-label=\"Search\" />\n    </Tooltip>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react/deprecated",
@@ -8435,11 +7804,6 @@
           "name": "wrap",
           "type": "boolean",
           "description": "Use `true` to allow text within tooltip to wrap."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -8455,39 +7819,39 @@
       "stories": [
         {
           "id": "components-tooltipv2--default",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 6,\n    }}\n  >\n    <Tooltip text=\"This change can't be undone.\">\n      <Button>Delete</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"This change can't be undone.\">\n      <Button>Delete</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--anchor-has-margin",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip text=\"Tooltip is still centered\">\n      <Button\n        sx={{\n          marginLeft: 3,\n        }}\n      >\n        Button has 16px margin Left\n      </Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"Tooltip is still centered\">\n      <Button className={classes.MarginLeftButton}>\n        Button has 16px margin Left\n      </Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--label-type",
-          "code": "() => (\n  <Box>\n    <Tooltip text=\"Contribution Documentation for 'Primer React'\" type=\"label\">\n      <Link\n        href=\"https://github.com/primer/react/contributor-docs/CONTRIBUTING.md\"\n        sx={{\n          ml: 1,\n          color: 'fg.muted',\n        }}\n      >\n        <Octicon\n          icon={BookIcon}\n          sx={{\n            color: 'fg.muted',\n          }}\n        />\n      </Link>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Tooltip text=\"Contribution Documentation for 'Primer React'\" type=\"label\">\n      <Link\n        href=\"https://github.com/primer/react/contributor-docs/CONTRIBUTING.md\"\n        className={classes.LabelLink}\n      >\n        <Octicon icon={BookIcon} className={classes.LabelIcon} />\n      </Link>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--description-type",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip text=\"Supplementary text\" direction=\"n\">\n      <Button>Save</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"Supplementary text\" direction=\"n\">\n      <Button>Save</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--icon-button-with-description",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip text=\"Supplementary text for icon button\" direction=\"e\">\n      <IconButton icon={SearchIcon} aria-label=\"Search\" />\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"Supplementary text for icon button\" direction=\"e\">\n      <IconButton icon={SearchIcon} aria-label=\"Search\" />\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--all-directions",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 5,\n      display: 'flex',\n      gap: '8px',\n    }}\n  >\n    <Tooltip direction=\"n\" text=\"Supplementary text\">\n      <Button>North</Button>\n    </Tooltip>\n    <Tooltip direction=\"s\" text=\"Supplementary text\">\n      <Button>South</Button>\n    </Tooltip>\n    <Tooltip direction=\"e\" text=\"Supplementary text\">\n      <Button>East</Button>\n    </Tooltip>\n    <Tooltip direction=\"w\" text=\"Supplementary text\">\n      <Button>West</Button>\n    </Tooltip>\n    <Tooltip direction=\"ne\" text=\"Supplementary text\">\n      <Button>North East</Button>\n    </Tooltip>\n    <Tooltip direction=\"nw\" text=\"Supplementary text\">\n      <Button>North West</Button>\n    </Tooltip>\n    <Tooltip direction=\"se\" text=\"Supplementary text\">\n      <Button>Southeast</Button>\n    </Tooltip>\n    <Tooltip direction=\"sw\" text=\"Supplementary text\">\n      <Button>Southwest</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.AllDirectionsRow}>\n    <Tooltip direction=\"n\" text=\"Supplementary text\">\n      <Button>North</Button>\n    </Tooltip>\n    <Tooltip direction=\"s\" text=\"Supplementary text\">\n      <Button>South</Button>\n    </Tooltip>\n    <Tooltip direction=\"e\" text=\"Supplementary text\">\n      <Button>East</Button>\n    </Tooltip>\n    <Tooltip direction=\"w\" text=\"Supplementary text\">\n      <Button>West</Button>\n    </Tooltip>\n    <Tooltip direction=\"ne\" text=\"Supplementary text\">\n      <Button>North East</Button>\n    </Tooltip>\n    <Tooltip direction=\"nw\" text=\"Supplementary text\">\n      <Button>North West</Button>\n    </Tooltip>\n    <Tooltip direction=\"se\" text=\"Supplementary text\">\n      <Button>Southeast</Button>\n    </Tooltip>\n    <Tooltip direction=\"sw\" text=\"Supplementary text\">\n      <Button>Southwest</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--multiline-text",
-          "code": "() => (\n  <Box>\n    <Tooltip\n      direction=\"e\"\n      text=\"Random long text that needs to be wrapped and be multipline and have some paddings around\"\n    >\n      <Button>Multiline East</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Tooltip\n      direction=\"e\"\n      text=\"Random long text that needs to be wrapped and be multipline and have some paddings around\"\n    >\n      <Button>Multiline East</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--calculated-direction",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 5,\n      display: 'flex',\n      gap: '8px',\n    }}\n  >\n    <Tooltip\n      direction=\"w\"\n      text=\"But appears in the east direction due to not having enough space in the west\"\n    >\n      <Button>West</Button>\n    </Tooltip>\n\n    <Tooltip text=\"The direction here is north by default but there is not enough space in the north therefore the tooltip appears in the south\">\n      <Button>North</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.AllDirectionsRow}>\n    <Tooltip\n      direction=\"w\"\n      text=\"But appears in the east direction due to not having enough space in the west\"\n    >\n      <Button>West</Button>\n    </Tooltip>\n\n    <Tooltip text=\"The direction here is north by default but there is not enough space in the north therefore the tooltip appears in the south\">\n      <Button>North</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--on-action-menu-anchor",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n      padding: 5,\n      gap: 2,\n    }}\n  >\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n          <Button\n            leadingVisual={GitBranchIcon}\n            trailingAction={TriangleDownIcon}\n          >\n            ActionMenu.Anchor w/ t\n          </Button>\n        </Tooltip>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n        <ActionMenu.Button leadingVisual={GitBranchIcon}>\n          ActionMenu.Button w/ t\n        </ActionMenu.Button>\n      </Tooltip>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Button leadingVisual={GitBranchIcon} trailingAction={TriangleDownIcon}>\n          ActionMenu.Anchor\n        </Button>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Button leadingVisual={GitBranchIcon}>\n        ActionMenu.Button\n      </ActionMenu.Button>\n\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.ActionMenuRow}>\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n          <Button\n            leadingVisual={GitBranchIcon}\n            trailingAction={TriangleDownIcon}\n          >\n            ActionMenu.Anchor w/ t\n          </Button>\n        </Tooltip>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n        <ActionMenu.Button leadingVisual={GitBranchIcon}>\n          ActionMenu.Button w/ t\n        </ActionMenu.Button>\n      </Tooltip>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Button leadingVisual={GitBranchIcon} trailingAction={TriangleDownIcon}>\n          ActionMenu.Anchor\n        </Button>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Button leadingVisual={GitBranchIcon}>\n        ActionMenu.Button\n      </ActionMenu.Button>\n\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  </div>\n)"
         }
       ],
       "props": [
@@ -8513,11 +7877,6 @@
           "name": "keybindingHint",
           "type": "string",
           "description": "Optional keybinding hint to indicate the availability of a keyboard shortcut. Supported syntax is described in the docs for the `KeybindingHint` component."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -8531,7 +7890,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",
@@ -8539,7 +7898,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",
@@ -8555,7 +7914,7 @@
         },
         {
           "id": "components-treeview-features--controlled",
-          "code": "() => {\n  const [currentPath, setCurrentPath] = React.useState<string[]>([\n    'src',\n    'Avatar.tsx',\n  ])\n  const [tree, setTree] = React.useState<TreeItem[]>(initialTree)\n  return (\n    <Box\n      sx={{\n        display: 'grid',\n        gap: 3,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          gap: 2,\n        }}\n      >\n        <Button onClick={() => setTree(collapseAll)}>Collapse all</Button>\n        <Button onClick={() => setTree(expandAll)}>Expand all</Button>\n      </Box>\n      <nav aria-label=\"Files\">\n        <CurrentPathContext.Provider\n          value={{\n            currentPath,\n            setCurrentPath,\n          }}\n        >\n          <TreeView aria-label=\"Files\">\n            {tree.map((item) => (\n              <TreeItem\n                key={item.data.name}\n                item={item}\n                path={[item.data.name]}\n                onExpandedChange={(path, expanded) =>\n                  setTree((tree) => setExpanded(tree, path, expanded))\n                }\n              />\n            ))}\n          </TreeView>\n        </CurrentPathContext.Provider>\n      </nav>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [currentPath, setCurrentPath] = React.useState<string[]>([\n    'src',\n    'Avatar.tsx',\n  ])\n  const [tree, setTree] = React.useState<TreeItem[]>(initialTree)\n  return (\n    <div className={classes.ControlledContainer}>\n      <div className={classes.ButtonContainer}>\n        <Button onClick={() => setTree(collapseAll)}>Collapse all</Button>\n        <Button onClick={() => setTree(expandAll)}>Expand all</Button>\n      </div>\n      <nav aria-label=\"Files\">\n        <CurrentPathContext.Provider\n          value={{\n            currentPath,\n            setCurrentPath,\n          }}\n        >\n          <TreeView aria-label=\"Files\">\n            {tree.map((item) => (\n              <TreeItem\n                key={item.data.name}\n                item={item}\n                path={[item.data.name]}\n                onExpandedChange={(path, expanded) =>\n                  setTree((tree) => setExpanded(tree, path, expanded))\n                }\n              />\n            ))}\n          </TreeView>\n        </CurrentPathContext.Provider>\n      </nav>\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -8644,6 +8003,11 @@
               "type": "boolean",
               "description": "The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
             },
+            {
+              "name": "secondaryActions",
+              "type": "TreeViewSecondaryActions[]",
+              "description": "An array of secondary actions to render in as a trailing action. Each action should have a 'label', 'icon', and 'onClick' handler."
+            },
             {
               "name": "containIntrinsicSize",
               "type": "string",
@@ -8805,11 +8169,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "'div'"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -8876,11 +8235,6 @@
           "type": "'inset' | 'flush'",
           "defaultValue": "'inset'",
           "description": "`inset` children are offset horizontally from container edges. `flush` children are flush horizontally with container edges"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -8921,11 +8275,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -8935,41 +8284,66 @@
         }
       ]
     },
-    "avatar_pair": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/AvatarPair",
-      "id": "avatar_pair",
-      "name": "AvatarPair",
-      "status": "alpha",
-      "a11yReviewed": "2025-01-08",
+    "dialog": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/DialogV1",
+      "id": "dialog",
+      "docsId": "dialog",
+      "name": "Dialog",
+      "status": "deprecated",
+      "a11yReviewed": false,
       "stories": [
         {
-          "id": "components-avatarpair--default",
-          "code": "() => (\n  <AvatarPair>\n    <Avatar\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n      alt=\"Primer avatar, parent\"\n    />\n    <Avatar\n      src=\"https://avatars.githubusercontent.com/primer\"\n      alt=\"Primer avatar, child\"\n    />\n  </AvatarPair>\n)"
+          "id": "components-dialog--default",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <div\n        style={{\n          marginBottom: 'var(--stack-gap-normal)',\n        }}\n      >\n        <Banner\n          title=\"This component is deprecated\"\n          description=\"We recommend using Dialog instead.\"\n          variant=\"warning\"\n        />\n      </div>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <div\n            style={{\n              padding: 'var(--stack-gap-normal)',\n            }}\n          >\n            <Text>Some content</Text>\n          </div>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"
+        }
+      ],
+      "importPath": "@primer/react/deprecated",
+      "props": [
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Whether or not the dialog is open"
         },
         {
-          "id": "components-avatarpair-features--parent-circle",
-          "code": "() => (\n  <AvatarPair>\n    <Avatar\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n      alt=\"Primer avatar, parent\"\n    />\n    <Avatar\n      square\n      src=\"https://avatars.githubusercontent.com/primer\"\n      alt=\"Primer avatar, child\"\n    />\n  </AvatarPair>\n)"
+          "name": "onDismiss",
+          "type": "() => void",
+          "description": "Function that will be called when the dialog is closed"
         },
         {
-          "id": "components-avatarpair-features--parent-square",
-          "code": "() => (\n  <AvatarPair>\n    <Avatar\n      square\n      src=\"https://avatars.githubusercontent.com/primer\"\n      alt=\"Primer avatar, parent\"\n    />\n    <Avatar\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n      alt=\"Primer avatar, child\"\n    />\n  </AvatarPair>\n)"
-        }
-      ],
-      "importPath": "@primer/react",
-      "props": [
+          "name": "returnFocusRef",
+          "type": " React.RefObject<HTMLElement>",
+          "description": "The element to restore focus back to after the `Dialog` is closed"
+        },
         {
-          "name": "children",
-          "type": "Avatar[]",
-          "defaultValue": "",
-          "description": ""
+          "name": "initialFocusRef",
+          "type": " React.RefObject<HTMLElement>",
+          "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
         },
         {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
+        },
+        {
+          "name": "narrow",
+          "type": "boolean"
+        },
+        {
+          "name": "wide",
+          "type": "boolean"
         }
       ],
-      "subcomponents": []
+      "subcomponents": [
+        {
+          "name": "Dialog.Header",
+          "props": []
+        }
+      ]
     },
     "filtered_search": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/FilteredSearch",
@@ -9035,11 +8409,6 @@
           "name": "aria-label",
           "type": "string",
           "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -9124,7 +8493,7 @@
       "stories": [
         {
           "id": "deprecated-components-selectpanel--default",
-          "code": "() => {\n  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels\n  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(\n    initialSelectedLabels,\n  )\n\n  /* Selection */\n  const onLabelSelect = (labelId: string) => {\n    if (!selectedLabelIds.includes(labelId))\n      setSelectedLabelIds([...selectedLabelIds, labelId])\n    else setSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId))\n  }\n  const onClearSelection = () => {\n    setSelectedLabelIds([])\n  }\n  const onSubmit = () => {\n    data.issue.labelIds = selectedLabelIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedLabelIds(initialSelectedLabels)\n  }\n\n  /* Filtering */\n  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)\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 === '') setFilteredLabels(data.labels)\n    else {\n      setFilteredLabels(\n        data.labels\n          .map((label) => {\n            if (label.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                label,\n              }\n            else if (label.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                label,\n              }\n            else if (label.description?.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                label,\n              }\n            else\n              return {\n                priority: -1,\n                label,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.label),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.labelIds\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 ? filteredLabels : data.labels.sort(sortingFn)\n  return (\n    <>\n      <SelectPanel\n        title=\"Select labels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            aria-label=\"Search\"\n            onChange={onSearchInputChange}\n          />\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((label) => (\n              <ActionList.Item\n                key={label.id}\n                onSelect={() => onLabelSelect(label.id)}\n                selected={selectedLabelIds.includes(label.id)}\n              >\n                <ActionList.LeadingVisual>\n                  <Box\n                    sx={{\n                      width: 14,\n                      height: 14,\n                      borderRadius: '100%',\n                    }}\n                    style={{\n                      backgroundColor: `#${label.color}`,\n                    }}\n                  />\n                </ActionList.LeadingVisual>\n                {label.name}\n                <ActionList.Description variant=\"block\">\n                  {label.description}\n                </ActionList.Description>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction variant=\"button\">\n            Edit labels\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels\n  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(\n    initialSelectedLabels,\n  )\n\n  /* Selection */\n  const onLabelSelect = (labelId: string) => {\n    if (!selectedLabelIds.includes(labelId))\n      setSelectedLabelIds([...selectedLabelIds, labelId])\n    else setSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId))\n  }\n  const onClearSelection = () => {\n    setSelectedLabelIds([])\n  }\n  const onSubmit = () => {\n    data.issue.labelIds = selectedLabelIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedLabelIds(initialSelectedLabels)\n  }\n\n  /* Filtering */\n  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)\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 === '') setFilteredLabels(data.labels)\n    else {\n      setFilteredLabels(\n        data.labels\n          .map((label) => {\n            if (label.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                label,\n              }\n            else if (label.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                label,\n              }\n            else if (label.description?.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                label,\n              }\n            else\n              return {\n                priority: -1,\n                label,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.label),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.labelIds\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 ? filteredLabels : data.labels.sort(sortingFn)\n  return (\n    <>\n      <SelectPanel\n        title=\"Select labels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            aria-label=\"Search\"\n            onChange={onSearchInputChange}\n          />\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((label) => (\n              <ActionList.Item\n                key={label.id}\n                onSelect={() => onLabelSelect(label.id)}\n                selected={selectedLabelIds.includes(label.id)}\n              >\n                <ActionList.LeadingVisual>\n                  <div\n                    className={sharedClasses.Circle}\n                    style={{\n                      backgroundColor: `#${label.color}`,\n                    }}\n                  />\n                </ActionList.LeadingVisual>\n                {label.name}\n                <ActionList.Description variant=\"block\">\n                  {label.description}\n                </ActionList.Description>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction variant=\"button\">\n            Edit labels\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-examples--minimal",
@@ -9132,7 +8501,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--short-select-panel",
-          "code": "() => {\n  const initialChannels = {\n    GitHub: false,\n    Email: false,\n  }\n  const [channels, setChannels] = React.useState(initialChannels)\n  const [onlyFailures, setOnlyFailures] = React.useState(false)\n  const onSubmit = () => {\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setChannels(initialChannels)\n  }\n  const toggleChannel = (channel: keyof typeof channels) => {\n    setChannels({\n      ...channels,\n      [channel]: !channels[channel],\n    })\n  }\n  const channelsEnabled = channels.GitHub || channels.Email\n  return (\n    <>\n      <h1>Short SelectPanel</h1>\n      <p>\n        Use <code>height=fit-content</code> to match height of contents\n      </p>\n      <SelectPanel\n        title=\"Select notification channels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button>\n          <Text\n            sx={{\n              color: 'fg.muted',\n            }}\n          >\n            Notify me:\n          </Text>{' '}\n          {Object.keys(channels)\n            .filter((channel) => channels[channel as keyof typeof channels])\n            .join(', ') || 'Never'}\n          {onlyFailures && channelsEnabled && ' (Failed workflows only)'}\n        </SelectPanel.Button>\n\n        <ActionList>\n          <ActionList.Item\n            selected={channels.GitHub}\n            onSelect={() => toggleChannel('GitHub')}\n          >\n            On GitHub\n          </ActionList.Item>\n          <ActionList.Item\n            selected={channels.Email}\n            onSelect={() => toggleChannel('Email')}\n          >\n            Email\n          </ActionList.Item>\n          <Box\n            role=\"none\"\n            sx={{\n              transition: 'max-height 100ms ease-out, opacity 100ms ease-out',\n              opacity: channelsEnabled ? 1 : 0,\n              maxHeight: channelsEnabled ? '100px' : 0,\n              overflow: channelsEnabled ? 'visible' : 'hidden',\n            }}\n          >\n            <ActionList.Divider />\n            <ActionList.Item\n              selected={onlyFailures}\n              onSelect={() => setOnlyFailures(!onlyFailures)}\n            >\n              Only notify for failed workflows\n            </ActionList.Item>\n          </Box>\n        </ActionList>\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const initialChannels = {\n    GitHub: false,\n    Email: false,\n  }\n  const [channels, setChannels] = React.useState(initialChannels)\n  const [onlyFailures, setOnlyFailures] = React.useState(false)\n  const onSubmit = () => {\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setChannels(initialChannels)\n  }\n  const toggleChannel = (channel: keyof typeof channels) => {\n    setChannels({\n      ...channels,\n      [channel]: !channels[channel],\n    })\n  }\n  const channelsEnabled = channels.GitHub || channels.Email\n  return (\n    <>\n      <h1>Short SelectPanel</h1>\n      <p>\n        Use <code>height=fit-content</code> to match height of contents\n      </p>\n      <SelectPanel\n        title=\"Select notification channels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button>\n          <Text className={classes.TextMuted}>Notify me:</Text>{' '}\n          {Object.keys(channels)\n            .filter((channel) => channels[channel as keyof typeof channels])\n            .join(', ') || 'Never'}\n          {onlyFailures && channelsEnabled && ' (Failed workflows only)'}\n        </SelectPanel.Button>\n\n        <ActionList>\n          <ActionList.Item\n            selected={channels.GitHub}\n            onSelect={() => toggleChannel('GitHub')}\n          >\n            On GitHub\n          </ActionList.Item>\n          <ActionList.Item\n            selected={channels.Email}\n            onSelect={() => toggleChannel('Email')}\n          >\n            Email\n          </ActionList.Item>\n          <div\n            role=\"none\"\n            className={`${classes.TransitionBox} ${channelsEnabled ? classes.TransitionBoxVisible : classes.TransitionBoxHidden}`}\n          >\n            <ActionList.Divider />\n            <ActionList.Item\n              selected={onlyFailures}\n              onSelect={() => setOnlyFailures(!onlyFailures)}\n            >\n              Only notify for failed workflows\n            </ActionList.Item>\n          </div>\n        </ActionList>\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-features--instant-selection-variant",
@@ -9140,7 +8509,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-features--with-warning",
-          "code": "() => {\n  /* Selection */\n\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const MAX_LIMIT = 3\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 warning</h1>\n\n      <SelectPanel\n        title=\"Set assignees\"\n        description={`Select up to ${MAX_LIMIT} people`}\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          Assignees\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            onChange={onSearchInputChange}\n            aria-label=\"Search\"\n          />\n        </SelectPanel.Header>\n\n        {selectedAssigneeIds.length >= MAX_LIMIT ? (\n          <SelectPanel.Message variant=\"warning\" size=\"inline\">\n            You have reached the limit of {MAX_LIMIT} assignees on your free\n            account. <Link href=\"/upgrade\">Upgrade your account.</Link>\n          </SelectPanel.Message>\n        ) : null}\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((collaborator) => (\n              <ActionList.Item\n                key={collaborator.id}\n                onSelect={() => onCollaboratorSelect(collaborator.id)}\n                selected={selectedAssigneeIds.includes(collaborator.id)}\n                disabled={\n                  selectedAssigneeIds.length >= MAX_LIMIT &&\n                  !selectedAssigneeIds.includes(collaborator.id)\n                }\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>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  /* Selection */\n\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const MAX_LIMIT = 3\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 warning</h1>\n\n      <SelectPanel\n        title=\"Set assignees\"\n        description={`Select up to ${MAX_LIMIT} people`}\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          className={classes.ButtonCustom}\n        >\n          Assignees\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            onChange={onSearchInputChange}\n            aria-label=\"Search\"\n          />\n        </SelectPanel.Header>\n\n        {selectedAssigneeIds.length >= MAX_LIMIT ? (\n          <SelectPanel.Message variant=\"warning\" size=\"inline\">\n            You have reached the limit of {MAX_LIMIT} assignees on your free\n            account. <Link href=\"/upgrade\">Upgrade your account.</Link>\n          </SelectPanel.Message>\n        ) : null}\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((collaborator) => (\n              <ActionList.Item\n                key={collaborator.id}\n                onSelect={() => onCollaboratorSelect(collaborator.id)}\n                selected={selectedAssigneeIds.includes(collaborator.id)}\n                disabled={\n                  selectedAssigneeIds.length >= MAX_LIMIT &&\n                  !selectedAssigneeIds.includes(collaborator.id)\n                }\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>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-examples--open-from-menu",
@@ -9148,7 +8517,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",
@@ -9160,7 +8529,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          <Box\n            id=\"filters\"\n            sx={{\n              display: 'flex',\n              marginTop: 1,\n            }}\n          >\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          </Box>\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",