@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.4

package/generated/components.json

@@ -6,7 +6,7 @@
       "id": "actionbar",
       "name": "ActionBar",
       "status": "alpha",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "experimental-components-actionbar--default",
@@ -104,7 +104,7 @@
       "id": "action_list",
       "name": "ActionList",
       "status": "beta",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-actionlist--default",
@@ -120,7 +120,7 @@
         },
         {
           "id": "components-actionlist-features--with-custom-heading",
-          "code": "() => (\n  <>\n    <Heading\n      as=\"h1\"\n      id=\"list-heading\"\n      sx={{\n        fontSize: 3,\n        marginX: 3,\n      }}\n    >\n      Details\n    </Heading>\n    <ActionList aria-labelledby=\"list-heading\">\n      <ActionList.LinkItem href=\"https://github.com/primer/react#readme\">\n        <ActionList.LeadingVisual>\n          <BookIcon />\n        </ActionList.LeadingVisual>\n        Readme\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/blob/main/LICENSE\">\n        <ActionList.LeadingVisual>\n          <LawIcon />\n        </ActionList.LeadingVisual>\n        MIT License\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/stargazers\">\n        <ActionList.LeadingVisual>\n          <StarIcon />\n        </ActionList.LeadingVisual>\n        <strong>1.5k</strong> stars\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/watchers\">\n        <ActionList.LeadingVisual>\n          <EyeIcon />\n        </ActionList.LeadingVisual>\n        <strong>21</strong> watching\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/network/members\">\n        <ActionList.LeadingVisual>\n          <RepoForkedIcon />\n        </ActionList.LeadingVisual>\n        <strong>225</strong> forks\n      </ActionList.LinkItem>\n    </ActionList>\n  </>\n)"
+          "code": "() => (\n  <>\n    <Heading as=\"h1\" id=\"list-heading\" className={classes.HeadingLarge}>\n      Details\n    </Heading>\n    <ActionList aria-labelledby=\"list-heading\">\n      <ActionList.LinkItem href=\"https://github.com/primer/react#readme\">\n        <ActionList.LeadingVisual>\n          <BookIcon />\n        </ActionList.LeadingVisual>\n        Readme\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/blob/main/LICENSE\">\n        <ActionList.LeadingVisual>\n          <LawIcon />\n        </ActionList.LeadingVisual>\n        MIT License\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/stargazers\">\n        <ActionList.LeadingVisual>\n          <StarIcon />\n        </ActionList.LeadingVisual>\n        <strong>1.5k</strong> stars\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/watchers\">\n        <ActionList.LeadingVisual>\n          <EyeIcon />\n        </ActionList.LeadingVisual>\n        <strong>21</strong> watching\n      </ActionList.LinkItem>\n      <ActionList.LinkItem href=\"https://github.com/primer/react/network/members\">\n        <ActionList.LeadingVisual>\n          <RepoForkedIcon />\n        </ActionList.LeadingVisual>\n        <strong>225</strong> forks\n      </ActionList.LinkItem>\n    </ActionList>\n  </>\n)"
         },
         {
           "id": "components-actionlist-features--with-icons",
@@ -196,7 +196,7 @@
         },
         {
           "id": "components-actionlist-features--links",
-          "code": "() => (\n  <ActionList>\n    <ActionList.Heading\n      as=\"h1\"\n      sx={{\n        fontSize: 1,\n      }}\n    >\n      Details\n    </ActionList.Heading>\n    <ActionList.LinkItem href=\"https://github.com/primer/react#readme\">\n      <ActionList.LeadingVisual>\n        <BookIcon />\n      </ActionList.LeadingVisual>\n      Readme\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/blob/main/LICENSE\">\n      <ActionList.LeadingVisual>\n        <LawIcon />\n      </ActionList.LeadingVisual>\n      MIT License\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/stargazers\">\n      <ActionList.LeadingVisual>\n        <StarIcon />\n      </ActionList.LeadingVisual>\n      <strong>1.5k</strong> stars\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/watchers\">\n      <ActionList.LeadingVisual>\n        <EyeIcon />\n      </ActionList.LeadingVisual>\n      <strong>21</strong> watching\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/network/members\">\n      <ActionList.LeadingVisual>\n        <RepoForkedIcon />\n      </ActionList.LeadingVisual>\n      <strong>225</strong> forks\n    </ActionList.LinkItem>\n  </ActionList>\n)"
+          "code": "() => (\n  <ActionList>\n    <ActionList.Heading as=\"h1\" className={classes.HeadingSmall}>\n      Details\n    </ActionList.Heading>\n    <ActionList.LinkItem href=\"https://github.com/primer/react#readme\">\n      <ActionList.LeadingVisual>\n        <BookIcon />\n      </ActionList.LeadingVisual>\n      Readme\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/blob/main/LICENSE\">\n      <ActionList.LeadingVisual>\n        <LawIcon />\n      </ActionList.LeadingVisual>\n      MIT License\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/stargazers\">\n      <ActionList.LeadingVisual>\n        <StarIcon />\n      </ActionList.LeadingVisual>\n      <strong>1.5k</strong> stars\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/watchers\">\n      <ActionList.LeadingVisual>\n        <EyeIcon />\n      </ActionList.LeadingVisual>\n      <strong>21</strong> watching\n    </ActionList.LinkItem>\n    <ActionList.LinkItem href=\"https://github.com/primer/react/network/members\">\n      <ActionList.LeadingVisual>\n        <RepoForkedIcon />\n      </ActionList.LeadingVisual>\n      <strong>225</strong> forks\n    </ActionList.LinkItem>\n  </ActionList>\n)"
         },
         {
           "id": "components-actionlist-features--custom-item-children",
@@ -204,7 +204,7 @@
         },
         {
           "id": "components-actionlist-features--text-wrap-and-truncation",
-          "code": "() => (\n  <Box maxWidth=\"300px\">\n    <ActionList showDividers>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Block Description. Long text should wrap\n        <ActionList.Description variant=\"block\">\n          This description is long, but it is block so it wraps\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Inline Description\n        <ActionList.Description truncate>\n          This description gets truncated because it is inline with truncation\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Description with truncation and complex children\n        <ActionList.Description truncate>\n          With <strong>bold</strong> and <em>italic</em> text, and it should\n          truncate if it is too long\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Inline Description\n        <ActionList.Description>\n          This description wraps because it is inline without truncation\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Really long text without a description should wrap so it wraps\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        SomethingSomething/SomethingElse.Some.Thing.Lalala.la\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n    </ActionList>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.BoxWithMaxWidth}>\n    <ActionList showDividers>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Block Description. Long text should wrap\n        <ActionList.Description variant=\"block\">\n          This description is long, but it is block so it wraps\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Inline Description\n        <ActionList.Description truncate>\n          This description gets truncated because it is inline with truncation\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Description with truncation and complex children\n        <ActionList.Description truncate>\n          With <strong>bold</strong> and <em>italic</em> text, and it should\n          truncate if it is too long\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Inline Description\n        <ActionList.Description>\n          This description wraps because it is inline without truncation\n        </ActionList.Description>\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        Really long text without a description should wrap so it wraps\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n      <ActionList.Item>\n        <ActionList.LeadingVisual>\n          <ArrowRightIcon />\n        </ActionList.LeadingVisual>\n        SomethingSomething/SomethingElse.Some.Thing.Lalala.la\n        <ActionList.TrailingVisual>\n          <ArrowLeftIcon />\n        </ActionList.TrailingVisual>\n      </ActionList.Item>\n    </ActionList>\n  </div>\n)"
         },
         {
           "id": "components-actionlist-features--conditional-children",
@@ -237,6 +237,10 @@
         {
           "id": "components-actionlist-features--full-variant",
           "code": "() => (\n  <ActionList variant=\"full\">\n    <ActionList.Item>Copy link</ActionList.Item>\n    <ActionList.Item>Quote reply</ActionList.Item>\n    <ActionList.Item>Edit comment</ActionList.Item>\n    <ActionList.Divider />\n    <ActionList.Item variant=\"danger\">Delete file</ActionList.Item>\n  </ActionList>\n)"
+        },
+        {
+          "id": "components-actionlist-features--large-item",
+          "code": "() => (\n  <ActionList>\n    <ActionList.Item size=\"large\">Large item</ActionList.Item>\n    <ActionList.Item size=\"large\">\n      Large item\n      <ActionList.Description>With inline description</ActionList.Description>\n    </ActionList.Item>\n    <ActionList.Item size=\"large\">\n      Large item\n      <ActionList.Description variant=\"block\">\n        With block description\n      </ActionList.Description>\n    </ActionList.Item>\n  </ActionList>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -295,6 +299,12 @@
               "defaultValue": "'default'",
               "description": "`danger` indicates that the item is destructive."
             },
+            {
+              "name": "size",
+              "type": "'medium' | 'large'",
+              "defaultValue": "'medium'",
+              "description": "The block size of the ActionList items."
+            },
             {
               "name": "onSelect",
               "type": "(event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void",
@@ -640,7 +650,7 @@
       "id": "action_menu",
       "name": "ActionMenu",
       "status": "beta",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-actionmenu--default",
@@ -652,7 +662,7 @@
         },
         {
           "id": "components-actionmenu-features--single-select",
-          "code": "() => {\n  const options = [\n    {\n      name: 'Fast forward',\n    },\n    {\n      name: 'Recursive',\n    },\n    {\n      name: 'Ours',\n    },\n    {\n      name: 'Octopus',\n    },\n    {\n      name: 'Resolve',\n    },\n    {\n      name: 'Subtree',\n    },\n  ]\n  const [selectedIndex, setSelectedIndex] = React.useState(0)\n  const selectedType = options[selectedIndex]\n  return (\n    <ActionMenu>\n      <ActionMenu.Button>\n        <Box\n          sx={{\n            color: 'fg.muted',\n            display: 'inline-block',\n          }}\n        >\n          Options:\n        </Box>{' '}\n        {selectedType.name}\n      </ActionMenu.Button>\n      <ActionMenu.Overlay width=\"auto\">\n        <ActionList selectionVariant=\"single\">\n          {options.map((options, index) => (\n            <ActionList.Item\n              key={index}\n              selected={index === selectedIndex}\n              onSelect={() => setSelectedIndex(index)}\n            >\n              {options.name}\n            </ActionList.Item>\n          ))}\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  )\n}"
+          "code": "() => {\n  const options = [\n    {\n      name: 'Fast forward',\n    },\n    {\n      name: 'Recursive',\n    },\n    {\n      name: 'Ours',\n    },\n    {\n      name: 'Octopus',\n    },\n    {\n      name: 'Resolve',\n    },\n    {\n      name: 'Subtree',\n    },\n  ]\n  const [selectedIndex, setSelectedIndex] = React.useState(0)\n  const selectedType = options[selectedIndex]\n  return (\n    <ActionMenu>\n      <ActionMenu.Button>\n        <span className={classes.MutedText}>Options:</span> {selectedType.name}\n      </ActionMenu.Button>\n      <ActionMenu.Overlay width=\"auto\">\n        <ActionList selectionVariant=\"single\">\n          {options.map((options, index) => (\n            <ActionList.Item\n              key={index}\n              selected={index === selectedIndex}\n              onSelect={() => setSelectedIndex(index)}\n            >\n              {options.name}\n            </ActionList.Item>\n          ))}\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  )\n}"
         },
         {
           "id": "components-actionmenu-features--multi-select",
@@ -782,55 +792,55 @@
       "id": "anchored_overlay",
       "name": "AnchoredOverlay",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
-          "code": "(args: Args) => {\n  const rows = 20\n  const columns = 10\n  return (\n    <HeaderAndLayout>\n      <table>\n        <tbody>\n          {Array(rows)\n            .fill(null)\n            .map((_, i) => (\n              <tr key={i}>\n                {Array(columns)\n                  .fill(null)\n                  .map((_1, j) => (\n                    <td key={`${i}${j}`}>\n                      <Box m={2}>\n                        <Playground\n                          {...{\n                            ...args,\n                            portalContainerName: 'scrollingPortal',\n                          }}\n                        />\n                      </Box>\n                    </td>\n                  ))}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </HeaderAndLayout>\n  )\n}"
+          "code": "(args: Args) => {\n  const rows = 20\n  const columns = 10\n  return (\n    <HeaderAndLayout>\n      <table>\n        <tbody>\n          {Array(rows)\n            .fill(null)\n            .map((_, i) => (\n              <tr key={i}>\n                {Array(columns)\n                  .fill(null)\n                  .map((_1, j) => (\n                    <td key={`${i}${j}`}>\n                      <div className={classes.PlaygroundCell}>\n                        <Playground\n                          {...{\n                            ...args,\n                            portalContainerName: 'scrollingPortal',\n                          }}\n                        />\n                      </div>\n                    </td>\n                  ))}\n              </tr>\n            ))}\n        </tbody>\n      </table>\n    </HeaderAndLayout>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--custom-anchor-id",
-          "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      anchorId=\"my-custom-anchor-id\"\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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      anchorId=\"my-custom-anchor-id\"\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--height",
-          "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      height=\"large\"\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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      height=\"large\"\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--width",
-          "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      width=\"large\"\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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      width=\"large\"\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--anchor-alignment",
-          "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) => (\n        <Button {...props} block>\n          Button\n        </Button>\n      )}\n      align=\"center\"\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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) => (\n        <Button {...props} block>\n          Button\n        </Button>\n      )}\n      align=\"center\"\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--anchor-side",
-          "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      side=\"outside-right\"\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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      side=\"outside-right\"\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--offset-position-from-anchor",
-          "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      anchorOffset={100}\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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      anchorOffset={100}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--offset-alignment-from-anchor",
-          "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      alignmentOffset={100}\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      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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      alignmentOffset={100}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--focus-trap-overrides",
-          "code": "() => {\n  const initialFocusRef = useRef<HTMLButtonElement>(null)\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      focusTrapSettings={{\n        initialFocusRef,\n      }}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'Focus Trap Demo Overlay',\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <Button>First button</Button>\n      <Button ref={initialFocusRef}>Initial focus</Button>\n    </AnchoredOverlay>\n  )\n}"
+          "code": "() => {\n  const initialFocusRef = useRef<HTMLButtonElement>(null)\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      focusTrapSettings={{\n        initialFocusRef,\n      }}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'Focus Trap Demo Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <Button>First button</Button>\n      <Button ref={initialFocusRef}>Initial focus</Button>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--focus-zone-overrides",
-          "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      focusZoneSettings={{\n        bindKeys: FocusKeys.JK,\n      }}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'Focus Zone Demo Overlay',\n      }}\n      preventOverflow={false}\n    >\n      <p>\n        Use <kbd>J</kbd> and <kbd>K</kbd> keys to move focus.\n      </p>\n      <Button>First</Button>\n      <Button>Second</Button>\n      <Button>Third</Button>\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      focusZoneSettings={{\n        bindKeys: FocusKeys.JK,\n      }}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'Focus Zone Demo Overlay',\n        className: classes.Overlay,\n      }}\n      preventOverflow={false}\n    >\n      <p>\n        Use <kbd>J</kbd> and <kbd>K</kbd> keys to move focus.\n      </p>\n      <Button>First</Button>\n      <Button>Second</Button>\n      <Button>Third</Button>\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--overlay-props-overrides",
-          "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        overflow: 'auto',\n        maxHeight: 'xsmall',\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      <div>Overlay props have been overridden to set: </div>\n      <pre>\n        <li>overflow: `auto`</li>\n        <li>maxHeight: `xsmall`</li>\n      </pre>\n      <Box\n        sx={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {hoverCard}\n      </Box>\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        overflow: 'auto',\n        maxHeight: 'xsmall',\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        className: classes.Overlay,\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      <div>Overlay props have been overridden to set: </div>\n      <pre>\n        <li>overflow: `auto`</li>\n        <li>maxHeight: `xsmall`</li>\n      </pre>\n      <div className={classes.FlexColFill}>{hoverCard}</div>\n    </AnchoredOverlay>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -975,27 +985,27 @@
       "id": "autocomplete",
       "name": "Autocomplete",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
-          "code": "() => {\n  const [tokens, setTokens] = useState<Datum[]>([])\n  const selectedTokenIds = tokens.map((token) => token.id)\n  const [selectedItemIds, setSelectedItemIds] =\n    useState<Array<string>>(selectedTokenIds)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n    setSelectedItemIds(selectedItemIds.filter((id) => id !== tokenId))\n  }\n  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n    if (!Array.isArray(newlySelectedItems)) {\n      return\n    }\n    setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n    if (newlySelectedItems.length < selectedItemIds.length) {\n      const newlySelectedItemIds = newlySelectedItems.map(({ id }) => id)\n      const removedItemIds = selectedTokenIds.filter(\n        (id) => !newlySelectedItemIds.includes(id),\n      )\n      for (const removedItemId of removedItemIds) {\n        onTokenRemove(removedItemId)\n      }\n      return\n    }\n    setTokens(\n      newlySelectedItems.map(({ id, text }) => ({\n        id,\n        text,\n      })),\n    )\n  }\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input\n            as={TextInputTokens}\n            tokens={tokens}\n            onTokenRemove={onTokenRemove}\n            block\n          />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={selectedItemIds}\n              onSelectedChange={onSelectedChange}\n              selectionVariant=\"multiple\"\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState<Datum[]>([])\n  const selectedTokenIds = tokens.map((token) => token.id)\n  const [selectedItemIds, setSelectedItemIds] =\n    useState<Array<string>>(selectedTokenIds)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n    setSelectedItemIds(selectedItemIds.filter((id) => id !== tokenId))\n  }\n  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n    if (!Array.isArray(newlySelectedItems)) {\n      return\n    }\n    setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n    if (newlySelectedItems.length < selectedItemIds.length) {\n      const newlySelectedItemIds = newlySelectedItems.map(({ id }) => id)\n      const removedItemIds = selectedTokenIds.filter(\n        (id) => !newlySelectedItemIds.includes(id),\n      )\n      for (const removedItemId of removedItemIds) {\n        onTokenRemove(removedItemId)\n      }\n      return\n    }\n    setTokens(\n      newlySelectedItems.map(({ id, text }) => ({\n        id,\n        text,\n      })),\n    )\n  }\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input\n            as={TextInputTokens}\n            tokens={tokens}\n            onTokenRemove={onTokenRemove}\n            block\n          />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={selectedItemIds}\n              onSelectedChange={onSelectedChange}\n              selectionVariant=\"multiple\"\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--add-new-item",
-          "code": "() => {\n  const [inputValue, setInputValue] = React.useState<string>('')\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-add-new\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input\n            value={inputValue}\n            onChange={(e) => {\n              setInputValue(e.currentTarget.value)\n            }}\n          />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-add-new\"\n              addNewItem={\n                inputValue &&\n                !items.map((item) => item.text).includes(inputValue)\n                  ? {\n                      text: inputValue,\n                      id: inputValue,\n                      // `handleAddItem` callback isn't needed for this specific example,\n                      // but it's included here to show that it exists\n                      handleAddItem: (selectedItem) => {\n                        // eslint-disable-next-line no-console\n                        console.log('added item:', selectedItem)\n                        return\n                      },\n                    }\n                  : undefined\n              }\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [inputValue, setInputValue] = React.useState<string>('')\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-add-new\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input\n            value={inputValue}\n            onChange={(e) => {\n              setInputValue(e.currentTarget.value)\n            }}\n          />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-add-new\"\n              addNewItem={\n                inputValue &&\n                !items.map((item) => item.text).includes(inputValue)\n                  ? {\n                      text: inputValue,\n                      id: inputValue,\n                      handleAddItem: (selectedItem) => {\n                        // eslint-disable-next-line no-console\n                        console.log('added item:', selectedItem)\n                        return\n                      },\n                    }\n                  : undefined\n              }\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--custom-search-filter-fn",
-          "code": "() => {\n  const [filterVal, setFilterVal] = useState<string>('')\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setFilterVal(e.currentTarget.value)\n  }\n  const customFilterFn = (item: Datum) => item.text.includes(filterVal)\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input onChange={handleChange} />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={[]}\n              filterFn={customFilterFn}\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n        <FormControl.Caption>\n          Items in dropdown are filtered if their text has no part that matches\n          the input value\n        </FormControl.Caption>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [filterVal, setFilterVal] = useState<string>('')\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setFilterVal(e.currentTarget.value)\n  }\n  const customFilterFn = (item: Datum) => item.text.includes(filterVal)\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input onChange={handleChange} />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={[]}\n              filterFn={customFilterFn}\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n        <FormControl.Caption>\n          Items in dropdown are filtered if their text has no part that matches\n          the input value\n        </FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--custom-sort-after-menu-close",
-          "code": "() => {\n  const [selectedItemIds, setSelectedItemIds] = useState<Array<string>>([])\n  const isItemSelected = (itemId: string) => selectedItemIds.includes(itemId)\n  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n    if (!Array.isArray(newlySelectedItems)) {\n      return\n    }\n    setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n  }\n  const customSortFn = (itemIdA: string, itemIdB: string) =>\n    isItemSelected(itemIdA) === isItemSelected(itemIdB)\n      ? 0\n      : isItemSelected(itemIdA)\n        ? 1\n        : -1\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={selectedItemIds}\n              onSelectedChange={onSelectedChange}\n              sortOnCloseFn={customSortFn}\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n        <FormControl.Caption>\n          When the dropdown closes, selected items are sorted to the end\n        </FormControl.Caption>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [selectedItemIds, setSelectedItemIds] = useState<Array<string>>([])\n  const isItemSelected = (itemId: string) => selectedItemIds.includes(itemId)\n  const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {\n    if (!Array.isArray(newlySelectedItems)) {\n      return\n    }\n    setSelectedItemIds(newlySelectedItems.map((item) => item.id))\n  }\n  const customSortFn = (itemIdA: string, itemIdB: string) =>\n    isItemSelected(itemIdA) === isItemSelected(itemIdB)\n      ? 0\n      : isItemSelected(itemIdA)\n        ? 1\n        : -1\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={selectedItemIds}\n              onSelectedChange={onSelectedChange}\n              sortOnCloseFn={customSortFn}\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n        <FormControl.Caption>\n          When the dropdown closes, selected items are sorted to the end\n        </FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes",
@@ -1003,23 +1013,23 @@
         },
         {
           "id": "components-autocomplete-features--async-loading-of-items",
-          "code": "(args: FormControlArgs<AutocompleteArgs>) => {\n  const { parentArgs, labelArgs, captionArgs, validationArgs } =\n    getFormControlArgsByChildComponent(args)\n  const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\n  const [loadedItems, setLoadedItems] = useState<Datum[]>([])\n  const onOpenChange = (isOpen: boolean) => {\n    if (isOpen) {\n      setTimeout(() => {\n        setLoadedItems(items)\n      }, 1500)\n    }\n  }\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl {...parentArgs}>\n        <FormControl.Label id=\"autocompleteLabel\" {...labelArgs} />\n        <Autocomplete>\n          <Autocomplete.Input\n            {...textInputArgs}\n            size={textInputArgs.inputSize}\n          />\n          <Autocomplete.Overlay {...overlayArgs}>\n            <Autocomplete.Menu\n              items={loadedItems}\n              selectedItemIds={[]}\n              onOpenChange={onOpenChange}\n              aria-labelledby=\"autocompleteLabel\"\n              {...menuArgs}\n              loading={loadedItems.length === 0}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n        {captionArgs.children && <FormControl.Caption {...captionArgs} />}\n        {validationArgs.children && validationArgs.variant && (\n          <FormControl.Validation\n            {...validationArgs}\n            variant={validationArgs.variant}\n          />\n        )}\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "(args: FormControlArgs<AutocompleteArgs>) => {\n  const { parentArgs, labelArgs, captionArgs, validationArgs } =\n    getFormControlArgsByChildComponent(args)\n  const { menuArgs, overlayArgs, textInputArgs } = getArgsByChildComponent(args)\n  const [loadedItems, setLoadedItems] = useState<Datum[]>([])\n  const onOpenChange = (isOpen: boolean) => {\n    if (isOpen) {\n      setTimeout(() => {\n        setLoadedItems(items)\n      }, 1500)\n    }\n  }\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl {...parentArgs}>\n        <FormControl.Label id=\"autocompleteLabel\" {...labelArgs} />\n        <Autocomplete>\n          <Autocomplete.Input\n            {...textInputArgs}\n            size={textInputArgs.inputSize}\n          />\n          <Autocomplete.Overlay {...overlayArgs}>\n            <Autocomplete.Menu\n              items={loadedItems}\n              selectedItemIds={[]}\n              onOpenChange={onOpenChange}\n              aria-labelledby=\"autocompleteLabel\"\n              {...menuArgs}\n              loading={loadedItems.length === 0}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n        {captionArgs.children && <FormControl.Caption {...captionArgs} />}\n        {validationArgs.children && validationArgs.variant && (\n          <FormControl.Validation\n            {...validationArgs}\n            variant={validationArgs.variant}\n          />\n        )}\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--rendering-the-menu-outside-an-overlay",
-          "code": "() => {\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Menu\n            items={items}\n            selectedItemIds={[]}\n            aria-labelledby=\"autocompleteLabel\"\n          />\n        </Autocomplete>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Menu\n            items={items}\n            selectedItemIds={[]}\n            aria-labelledby=\"autocompleteLabel\"\n          />\n        </Autocomplete>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--custom-overlay-menu-anchor",
-          "code": "() => {\n  const menuAnchorRef = useRef<HTMLElement>(null)\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      <FormControl>\n        <FormControl.Label htmlFor=\"autocompleteInput\" id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Box\n          ref={menuAnchorRef as React.RefObject<HTMLDivElement>}\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexGrow: 1,\n            flexShrink: 0,\n            flexBasis: '25%',\n            borderColor: 'var(--control-borderColor-rest)',\n            borderStyle: 'solid',\n            borderWidth: '1',\n            padding: '1em',\n          }}\n        >\n          <Autocomplete>\n            <Autocomplete.Input\n              id=\"autocompleteInput\"\n              aria-describedby=\"autocompleteCaption autocompleteValidation\"\n              sx={{\n                padding: '0',\n                boxShadow: 'none',\n                ':focus-within': {\n                  boxShadow: 'none',\n                },\n              }}\n            />\n            <Autocomplete.Overlay menuAnchorRef={menuAnchorRef}>\n              <Autocomplete.Menu\n                items={items}\n                selectedItemIds={[]}\n                aria-labelledby=\"autocompleteLabel\"\n              />\n            </Autocomplete.Overlay>\n          </Autocomplete>\n        </Box>\n        <FormControl.Caption>\n          The overlay menu position is anchored to the div with the black border\n          instead of to the text input\n        </FormControl.Caption>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const menuAnchorRef = useRef<HTMLElement>(null)\n  return (\n    <form className={classes.FormPadding}>\n      <FormControl>\n        <FormControl.Label htmlFor=\"autocompleteInput\" id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <div\n          ref={menuAnchorRef as React.RefObject<HTMLDivElement>}\n          className={classes.AnchorContainer}\n        >\n          <Autocomplete>\n            <Autocomplete.Input\n              id=\"autocompleteInput\"\n              aria-describedby=\"autocompleteCaption autocompleteValidation\"\n              className={classes.AnchorInput}\n            />\n            <Autocomplete.Overlay menuAnchorRef={menuAnchorRef}>\n              <Autocomplete.Menu\n                items={items}\n                selectedItemIds={[]}\n                aria-labelledby=\"autocompleteLabel\"\n              />\n            </Autocomplete.Overlay>\n          </Autocomplete>\n        </div>\n        <FormControl.Caption>\n          The overlay menu position is anchored to the div with the black border\n          instead of to the text input\n        </FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--in-overlay-with-custom-scroll-container-ref",
-          "code": "() => {\n  const scrollContainerRef = useRef<HTMLElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const [selectedItem, setSelectedItem] = useState<Datum>()\n  const handleOpen = () => {\n    setIsOpen(true)\n    inputRef.current && inputRef.current.focus()\n  }\n  const selectChange = (item: Datum[] | Datum) => {\n    setIsOpen(false)\n    if (Array.isArray(item) && item.length) setSelectedItem(item[0])\n    triggerRef.current?.focus()\n  }\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n    >\n      Selected item: {selectedItem ? selectedItem.text : 'none'}\n      <AnchoredOverlay\n        open={isOpen}\n        onOpen={handleOpen}\n        onClose={() => setIsOpen(false)}\n        width=\"large\"\n        focusTrapSettings={{\n          initialFocusRef: inputRef,\n        }}\n        side=\"inside-top\"\n        anchorRef={triggerRef}\n        renderAnchor={(props) => <Button {...props}>open overlay</Button>}\n        preventOverflow={false}\n      >\n        <Autocomplete>\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              height: '100%',\n            }}\n          >\n            <Box\n              sx={{\n                borderWidth: 0,\n                borderBottomWidth: 1,\n                borderColor: 'var(--borderColor-default)',\n                borderStyle: 'solid',\n              }}\n            >\n              <Autocomplete.Input\n                ref={inputRef}\n                sx={{\n                  display: 'flex',\n                  border: '0',\n                  paddingX: 3,\n                  paddingY: 1,\n                  boxShadow: 'none',\n                  ':focus-within': {\n                    border: '0',\n                    boxShadow: 'none',\n                  },\n                }}\n                block\n                aria-label=\"Search\"\n              />\n            </Box>\n            <Box\n              ref={scrollContainerRef as RefObject<HTMLDivElement>}\n              sx={{\n                overflow: 'auto',\n                flexGrow: 1,\n              }}\n            >\n              <Autocomplete.Menu\n                items={items}\n                selectedItemIds={[]}\n                customScrollContainerRef={scrollContainerRef}\n                aria-labelledby=\"autocompleteLabel\"\n                onSelectedChange={selectChange}\n              />\n            </Box>\n          </Box>\n        </Autocomplete>\n      </AnchoredOverlay>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const scrollContainerRef = useRef<HTMLElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const [selectedItem, setSelectedItem] = useState<Datum>()\n  const handleOpen = () => {\n    setIsOpen(true)\n    inputRef.current && inputRef.current.focus()\n  }\n  const selectChange = (item: Datum[] | Datum) => {\n    setIsOpen(false)\n    if (Array.isArray(item) && item.length) setSelectedItem(item[0])\n    triggerRef.current?.focus()\n  }\n  return (\n    <form className={classes.FormPadding}>\n      Selected item: {selectedItem ? selectedItem.text : 'none'}\n      <AnchoredOverlay\n        open={isOpen}\n        onOpen={handleOpen}\n        onClose={() => setIsOpen(false)}\n        width=\"large\"\n        focusTrapSettings={{\n          initialFocusRef: inputRef,\n        }}\n        side=\"inside-top\"\n        anchorRef={triggerRef}\n        renderAnchor={(props) => <Button {...props}>open overlay</Button>}\n        preventOverflow={false}\n      >\n        <Autocomplete>\n          <div className={classes.OverlayFlexCol}>\n            <div className={classes.OverlayInputBar}>\n              <Autocomplete.Input\n                ref={inputRef}\n                className={classes.OverlayInput}\n                block\n                aria-label=\"Search\"\n              />\n            </div>\n            <div\n              ref={scrollContainerRef as RefObject<HTMLDivElement>}\n              className={classes.OverlayScroll}\n            >\n              <Autocomplete.Menu\n                items={items}\n                selectedItemIds={[]}\n                customScrollContainerRef={scrollContainerRef}\n                aria-labelledby=\"autocompleteLabel\"\n                onSelectedChange={selectChange}\n              />\n            </div>\n          </div>\n        </Autocomplete>\n      </AnchoredOverlay>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--in-a-dialog",
-          "code": "() => {\n  const outerContainerRef = useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = useState(false)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current, 'outerContainer')\n      setMounted(true)\n    }\n  }, [isDialogOpen])\n  return (\n    <>\n      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n      <Dialog\n        aria-label=\"Dialog with autocomplete\"\n        id=\"dialog-with-autocomplete\"\n        isOpen={isDialogOpen}\n        onDismiss={() => setIsDialogOpen(false)}\n      >\n        <div ref={outerContainerRef}>\n          <Box\n            as=\"form\"\n            sx={{\n              p: 3,\n            }}\n          >\n            {mounted ? (\n              <FormControl>\n                <FormControl.Label id=\"autocompleteLabel\">\n                  Default label\n                </FormControl.Label>\n                <Autocomplete>\n                  <Autocomplete.Input data-testid=\"autocompleteInput\" />\n                  <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n                    <Autocomplete.Menu\n                      items={items}\n                      selectedItemIds={[]}\n                      aria-labelledby=\"autocompleteLabel\"\n                    />\n                  </Autocomplete.Overlay>\n                </Autocomplete>\n              </FormControl>\n            ) : null}\n          </Box>\n        </div>\n      </Dialog>\n      <p>\n        The Autocomplete.Overlay is portalled to a div inside the Dialog to\n        ensure it appears above the dialog in the stacking context.\n      </p>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = useState(false)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current, 'outerContainer')\n      setMounted(true)\n    }\n  }, [isDialogOpen])\n  return (\n    <>\n      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n      <Dialog\n        aria-label=\"Dialog with autocomplete\"\n        id=\"dialog-with-autocomplete\"\n        isOpen={isDialogOpen}\n        onDismiss={() => setIsDialogOpen(false)}\n      >\n        <div ref={outerContainerRef}>\n          <form className={classes.FormPadding}>\n            {mounted ? (\n              <FormControl>\n                <FormControl.Label id=\"autocompleteLabel\">\n                  Default label\n                </FormControl.Label>\n                <Autocomplete>\n                  <Autocomplete.Input data-testid=\"autocompleteInput\" />\n                  <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n                    <Autocomplete.Menu\n                      items={items}\n                      selectedItemIds={[]}\n                      aria-labelledby=\"autocompleteLabel\"\n                    />\n                  </Autocomplete.Overlay>\n                </Autocomplete>\n              </FormControl>\n            ) : null}\n          </form>\n        </div>\n      </Dialog>\n      <p>\n        The Autocomplete.Overlay is portalled to a div inside the Dialog to\n        ensure it appears above the dialog in the stacking context.\n      </p>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -1154,7 +1164,7 @@
       "id": "avatar",
       "name": "Avatar",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-avatar--default",
@@ -1164,10 +1174,6 @@
           "id": "components-avatar-features--square",
           "code": "() => (\n  <Avatar\n    square\n    alt=\"primer\"\n    src=\"https://avatars.githubusercontent.com/primer\"\n  />\n)"
         },
-        {
-          "id": "components-avatar-features--square-sx-prop",
-          "code": "() => (\n  <Avatar\n    square\n    sx={{\n      border: '1px solid red',\n    }}\n    size={40}\n    alt=\"primer\"\n    src=\"https://avatars.githubusercontent.com/primer\"\n  />\n)"
-        },
         {
           "id": "components-avatar-features--size",
           "code": "() => (\n  <div>\n    <Avatar\n      size={4}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={8}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={12}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={16}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={20}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={24}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={28}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={32}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={40}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={48}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={56}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n    <Avatar\n      size={64}\n      alt=\"mona\"\n      src=\"https://avatars.githubusercontent.com/u/7143434?v=4\"\n    />\n  </div>\n)"
@@ -1212,48 +1218,12 @@
       ],
       "subcomponents": []
     },
-    "avatar_pair": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/AvatarPair",
-      "id": "avatar_pair",
-      "name": "AvatarPair",
-      "status": "alpha",
-      "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-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)"
-        },
-        {
-          "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": "children",
-          "type": "Avatar[]",
-          "defaultValue": "",
-          "description": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": []
-    },
     "avatar_stack": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/AvatarStack",
       "id": "avatar_stack",
       "name": "AvatarStack",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-avatarstack-features--align-left",
@@ -1319,11 +1289,6 @@
           "type": "string",
           "description": "Class name for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1333,68 +1298,68 @@
       "id": "banner",
       "name": "Banner",
       "status": "alpha",
-      "a11yReviewed": true,
-      "importPath": "@primer/react/experimental",
+      "a11yReviewed": "2025-01-08",
+      "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": [
@@ -1446,7 +1411,12 @@
         {
           "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."
         }
       ],
       "subcomponents": [
@@ -1493,7 +1463,7 @@
       "id": "blankslate",
       "name": "Blankslate",
       "status": "draft",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "experimental-components-blankslate--default",
@@ -1604,7 +1574,7 @@
       "id": "box",
       "name": "Box",
       "status": "deprecated",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "deprecated-components-box--default",
@@ -1651,7 +1621,7 @@
       "id": "branch_name",
       "name": "BranchName",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-branchname--default",
@@ -1676,11 +1646,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"a\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1690,7 +1655,7 @@
       "id": "breadcrumbs",
       "name": "Breadcrumbs",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-breadcrumbs--default",
@@ -1703,19 +1668,27 @@
           "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": "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'"
         },
         {
           "name": "sx",
           "type": "SystemStyleObject",
-          "deprecated": true
+          "deprecated": true,
+          "description": "System styles (deprecated, use CSS classes instead)"
         }
       ],
       "subcomponents": [
@@ -1726,7 +1699,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",
@@ -1735,6 +1708,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>"
@@ -1762,7 +1747,7 @@
       "id": "button",
       "name": "Button",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-button--default",
@@ -1862,7 +1847,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",
@@ -1881,6 +1866,11 @@
           "type": "React.ElementType",
           "defaultValue": "'button'"
         },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "**May only be used when `as` is set to 'a'**.\n The URL the button links to. If `as` is set to 'a', this prop is required."
+        },
         {
           "name": "block",
           "type": "boolean",
@@ -1982,7 +1972,7 @@
       "id": "icon_button",
       "name": "IconButton",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-iconbutton--default",
@@ -2058,6 +2048,16 @@
           "required": true,
           "description": "This will be the Button description."
         },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "'button'"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "**May only be used when `as` is set to 'a'**.\n The URL the button links to. If `as` is set to 'a', this prop is required."
+        },
         {
           "name": "variant",
           "type": "'default' | 'primary' | 'danger' | 'invisible' | 'link'",
@@ -2126,7 +2126,7 @@
       "id": "button_group",
       "name": "ButtonGroup",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-buttongroup--default",
@@ -2151,11 +2151,6 @@
       ],
       "importPath": "@primer/react",
       "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -2168,27 +2163,27 @@
       "id": "checkbox",
       "name": "Checkbox",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-checkbox--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <Checkbox value=\"default\" />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <Checkbox value=\"default\" />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </form>\n)"
         },
         {
           "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",
@@ -2243,11 +2238,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -2257,7 +2247,7 @@
       "id": "checkbox_group",
       "name": "CheckboxGroup",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-checkboxgroup--default",
@@ -2269,7 +2259,7 @@
         },
         {
           "id": "components-checkboxgroup-features--with-external-label",
-          "code": "() => (\n  <>\n    <Box\n      id=\"choiceHeading\"\n      borderBottomWidth=\"1px\"\n      borderBottomStyle=\"solid\"\n      borderBottomColor=\"border.default\"\n      pb={2}\n      mb={3}\n      fontSize={3}\n    >\n      External label\n    </Box>\n    <CheckboxGroup aria-labelledby=\"choiceHeading\">\n      <FormControl>\n        <Checkbox />\n        <FormControl.Label>Choice one</FormControl.Label>\n      </FormControl>\n      <FormControl>\n        <Checkbox />\n        <FormControl.Label>Choice two</FormControl.Label>\n      </FormControl>\n      <FormControl>\n        <Checkbox />\n        <FormControl.Label>Choice three</FormControl.Label>\n      </FormControl>\n    </CheckboxGroup>\n  </>\n)"
+          "code": "() => (\n  <>\n    <div id=\"choiceHeading\" className={classes.ExternalLabel}>\n      External label\n    </div>\n    <CheckboxGroup aria-labelledby=\"choiceHeading\">\n      <FormControl>\n        <Checkbox />\n        <FormControl.Label>Choice one</FormControl.Label>\n      </FormControl>\n      <FormControl>\n        <Checkbox />\n        <FormControl.Label>Choice two</FormControl.Label>\n      </FormControl>\n      <FormControl>\n        <Checkbox />\n        <FormControl.Label>Choice three</FormControl.Label>\n      </FormControl>\n    </CheckboxGroup>\n  </>\n)"
         },
         {
           "id": "components-checkboxgroup-features--error",
@@ -2322,11 +2312,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": [
@@ -2338,11 +2323,6 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, the fieldset legend will be visually hidden"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -2354,11 +2334,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The caption content"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -2377,11 +2352,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Changes the visual style to match the validation status"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -2391,11 +2361,11 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleBadge",
       "id": "circle_badge",
       "name": "CircleBadge",
-      "status": "alpha",
-      "a11yReviewed": false,
+      "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)"
         }
       ],
@@ -2451,45 +2421,13 @@
         }
       ]
     },
-    "circle_octicon": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
-      "id": "circle_octicon",
-      "name": "CircleOcticon",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "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",
       "docsId": "confirmationdialog",
       "name": "ConfirmationDialog",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "importPath": "@primer/react",
       "stories": [
         {
@@ -2498,11 +2436,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    <Box display=\"flex\" flexDirection=\"column\" alignItems=\"flex-start\">\n      <Button\n        onClick={onButtonClick}\n        sx={{\n          mb: 2,\n        }}\n      >\n        Turn me green!\n      </Button>\n      <Button\n        onClick={onButtonClick}\n        sx={{\n          mb: 2,\n        }}\n      >\n        Turn me green!\n      </Button>\n      <Button\n        onClick={onButtonClick}\n        sx={{\n          mb: 2,\n        }}\n      >\n        Turn me green!\n      </Button>\n      <Button\n        onClick={onButtonClick}\n        sx={{\n          mb: 2,\n        }}\n      >\n        Turn me green!\n      </Button>\n    </Box>\n  )\n}"
+          "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}"
         },
         {
           "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    <Box display=\"flex\" flexDirection=\"column\" alignItems=\"flex-start\">\n      <ActionMenu>\n        <ActionMenu.Button>{text}</ActionMenu.Button>\n\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    </Box>\n  )\n}"
+          "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": [
@@ -2536,6 +2478,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",
@@ -2559,7 +2506,7 @@
       "id": "counter_label",
       "name": "CounterLabel",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-counterlabel--default",
@@ -2587,11 +2534,6 @@
           "type": "string",
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "BetterSystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -2601,7 +2543,7 @@
       "id": "data_table",
       "name": "DataTable",
       "status": "alpha",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "experimental-components-datatable--default",
@@ -3042,7 +2984,7 @@
       "id": "details",
       "name": "Details",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-details--default",
@@ -3050,13 +2992,7 @@
         }
       ],
       "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
+      "props": [],
       "subcomponents": [
         {
           "name": "Details.Summary",
@@ -3071,11 +3007,6 @@
             {
               "name": "children",
               "type": "React.ReactNode"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -3087,7 +3018,7 @@
       "docsId": "dialog",
       "name": "Dialog",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-dialog--default",
@@ -3103,7 +3034,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",
@@ -3127,7 +3058,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",
@@ -3283,7 +3214,7 @@
       "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}"
+          "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",
@@ -3368,7 +3299,7 @@
       "id": "flash",
       "name": "Flash",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-flash--default",
@@ -3376,27 +3307,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",
@@ -3421,11 +3352,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -3435,7 +3361,7 @@
       "id": "form_control",
       "name": "FormControl",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-formcontrol--default",
@@ -3443,15 +3369,15 @@
         },
         {
           "id": "components-formcontrol-features--with-complex-inputs",
-          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens])\n  const onTokenRemove = (tokenId: string | number) => {\n    setTokens(\n      tokens.filter((token: { id: string | number }) => token.id !== tokenId),\n    )\n  }\n  return (\n    <Box display=\"grid\">\n      <FormControl>\n        <FormControl.Label id=\"form-label\">\n          TextInputWithTokens\n        </FormControl.Label>\n        <TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label id=\"autocomplete-label\">\n          Autocomplete\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input block />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              aria-labelledby=\"autocomplete-label\"\n              items={[\n                {\n                  text: 'css',\n                  id: '0',\n                },\n                {\n                  text: 'css-in-js',\n                  id: '1',\n                },\n                {\n                  text: 'styled-system',\n                  id: '2',\n                },\n                {\n                  text: 'javascript',\n                  id: '3',\n                },\n                {\n                  text: 'typescript',\n                  id: '4',\n                },\n                {\n                  text: 'react',\n                  id: '5',\n                },\n                {\n                  text: 'design-systems',\n                  id: '6',\n                },\n              ]}\n              selectedItemIds={[]}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Select</FormControl.Label>\n        <Select>\n          <Select.Option value=\"figma\">Figma</Select.Option>\n          <Select.Option value=\"css\">Primer CSS</Select.Option>\n          <Select.Option value=\"prc\">Primer React components</Select.Option>\n          <Select.Option value=\"pvc\">Primer ViewComponents</Select.Option>\n        </Select>\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Textarea</FormControl.Label>\n        <Textarea />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens])\n  const onTokenRemove = (tokenId: string | number) => {\n    setTokens(\n      tokens.filter((token: { id: string | number }) => token.id !== tokenId),\n    )\n  }\n  return (\n    <div className={classes.GridContainer}>\n      <FormControl>\n        <FormControl.Label id=\"form-label\">\n          TextInputWithTokens\n        </FormControl.Label>\n        <TextInputWithTokens onTokenRemove={onTokenRemove} tokens={tokens} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label id=\"autocomplete-label\">\n          Autocomplete\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input block />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              aria-labelledby=\"autocomplete-label\"\n              items={[\n                {\n                  text: 'css',\n                  id: '0',\n                },\n                {\n                  text: 'css-in-js',\n                  id: '1',\n                },\n                {\n                  text: 'styled-system',\n                  id: '2',\n                },\n                {\n                  text: 'javascript',\n                  id: '3',\n                },\n                {\n                  text: 'typescript',\n                  id: '4',\n                },\n                {\n                  text: 'react',\n                  id: '5',\n                },\n                {\n                  text: 'design-systems',\n                  id: '6',\n                },\n              ]}\n              selectedItemIds={[]}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Select</FormControl.Label>\n        <Select>\n          <Select.Option value=\"figma\">Figma</Select.Option>\n          <Select.Option value=\"css\">Primer CSS</Select.Option>\n          <Select.Option value=\"prc\">Primer React components</Select.Option>\n          <Select.Option value=\"pvc\">Primer ViewComponents</Select.Option>\n        </Select>\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Textarea</FormControl.Label>\n        <Textarea />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--form-control-with-custom-input",
-          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      setValidationResult('noSpaces')\n    } else if (value) {\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <Box display=\"grid\">\n      <FormControl>\n        <FormControl.Label htmlFor=\"custom-input\">\n          GitHub handle\n        </FormControl.Label>\n        <CustomTextInput\n          id=\"custom-input\"\n          aria-describedby=\"custom-input-caption custom-input-validation\"\n          aria-invalid={validationResult === 'noSpaces'}\n          onChange={handleInputChange}\n        />\n        {validationResult === 'noSpaces' && (\n          <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n            GitHub handles cannot contain spaces\n          </FormControl.Validation>\n        )}\n        {validationResult === 'validName' && (\n          <FormControl.Validation\n            id=\"custom-input-validation\"\n            variant=\"success\"\n          >\n            Valid name\n          </FormControl.Validation>\n        )}\n        <FormControl.Caption id=\"custom-input-caption\">\n          With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n          &quot;@monalisa&quot;\n        </FormControl.Caption>\n      </FormControl>\n\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-one\"\n            aria-describedby=\"custom-checkbox-one-caption\"\n            value=\"checkOne\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-one\">\n            Checkbox one\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-one-caption\">\n            Hint text for checkbox one\n          </FormControl.Caption>\n        </FormControl>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-two\"\n            aria-describedby=\"custom-checkbox-two-caption\"\n            value=\"checkTwo\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-two\">\n            Checkbox two\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-two-caption\">\n            Hint text for checkbox two\n          </FormControl.Caption>\n        </FormControl>\n      </CheckboxGroup>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      setValidationResult('noSpaces')\n    } else if (value) {\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <div className={classes.GridContainer}>\n      <FormControl>\n        <FormControl.Label htmlFor=\"custom-input\">\n          GitHub handle\n        </FormControl.Label>\n        <CustomTextInput\n          id=\"custom-input\"\n          aria-describedby=\"custom-input-caption custom-input-validation\"\n          aria-invalid={validationResult === 'noSpaces'}\n          onChange={handleInputChange}\n        />\n        {validationResult === 'noSpaces' && (\n          <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n            GitHub handles cannot contain spaces\n          </FormControl.Validation>\n        )}\n        {validationResult === 'validName' && (\n          <FormControl.Validation\n            id=\"custom-input-validation\"\n            variant=\"success\"\n          >\n            Valid name\n          </FormControl.Validation>\n        )}\n        <FormControl.Caption id=\"custom-input-caption\">\n          With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n          &quot;@monalisa&quot;\n        </FormControl.Caption>\n      </FormControl>\n\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-one\"\n            aria-describedby=\"custom-checkbox-one-caption\"\n            value=\"checkOne\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-one\">\n            Checkbox one\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-one-caption\">\n            Hint text for checkbox one\n          </FormControl.Caption>\n        </FormControl>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-two\"\n            aria-describedby=\"custom-checkbox-two-caption\"\n            value=\"checkTwo\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-two\">\n            Checkbox two\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-two-caption\">\n            Hint text for checkbox two\n          </FormControl.Caption>\n        </FormControl>\n      </CheckboxGroup>\n    </div>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--with-checkbox-and-radio-inputs",
-          "code": "() => {\n  return (\n    <Box\n      display=\"grid\"\n      sx={{\n        gap: 3,\n      }}\n    >\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl>\n          <Checkbox value=\"checkOne\" />\n          <FormControl.Label>Checkbox one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Checkbox value=\"checkTwo\" />\n          <FormControl.Label>Checkbox two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Checkbox value=\"checkThree\" />\n          <FormControl.Label>Checkbox three</FormControl.Label>\n        </FormControl>\n      </CheckboxGroup>\n\n      <RadioGroup name={''}>\n        <RadioGroup.Label>Radios</RadioGroup.Label>\n        <FormControl>\n          <Radio name=\"radioChoices\" value=\"radioOne\" />\n          <FormControl.Label>Radio one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio name=\"radioChoices\" value=\"radioTwo\" />\n          <FormControl.Label>Radio two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio name=\"radioChoices\" value=\"radioThree\" />\n          <FormControl.Label>Radio three</FormControl.Label>\n        </FormControl>\n      </RadioGroup>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.GapContainer}>\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl>\n          <Checkbox value=\"checkOne\" />\n          <FormControl.Label>Checkbox one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Checkbox value=\"checkTwo\" />\n          <FormControl.Label>Checkbox two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Checkbox value=\"checkThree\" />\n          <FormControl.Label>Checkbox three</FormControl.Label>\n        </FormControl>\n      </CheckboxGroup>\n\n      <RadioGroup name={''}>\n        <RadioGroup.Label>Radios</RadioGroup.Label>\n        <FormControl>\n          <Radio name=\"radioChoices\" value=\"radioOne\" />\n          <FormControl.Label>Radio one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio name=\"radioChoices\" value=\"radioTwo\" />\n          <FormControl.Label>Radio two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio name=\"radioChoices\" value=\"radioThree\" />\n          <FormControl.Label>Radio three</FormControl.Label>\n        </FormControl>\n      </RadioGroup>\n    </div>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--single-input",
@@ -3471,11 +3397,11 @@
         },
         {
           "id": "components-formcontrol-features--disabled-inputs",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1rem',\n    }}\n  >\n    <FormControl disabled>\n      <FormControl.Label>Disabled checkbox</FormControl.Label>\n      <Checkbox />\n    </FormControl>\n    <FormControl disabled>\n      <FormControl.Label>Disabled input</FormControl.Label>\n      <TextInput />\n    </FormControl>\n    <FormControl disabled>\n      <FormControl.Label>Disabled select</FormControl.Label>\n      <Select>\n        <Select.Option value=\"figma\">Figma</Select.Option>\n        <Select.Option value=\"css\">Primer CSS</Select.Option>\n        <Select.Option value=\"prc\">Primer React components</Select.Option>\n        <Select.Option value=\"pvc\">Primer ViewComponents</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.FlexColumnGapContainer}>\n    <FormControl disabled>\n      <FormControl.Label>Disabled checkbox</FormControl.Label>\n      <Checkbox />\n    </FormControl>\n    <FormControl disabled>\n      <FormControl.Label>Disabled input</FormControl.Label>\n      <TextInput />\n    </FormControl>\n    <FormControl disabled>\n      <FormControl.Label>Disabled select</FormControl.Label>\n      <Select>\n        <Select.Option value=\"figma\">Figma</Select.Option>\n        <Select.Option value=\"css\">Primer CSS</Select.Option>\n        <Select.Option value=\"prc\">Primer React components</Select.Option>\n        <Select.Option value=\"pvc\">Primer ViewComponents</Select.Option>\n      </Select>\n    </FormControl>\n  </div>\n)"
         },
         {
           "id": "components-formcontrol-features--custom-required",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '1rem',\n    }}\n  >\n    <FormControl required={true}>\n      <FormControl.Label requiredText=\"(required)\">\n        Form Input Label\n      </FormControl.Label>\n      <FormControl.Caption>\n        This is a form field with a custom required indicator\n      </FormControl.Caption>\n      <TextInput />\n    </FormControl>\n\n    <Text\n      sx={{\n        fontSize: 1,\n      }}\n    >\n      Required fields are marked with an asterisk (*)\n    </Text>\n    <FormControl required={true}>\n      <FormControl.Label requiredIndicator={false}>\n        Form Input Label\n      </FormControl.Label>\n      <FormControl.Caption>\n        This is a form field with a required indicator that is hidden in the\n        accessibility tree\n      </FormControl.Caption>\n      <TextInput />\n    </FormControl>\n\n    <FormControl required={false}>\n      <FormControl.Label requiredText=\"(optional)\" requiredIndicator={false}>\n        Form Input Label\n      </FormControl.Label>\n      <FormControl.Caption>\n        This is a form field that is marked as optional, it is not required\n      </FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.FlexColumnGapContainer}>\n    <FormControl required={true}>\n      <FormControl.Label requiredText=\"(required)\">\n        Form Input Label\n      </FormControl.Label>\n      <FormControl.Caption>\n        This is a form field with a custom required indicator\n      </FormControl.Caption>\n      <TextInput />\n    </FormControl>\n\n    <Text className={classes.RequiredFieldsNote}>\n      Required fields are marked with an asterisk (*)\n    </Text>\n    <FormControl required={true}>\n      <FormControl.Label requiredIndicator={false}>\n        Form Input Label\n      </FormControl.Label>\n      <FormControl.Caption>\n        This is a form field with a required indicator that is hidden in the\n        accessibility tree\n      </FormControl.Caption>\n      <TextInput />\n    </FormControl>\n\n    <FormControl required={false}>\n      <FormControl.Label requiredText=\"(optional)\" requiredIndicator={false}>\n        Form Input Label\n      </FormControl.Label>\n      <FormControl.Caption>\n        This is a form field that is marked as optional, it is not required\n      </FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </div>\n)"
         },
         {
           "id": "components-formcontrol-features--with-caption",
@@ -3683,15 +3609,15 @@
       "id": "header",
       "name": "Header",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
@@ -3699,17 +3625,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",
@@ -3719,11 +3639,6 @@
               "type": "string",
               "defaultValue": "",
               "description": "Stretches item to fill the available space"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3740,11 +3655,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -3759,7 +3669,7 @@
       "id": "heading",
       "name": "Heading",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-heading--default",
@@ -3805,7 +3715,7 @@
       "id": "hidden",
       "name": "Hidden",
       "status": "draft",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "experimental-components-hidden--default",
@@ -3813,11 +3723,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",
@@ -3836,7 +3746,7 @@
       "id": "inline_message",
       "name": "InlineMessage",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "importPath": "@primer/react/experimental",
       "stories": [
         {
@@ -3885,15 +3795,15 @@
       "id": "KeybindingHint",
       "name": "KeybindingHint",
       "status": "draft",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
@@ -3929,7 +3839,7 @@
       "id": "label",
       "name": "Label",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-label--default",
@@ -4002,7 +3912,7 @@
       "id": "label_group",
       "name": "LabelGroup",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-labelgroup--default",
@@ -4057,7 +3967,7 @@
       "id": "link",
       "name": "Link",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-link--default",
@@ -4131,7 +4041,7 @@
       "id": "nav_list",
       "name": "NavList",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [],
       "importPath": "@primer/react",
       "props": [
@@ -4451,19 +4361,19 @@
       "id": "overlay",
       "name": "Overlay",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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        sx={{\n          mt: 2,\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonLeft}\n                />\n                <Text>Look! left aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonRight}\n                />\n                <Text>Look! right aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        )\n      ) : null}\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -4516,7 +4426,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`."
         },
         {
@@ -4576,7 +4486,7 @@
           "type": "'hidden' | 'scroll' | 'auto' | 'visible'",
           "required": false,
           "description": "",
-          "defaultValue": ""
+          "defaultValue": "hidden"
         },
         {
           "name": "preventOverflow",
@@ -4618,55 +4528,55 @@
       "id": "page_header",
       "name": "PageHeader",
       "status": "beta",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-pageheader-features--has-title-only",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--has-large-title",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea variant=\"large\">\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea variant=\"large\">\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-leading-and-trailing-visuals",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.LeadingVisual>\n          <GitPullRequestIcon />\n        </PageHeader.LeadingVisual>\n        <PageHeader.Title>Title</PageHeader.Title>\n        <PageHeader.TrailingVisual>\n          <Label>Beta</Label>\n        </PageHeader.TrailingVisual>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.LeadingVisual>\n          <GitPullRequestIcon />\n        </PageHeader.LeadingVisual>\n        <PageHeader.Title>Title</PageHeader.Title>\n        <PageHeader.TrailingVisual>\n          <Label>Beta</Label>\n        </PageHeader.TrailingVisual>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-leading-visual-hidden-on-regular-viewport",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.LeadingVisual\n          hidden={{\n            regular: true,\n          }}\n        >\n          <GitPullRequestIcon />\n        </PageHeader.LeadingVisual>\n        <PageHeader.Title>Title</PageHeader.Title>\n        <PageHeader.TrailingVisual>\n          <Label>Beta</Label>\n        </PageHeader.TrailingVisual>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.LeadingVisual\n          hidden={{\n            regular: true,\n          }}\n        >\n          <GitPullRequestIcon />\n        </PageHeader.LeadingVisual>\n        <PageHeader.Title>Title</PageHeader.Title>\n        <PageHeader.TrailingVisual>\n          <Label>Beta</Label>\n        </PageHeader.TrailingVisual>\n      </PageHeader.TitleArea>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-actions",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Actions>\n        <IconButton aria-label=\"Workflows\" icon={WorkflowIcon} />\n        <IconButton aria-label=\"Insights\" icon={GraphIcon} />\n        <Button variant=\"primary\" trailingVisual={TriangleDownIcon}>\n          Add Item\n        </Button>\n        <IconButton aria-label=\"Settings\" icon={GearIcon} />\n      </PageHeader.Actions>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Actions>\n        <IconButton aria-label=\"Workflows\" icon={WorkflowIcon} />\n        <IconButton aria-label=\"Insights\" icon={GraphIcon} />\n        <Button variant=\"primary\" trailingVisual={TriangleDownIcon}>\n          Add Item\n        </Button>\n        <IconButton aria-label=\"Settings\" icon={GearIcon} />\n      </PageHeader.Actions>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-description-slot",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Add-pageheader-docs\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>add-pageheader-docs</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Description>\n        <Text\n          sx={{\n            fontSize: 1,\n            color: 'fg.muted',\n          }}\n        >\n          <Link\n            href=\"https://github.com/broccolinisoup\"\n            sx={{\n              fontWeight: 'bold',\n            }}\n          >\n            broccolinisoup\n          </Link>{' '}\n          created this branch 5 days ago · 14 commits · updated today\n        </Text>\n      </PageHeader.Description>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Add-pageheader-docs\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>add-pageheader-docs</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Description>\n        <Text className={classes.DescriptionText}>\n          <Link\n            href=\"https://github.com/broccolinisoup\"\n            className={classes.BoldLink}\n          >\n            broccolinisoup\n          </Link>{' '}\n          created this branch 5 days ago · 14 commits · updated today\n        </Text>\n      </PageHeader.Description>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-navigation-slot",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Pull request title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Pull request title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Navigation>\n        <UnderlineNav aria-label=\"Pull Request\">\n          <UnderlineNav.Item\n            icon={CommentDiscussionIcon}\n            counter=\"12\"\n            aria-current=\"page\"\n          >\n            Conversation\n          </UnderlineNav.Item>\n          <UnderlineNav.Item counter={3} icon={GitCommitIcon}>\n            Commits\n          </UnderlineNav.Item>\n          <UnderlineNav.Item counter={7} icon={ChecklistIcon}>\n            Checks\n          </UnderlineNav.Item>\n          <UnderlineNav.Item counter={4} icon={FileDiffIcon}>\n            Files Changes\n          </UnderlineNav.Item>\n        </UnderlineNav>\n      </PageHeader.Navigation>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Pull request title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Pull request title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Navigation>\n        <UnderlineNav aria-label=\"Pull Request\">\n          <UnderlineNav.Item\n            icon={CommentDiscussionIcon}\n            counter=\"12\"\n            aria-current=\"page\"\n          >\n            Conversation\n          </UnderlineNav.Item>\n          <UnderlineNav.Item counter={3} icon={GitCommitIcon}>\n            Commits\n          </UnderlineNav.Item>\n          <UnderlineNav.Item counter={7} icon={ChecklistIcon}>\n            Checks\n          </UnderlineNav.Item>\n          <UnderlineNav.Item counter={4} icon={FileDiffIcon}>\n            Files Changes\n          </UnderlineNav.Item>\n        </UnderlineNav>\n      </PageHeader.Navigation>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-custom-navigation",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Pull request title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Pull request title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Navigation as=\"nav\" aria-label=\"Item list\">\n        <Box\n          as=\"ul\"\n          sx={{\n            display: 'flex',\n            gap: '8px',\n            listStyle: 'none',\n            paddingY: 0,\n            paddingX: 3,\n          }}\n          role=\"list\"\n        >\n          <li>\n            <Link href=\"https://github.com/primer/react\" aria-current=\"page\">\n              Item 1\n            </Link>\n          </li>\n          <li>\n            <Link href=\"https://github.com/primer/react/pulls\">Item 2</Link>\n          </li>\n        </Box>\n      </PageHeader.Navigation>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Pull request title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Pull request title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Navigation as=\"nav\" aria-label=\"Item list\">\n        <ul className={classes.CustomNavigationList}>\n          <li>\n            <Link href=\"https://github.com/primer/react\" aria-current=\"page\">\n              Item 1\n            </Link>\n          </li>\n          <li>\n            <Link href=\"https://github.com/primer/react/pulls\">Item 2</Link>\n          </li>\n        </ul>\n      </PageHeader.Navigation>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-leading-and-trailing-actions",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.LeadingAction>\n        <IconButton\n          aria-label=\"Expand\"\n          icon={SidebarExpandIcon}\n          variant=\"invisible\"\n        />\n      </PageHeader.LeadingAction>\n      <PageHeader.TrailingAction>\n        <IconButton aria-label=\"Edit\" icon={PencilIcon} variant=\"invisible\" />\n      </PageHeader.TrailingAction>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.LeadingAction>\n        <IconButton\n          aria-label=\"Expand\"\n          icon={SidebarExpandIcon}\n          variant=\"invisible\"\n        />\n      </PageHeader.LeadingAction>\n      <PageHeader.TrailingAction>\n        <IconButton aria-label=\"Edit\" icon={PencilIcon} variant=\"invisible\" />\n      </PageHeader.TrailingAction>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-parent-link-and-actions-of-context-area",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.ContextArea>\n        <PageHeader.ParentLink href=\"http://github.com\">\n          Parent Link\n        </PageHeader.ParentLink>\n\n        <PageHeader.ContextAreaActions>\n          <Button size=\"small\" trailingAction={TriangleDownIcon}>\n            Add File\n          </Button>\n          <IconButton\n            size=\"small\"\n            aria-label=\"More Options\"\n            icon={KebabHorizontalIcon}\n          />\n        </PageHeader.ContextAreaActions>\n      </PageHeader.ContextArea>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.ContextArea>\n        <PageHeader.ParentLink href=\"http://github.com\">\n          Parent Link\n        </PageHeader.ParentLink>\n\n        <PageHeader.ContextAreaActions>\n          <Button size=\"small\" trailingAction={TriangleDownIcon}>\n            Add File\n          </Button>\n          <IconButton\n            size=\"small\"\n            aria-label=\"More Options\"\n            icon={KebabHorizontalIcon}\n          />\n        </PageHeader.ContextAreaActions>\n      </PageHeader.ContextArea>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-context-bar-and-actions-of-context-area",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.ContextArea>\n        <PageHeader.ContextBar>\n          <Breadcrumbs>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main\">\n              react\n            </Breadcrumbs.Item>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main/src\">\n              src\n            </Breadcrumbs.Item>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main/src/PageHeader\">\n              PageHeader\n            </Breadcrumbs.Item>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx\">\n              PageHeader.tsx\n            </Breadcrumbs.Item>\n          </Breadcrumbs>\n        </PageHeader.ContextBar>\n        <PageHeader.ContextAreaActions>\n          <Button size=\"small\" leadingVisual={GitBranchIcon}>\n            Main\n          </Button>\n          <IconButton\n            size=\"small\"\n            aria-label=\"More Options\"\n            icon={KebabHorizontalIcon}\n          />\n        </PageHeader.ContextAreaActions>\n      </PageHeader.ContextArea>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Title\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title>Title</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.ContextArea>\n        <PageHeader.ContextBar>\n          <Breadcrumbs>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main\">\n              react\n            </Breadcrumbs.Item>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main/src\">\n              src\n            </Breadcrumbs.Item>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/tree/main/src/PageHeader\">\n              PageHeader\n            </Breadcrumbs.Item>\n            <Breadcrumbs.Item href=\"https://github.com/primer/react/blob/main/src/PageHeader/PageHeader.tsx\">\n              PageHeader.tsx\n            </Breadcrumbs.Item>\n          </Breadcrumbs>\n        </PageHeader.ContextBar>\n        <PageHeader.ContextAreaActions>\n          <Button size=\"small\" leadingVisual={GitBranchIcon}>\n            Main\n          </Button>\n          <IconButton\n            size=\"small\"\n            aria-label=\"More Options\"\n            icon={KebabHorizontalIcon}\n          />\n        </PageHeader.ContextAreaActions>\n      </PageHeader.ContextArea>\n    </PageHeader>\n  </div>\n)"
         },
         {
           "id": "components-pageheader-features--with-actions-that-have-responsive-content",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 3,\n    }}\n  >\n    <PageHeader role=\"banner\" aria-label=\"Webhooks\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title as=\"h2\">Webhooks</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Actions>\n        <Hidden when={['narrow']}>\n          <Button variant=\"primary\">New webhook</Button>\n        </Hidden>\n        <Hidden when={['regular', 'wide']}>\n          <Button variant=\"primary\">New</Button>\n        </Hidden>\n      </PageHeader.Actions>\n    </PageHeader>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddingContainer}>\n    <PageHeader role=\"banner\" aria-label=\"Webhooks\">\n      <PageHeader.TitleArea>\n        <PageHeader.Title as=\"h2\">Webhooks</PageHeader.Title>\n      </PageHeader.TitleArea>\n      <PageHeader.Actions>\n        <Hidden when={['narrow']}>\n          <Button variant=\"primary\">New webhook</Button>\n        </Hidden>\n        <Hidden when={['regular', 'wide']}>\n          <Button variant=\"primary\">New</Button>\n        </Hidden>\n      </PageHeader.Actions>\n    </PageHeader>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -4694,11 +4604,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",
@@ -4725,11 +4630,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4759,11 +4659,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
             }
           ]
         },
@@ -4781,11 +4676,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4803,11 +4693,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4831,11 +4716,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
             }
           ]
         },
@@ -4853,11 +4733,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4875,11 +4750,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4898,11 +4768,6 @@
               "defaultValue": "false",
               "description": "Whether the content is hidden."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "as",
               "type": "React.ElementType",
@@ -4924,11 +4789,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4946,11 +4806,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4968,11 +4823,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4990,11 +4840,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5012,11 +4857,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5050,11 +4890,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5065,7 +4900,7 @@
       "id": "page_layout",
       "name": "PageLayout",
       "status": "alpha",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-pagelayout--default",
@@ -5073,19 +4908,19 @@
         },
         {
           "id": "components-pagelayout-features--pull-request-page",
-          "code": "() => (\n  <PageLayout>\n    <PageLayout.Header>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 3,\n        }}\n      >\n        <Box>\n          <Heading\n            as=\"h1\"\n            sx={{\n              fontWeight: 'normal',\n            }}\n          >\n            Input validation styles{' '}\n            <Text\n              sx={{\n                color: 'fg.muted',\n                fontWeight: 'light',\n              }}\n            >\n              #1831\n            </Text>\n          </Heading>\n          <Box\n            sx={{\n              display: 'flex',\n              gap: 2,\n              alignItems: 'center',\n            }}\n          >\n            <StateLabel status=\"pullOpened\">Open</StateLabel>\n            <Text\n              sx={{\n                fontSize: 1,\n                color: 'fg.muted',\n              }}\n            >\n              <Link\n                href=\"#\"\n                muted\n                sx={{\n                  fontWeight: 'bold',\n                }}\n              >\n                mperrotti\n              </Link>{' '}\n              wants to merge 3 commits into{' '}\n              <BranchName href=\"#\">main</BranchName> from{' '}\n              <BranchName href=\"#\">mp/validation-styles</BranchName>\n            </Text>\n          </Box>\n        </Box>\n        <TabNav>\n          <TabNav.Link href=\"#\" selected>\n            Conversation\n          </TabNav.Link>\n          <TabNav.Link href=\"#\">Commits</TabNav.Link>\n          <TabNav.Link href=\"#\">Checks</TabNav.Link>\n          <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n        </TabNav>\n      </Box>\n    </PageLayout.Header>\n    <PageLayout.Content>\n      <Box\n        sx={{\n          border: '1px solid',\n          borderRadius: 2,\n          borderColor: 'border.default',\n          height: 200,\n        }}\n      ></Box>\n      <Box\n        sx={{\n          maxWidth: '100%',\n          overflowX: 'auto',\n          border: '1px solid',\n          whiteSpace: 'nowrap',\n          borderColor: 'border.default',\n          mt: 3,\n          p: 3,\n          borderRadius: 2,\n        }}\n        tabIndex={0}\n      >\n        This box has really long content. If it is too long, it will cause x\n        overflow and should show a scrollbar. When this overflows, it should not\n        break to overall page layout!\n      </Box>\n    </PageLayout.Content>\n    <PageLayout.Pane aria-label=\"Side pane\">\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 3,\n        }}\n      >\n        <Box>\n          <Text\n            sx={{\n              fontSize: 0,\n              fontWeight: 'bold',\n              display: 'block',\n              color: 'fg.muted',\n            }}\n          >\n            Assignees\n          </Text>\n          <Text\n            sx={{\n              fontSize: 0,\n              color: 'fg.muted',\n              lineHeight: 'condensed',\n            }}\n          >\n            No one –{' '}\n            <Link href=\"#\" muted>\n              assign yourself\n            </Link>\n          </Text>\n        </Box>\n        <Box\n          role=\"separator\"\n          sx={{\n            width: '100%',\n            height: 1,\n            backgroundColor: 'border.default',\n          }}\n        ></Box>\n        <Box>\n          <Text\n            sx={{\n              fontSize: 0,\n              fontWeight: 'bold',\n              display: 'block',\n              color: 'fg.muted',\n            }}\n          >\n            Labels\n          </Text>\n          <Text\n            sx={{\n              fontSize: 0,\n              color: 'fg.muted',\n              lineHeight: 'condensed',\n            }}\n          >\n            None yet\n          </Text>\n        </Box>\n      </Box>\n    </PageLayout.Pane>\n  </PageLayout>\n)"
+          "code": "() => (\n  <PageLayout>\n    <PageLayout.Header>\n      <div className={classes.HeaderStack}>\n        <div>\n          <Heading as=\"h1\" className={classes.TitleHeading}>\n            Input validation styles{' '}\n            <Text className={classes.TitleSubdued}>#1831</Text>\n          </Heading>\n          <div className={classes.StatusRow}>\n            <StateLabel status=\"pullOpened\">Open</StateLabel>\n            <Text className={classes.StatusMeta}>\n              <Link href=\"#\" muted className={classes.BoldMetaLink}>\n                mperrotti\n              </Link>{' '}\n              wants to merge 3 commits into{' '}\n              <BranchName href=\"#\">main</BranchName> from{' '}\n              <BranchName href=\"#\">mp/validation-styles</BranchName>\n            </Text>\n          </div>\n        </div>\n        <TabNav>\n          <TabNav.Link href=\"#\" selected>\n            Conversation\n          </TabNav.Link>\n          <TabNav.Link href=\"#\">Commits</TabNav.Link>\n          <TabNav.Link href=\"#\">Checks</TabNav.Link>\n          <TabNav.Link href=\"#\">Files changed</TabNav.Link>\n        </TabNav>\n      </div>\n    </PageLayout.Header>\n    <PageLayout.Content>\n      <div className={classes.ContentBox}></div>\n      <div className={classes.ScrollBox} tabIndex={0}>\n        This box has really long content. If it is too long, it will cause x\n        overflow and should show a scrollbar. When this overflows, it should not\n        break to overall page layout!\n      </div>\n    </PageLayout.Content>\n    <PageLayout.Pane aria-label=\"Side pane\">\n      <div className={classes.PaneStack}>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Assignees</Text>\n          <Text className={classes.PaneMetaText}>\n            No one –{' '}\n            <Link href=\"#\" muted>\n              assign yourself\n            </Link>\n          </Text>\n        </div>\n        <div role=\"separator\" className={classes.PaneSeparator}></div>\n        <div>\n          <Text className={classes.PaneSectionHeading}>Labels</Text>\n          <Text className={classes.PaneMetaText}>None yet</Text>\n        </div>\n      </div>\n    </PageLayout.Pane>\n  </PageLayout>\n)"
         },
         {
           "id": "components-pagelayout-features--sticky-pane",
-          "code": "(args) => (\n  <PageLayout\n    rowGap=\"none\"\n    columnGap=\"none\"\n    padding=\"none\"\n    containerWidth=\"full\"\n  >\n    <PageLayout.Header padding=\"normal\" divider=\"line\">\n      <Placeholder label=\"Header\" height={64} />\n    </PageLayout.Header>\n    <PageLayout.Content padding=\"normal\" width=\"large\">\n      <Box\n        sx={{\n          display: 'grid',\n          gap: 3,\n        }}\n      >\n        {Array.from({\n          length: args.numParagraphsInContent,\n        }).map((_, i) => {\n          const testId = `content${i}`\n          return (\n            <Box\n              key={i}\n              as=\"p\"\n              sx={{\n                margin: 0,\n              }}\n            >\n              <span data-testid={testId}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </span>\n            </Box>\n          )\n        })}\n      </Box>\n    </PageLayout.Content>\n    <PageLayout.Pane\n      position=\"start\"\n      resizable\n      padding=\"normal\"\n      divider=\"line\"\n      sticky={args.sticky}\n      aria-label=\"Side pane\"\n    >\n      <Box\n        sx={{\n          display: 'grid',\n          gap: 3,\n        }}\n      >\n        {Array.from({\n          length: args.numParagraphsInPane,\n        }).map((_, i) => {\n          const testId = `paragraph${i}`\n          return (\n            <Box\n              key={i}\n              as=\"p\"\n              sx={{\n                margin: 0,\n              }}\n            >\n              <span data-testid={testId}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </span>\n            </Box>\n          )\n        })}\n        <Box as=\"p\">\n          Donec sit amet massa purus.{' '}\n          <Link inline href=\"#foo\">\n            Plura de lorem Ispum.\n          </Link>\n        </Box>\n      </Box>\n    </PageLayout.Pane>\n    <PageLayout.Footer padding=\"normal\" divider=\"line\">\n      <Placeholder label=\"Footer\" height={64} />\n    </PageLayout.Footer>\n  </PageLayout>\n)"
+          "code": "(args) => (\n  <PageLayout\n    rowGap=\"none\"\n    columnGap=\"none\"\n    padding=\"none\"\n    containerWidth=\"full\"\n  >\n    <PageLayout.Header padding=\"normal\" divider=\"line\">\n      <Placeholder label=\"Header\" height={64} />\n    </PageLayout.Header>\n    <PageLayout.Content padding=\"normal\" width=\"large\">\n      <div className={classes.ContentGrid}>\n        {Array.from({\n          length: args.numParagraphsInContent,\n        }).map((_, i) => {\n          const testId = `content${i}`\n          return (\n            <p key={i} className={classes.Paragraph}>\n              <span data-testid={testId}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </span>\n            </p>\n          )\n        })}\n      </div>\n    </PageLayout.Content>\n    <PageLayout.Pane\n      position=\"start\"\n      resizable\n      padding=\"normal\"\n      divider=\"line\"\n      sticky={args.sticky}\n      aria-label=\"Side pane\"\n    >\n      <div className={classes.ContentGrid}>\n        {Array.from({\n          length: args.numParagraphsInPane,\n        }).map((_, i) => {\n          const testId = `paragraph${i}`\n          return (\n            <p key={i} className={classes.Paragraph}>\n              <span data-testid={testId}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </span>\n            </p>\n          )\n        })}\n        <p>\n          Donec sit amet massa purus.{' '}\n          <Link inline href=\"#foo\">\n            Plura de lorem Ispum.\n          </Link>\n        </p>\n      </div>\n    </PageLayout.Pane>\n    <PageLayout.Footer padding=\"normal\" divider=\"line\">\n      <Placeholder label=\"Footer\" height={64} />\n    </PageLayout.Footer>\n  </PageLayout>\n)"
         },
         {
           "id": "components-pagelayout-features--nested-scroll-container",
-          "code": "(args) => (\n  <Box\n    sx={{\n      display: 'grid',\n      gridTemplateRows: 'auto 1fr auto',\n      height: '100vh',\n    }}\n  >\n    <Placeholder label=\"Above scroll container\" height={120} />\n    <Box\n      sx={{\n        overflow: 'auto',\n      }}\n    >\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Header padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Header\" height={64} />\n        </PageLayout.Header>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <Box\n            sx={{\n              display: 'grid',\n              gap: 3,\n            }}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            {Array.from({\n              length: args.numParagraphsInContent,\n            }).map((_, i) => (\n              <Box\n                key={i}\n                as=\"p\"\n                sx={{\n                  margin: 0,\n                }}\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </Box>\n            ))}\n          </Box>\n        </PageLayout.Content>\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Side pane\"\n        >\n          <Box\n            sx={{\n              display: 'grid',\n              gap: 3,\n            }}\n          >\n            {Array.from({\n              length: args.numParagraphsInPane,\n            }).map((_, i) => (\n              <Box\n                key={i}\n                as=\"p\"\n                sx={{\n                  margin: 0,\n                }}\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </Box>\n            ))}\n          </Box>\n        </PageLayout.Pane>\n        <PageLayout.Footer padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Footer\" height={64} />\n        </PageLayout.Footer>\n      </PageLayout>\n    </Box>\n    <Placeholder label=\"Below scroll container\" height={120} />\n  </Box>\n)"
+          "code": "(args) => (\n  <div className={classes.NestedScrollContainer}>\n    <Placeholder label=\"Above scroll container\" height={120} />\n    <div className={classes.OverflowAuto}>\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Header padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Header\" height={64} />\n        </PageLayout.Header>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            {Array.from({\n              length: args.numParagraphsInContent,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus. Nunc sem lectus, bibendum a sapien nec, tristique tempus\n                felis. Ut porttitor auctor tellus in imperdiet. Ut blandit\n                tincidunt augue, quis fringilla nunc tincidunt sed. Vestibulum\n                auctor euismod nisi. Nullam tincidunt est in mi tincidunt\n                dictum. Sed consectetur aliquet velit ut ornare.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Content>\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Side pane\"\n        >\n          <div className={classes.ContentGrid}>\n            {Array.from({\n              length: args.numParagraphsInPane,\n            }).map((_, i) => (\n              <p key={i} className={classes.Paragraph}>\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at\n                enim id lorem tempus egestas a non ipsum. Maecenas imperdiet\n                ante quam, at varius lorem molestie vel. Sed at eros consequat,\n                varius tellus et, auctor felis. Donec pulvinar lacinia urna nec\n                commodo. Phasellus at imperdiet risus. Donec sit amet massa\n                purus.\n              </p>\n            ))}\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Footer padding=\"normal\" divider=\"line\">\n          <Placeholder label=\"Footer\" height={64} />\n        </PageLayout.Footer>\n      </PageLayout>\n    </div>\n    <Placeholder label=\"Below scroll container\" height={120} />\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--custom-sticky-header",
-          "code": "(args) => (\n  // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component\n  <Box data-testid=\"story-window\">\n    <Box\n      as=\"header\"\n      data-testid=\"sticky-header\"\n      sx={{\n        position: 'sticky',\n        top: 0,\n        height: args.offsetHeader,\n        display: 'grid',\n        placeItems: 'center',\n        backgroundColor: 'canvas.subtle',\n        borderBottom: '1px solid',\n        borderColor: 'border.default',\n        zIndex: 100,\n      }}\n    >\n      Custom sticky header\n    </Box>\n    <PageLayout\n      rowGap=\"none\"\n      columnGap=\"none\"\n      padding=\"none\"\n      containerWidth=\"full\"\n    >\n      <PageLayout.Content padding=\"normal\" width=\"large\">\n        <Box\n          sx={{\n            display: 'grid',\n            gap: 3,\n          }}\n          data-testid=\"scrollContainer\"\n        >\n          {Array.from({\n            length: args.numParagraphsInContent,\n          }).map((_, i) => {\n            const testId = `content${i}`\n            return (\n              <Box\n                key={i}\n                as=\"p\"\n                sx={{\n                  margin: 0,\n                }}\n              >\n                <span data-testid={testId}>\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin\n                  vitae orci et magna consectetur ullamcorper eget ac purus. Nam\n                  at enim id lorem tempus egestas a non ipsum. Maecenas\n                  imperdiet ante quam, at varius lorem molestie vel. Sed at eros\n                  consequat, varius tellus et, auctor felis. Donec pulvinar\n                  lacinia urna nec commodo. Phasellus at imperdiet risus. Donec\n                  sit amet massa purus. Nunc sem lectus, bibendum a sapien nec,\n                  tristique tempus felis. Ut porttitor auctor tellus in\n                  imperdiet. Ut blandit tincidunt augue, quis fringilla nunc\n                  tincidunt sed. Vestibulum auctor euismod nisi. Nullam\n                  tincidunt est in mi tincidunt dictum. Sed consectetur aliquet\n                  velit ut ornare.\n                </span>\n              </Box>\n            )\n          })}\n        </Box>\n      </PageLayout.Content>\n      <PageLayout.Pane\n        position=\"start\"\n        padding=\"normal\"\n        divider=\"line\"\n        aria-label=\"Aside pane\"\n        sticky\n        offsetHeader={args.offsetHeader}\n      >\n        <Box\n          sx={{\n            display: 'grid',\n            gap: 3,\n          }}\n        >\n          {Array.from({\n            length: args.numParagraphsInPane,\n          }).map((_, i) => {\n            const testId = `paragraph${i}`\n            return (\n              <Box\n                key={i}\n                as=\"p\"\n                sx={{\n                  margin: 0,\n                }}\n              >\n                <span data-testid={testId}>\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam\n                  at enim id lorem tempus egestas a non ipsum. Maecenas\n                  imperdiet ante quam, at varius lorem molestie vel. Sed at eros\n                  consequat, varius tellus et, auctor felis. Donec pulvinar\n                  lacinia urna nec commodo. Phasellus at imperdiet risus. Donec\n                  sit amet massa purus.\n                </span>\n              </Box>\n            )\n          })}\n        </Box>\n      </PageLayout.Pane>\n      <PageLayout.Footer padding=\"normal\" divider=\"line\">\n        <Placeholder label=\"Footer\" height={64} />\n      </PageLayout.Footer>\n    </PageLayout>\n  </Box>\n)"
+          "code": "(args) => (\n  // a box to create a sticky top element that will be on the consumer side and outside of the PageLayout component\n  <div data-testid=\"story-window\">\n    <header\n      data-testid=\"sticky-header\"\n      className={classes.StickyHeader}\n      style={{\n        height: args.offsetHeader,\n      }}\n    >\n      Custom sticky header\n    </header>\n    <PageLayout\n      rowGap=\"none\"\n      columnGap=\"none\"\n      padding=\"none\"\n      containerWidth=\"full\"\n    >\n      <PageLayout.Content padding=\"normal\" width=\"large\">\n        <div className={classes.ContentGrid} data-testid=\"scrollContainer\">\n          {Array.from({\n            length: args.numParagraphsInContent,\n          }).map((_, i) => {\n            const testId = `content${i}`\n            return (\n              <p key={i} className={classes.Paragraph}>\n                <span data-testid={testId}>\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin\n                  vitae orci et magna consectetur ullamcorper eget ac purus. Nam\n                  at enim id lorem tempus egestas a non ipsum. Maecenas\n                  imperdiet ante quam, at varius lorem molestie vel. Sed at eros\n                  consequat, varius tellus et, auctor felis. Donec pulvinar\n                  lacinia urna nec commodo. Phasellus at imperdiet risus. Donec\n                  sit amet massa purus. Nunc sem lectus, bibendum a sapien nec,\n                  tristique tempus felis. Ut porttitor auctor tellus in\n                  imperdiet. Ut blandit tincidunt augue, quis fringilla nunc\n                  tincidunt sed. Vestibulum auctor euismod nisi. Nullam\n                  tincidunt est in mi tincidunt dictum. Sed consectetur aliquet\n                  velit ut ornare.\n                </span>\n              </p>\n            )\n          })}\n        </div>\n      </PageLayout.Content>\n      <PageLayout.Pane\n        position=\"start\"\n        padding=\"normal\"\n        divider=\"line\"\n        aria-label=\"Aside pane\"\n        sticky\n        offsetHeader={args.offsetHeader}\n      >\n        <div className={classes.ContentGrid}>\n          {Array.from({\n            length: args.numParagraphsInPane,\n          }).map((_, i) => {\n            const testId = `paragraph${i}`\n            return (\n              <p key={i} className={classes.Paragraph}>\n                <span data-testid={testId}>\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam\n                  at enim id lorem tempus egestas a non ipsum. Maecenas\n                  imperdiet ante quam, at varius lorem molestie vel. Sed at eros\n                  consequat, varius tellus et, auctor felis. Donec pulvinar\n                  lacinia urna nec commodo. Phasellus at imperdiet risus. Donec\n                  sit amet massa purus.\n                </span>\n              </p>\n            )\n          })}\n        </div>\n      </PageLayout.Pane>\n      <PageLayout.Footer padding=\"normal\" divider=\"line\">\n        <Placeholder label=\"Footer\" height={64} />\n      </PageLayout.Footer>\n    </PageLayout>\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--resizable-pane",
@@ -5093,7 +4928,7 @@
         },
         {
           "id": "components-pagelayout-features--scroll-container-within-page-layout-pane",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'grid',\n      gridTemplateRows: 'auto 1fr auto',\n      height: '100vh',\n    }}\n  >\n    <Box\n      sx={{\n        overflow: 'auto',\n      }}\n    >\n      <Placeholder label=\"Above inner scroll container\" height={120} />\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Sticky pane\"\n        >\n          <Box\n            sx={{\n              overflow: 'auto',\n            }}\n          >\n            <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n              <Placeholder label=\"Inner scroll container\" height={800} />\n            </PageLayout.Pane>\n          </Box>\n        </PageLayout.Pane>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <Box\n            sx={{\n              display: 'grid',\n            }}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            <Placeholder label=\"Page content\" height={1600} />\n          </Box>\n        </PageLayout.Content>\n      </PageLayout>\n      <Placeholder label=\"Beneath inner scroll container\" height={120} />\n    </Box>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.NestedScrollContainer}>\n    <div className={classes.OverflowAuto}>\n      <Placeholder label=\"Above inner scroll container\" height={120} />\n      <PageLayout\n        rowGap=\"none\"\n        columnGap=\"none\"\n        padding=\"none\"\n        containerWidth=\"full\"\n      >\n        <PageLayout.Pane\n          position=\"start\"\n          padding=\"normal\"\n          divider=\"line\"\n          sticky\n          aria-label=\"Sticky pane\"\n        >\n          <div className={classes.OverflowAuto}>\n            <PageLayout.Pane padding=\"normal\" aria-label=\"Side pane\">\n              <Placeholder label=\"Inner scroll container\" height={800} />\n            </PageLayout.Pane>\n          </div>\n        </PageLayout.Pane>\n        <PageLayout.Content padding=\"normal\" width=\"large\">\n          <div\n            className={classes.ContentGrid}\n            tabIndex={0}\n            role=\"region\"\n            aria-label=\"Page content\"\n          >\n            <Placeholder label=\"Page content\" height={1600} />\n          </div>\n        </PageLayout.Content>\n      </PageLayout>\n      <Placeholder label=\"Beneath inner scroll container\" height={120} />\n    </div>\n  </div>\n)"
         },
         {
           "id": "components-pagelayout-features--custom-pane-widths",
@@ -5101,7 +4936,7 @@
         },
         {
           "id": "components-pagelayout-features--with-custom-pane-heading",
-          "code": "() => (\n  <PageLayout containerWidth=\"full\">\n    <PageLayout.Header>\n      <Placeholder height={64} label=\"Header\" />\n    </PageLayout.Header>\n    <PageLayout.Pane resizable position=\"start\" aria-label=\"Side pane\">\n      <Heading\n        as=\"h2\"\n        sx={{\n          fontSize: 3,\n        }}\n        id=\"pane-heading\"\n      >\n        Pane Heading\n      </Heading>\n      <Placeholder height={320} label=\"Pane\" />\n    </PageLayout.Pane>\n    <PageLayout.Content>\n      <Placeholder height={640} label=\"Content\" />\n    </PageLayout.Content>\n    <PageLayout.Footer>\n      <Placeholder height={64} label=\"Footer\" />\n    </PageLayout.Footer>\n  </PageLayout>\n)"
+          "code": "() => (\n  <PageLayout containerWidth=\"full\">\n    <PageLayout.Header>\n      <Placeholder height={64} label=\"Header\" />\n    </PageLayout.Header>\n    <PageLayout.Pane resizable position=\"start\" aria-label=\"Side pane\">\n      <Heading as=\"h2\" className={classes.PaneHeading} id=\"pane-heading\">\n        Pane Heading\n      </Heading>\n      <Placeholder height={320} label=\"Pane\" />\n    </PageLayout.Pane>\n    <PageLayout.Content>\n      <Placeholder height={640} label=\"Content\" />\n    </PageLayout.Content>\n    <PageLayout.Footer>\n      <Placeholder height={64} label=\"Footer\" />\n    </PageLayout.Footer>\n  </PageLayout>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -5383,11 +5218,6 @@
           "type": "string",
           "defaultValue": "div",
           "description": "Sets the underlying HTML tag for the component"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -5397,7 +5227,7 @@
       "id": "pagination",
       "name": "Pagination",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-pagination--default",
@@ -5471,52 +5301,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": false,
-      "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": []
@@ -5526,11 +5310,11 @@
       "id": "popover",
       "name": "Popover",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
@@ -5579,6 +5363,24 @@
               "name": "sx",
               "type": "SystemStyleObject",
               "deprecated": true
+            },
+            {
+              "name": "width",
+              "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'auto'",
+              "defaultValue": "'small'",
+              "description": "Sets the width of the popover content."
+            },
+            {
+              "name": "height",
+              "type": "| 'small' | 'medium' | 'large' | 'xlarge' | 'fit-content' | 'auto'",
+              "defaultValue": "'fit-content'",
+              "description": "Sets the height of the popover content."
+            },
+            {
+              "name": "overflow",
+              "type": "| 'auto' | 'hidden' | 'scroll' | 'visible'",
+              "defaultValue": "'auto'",
+              "description": "Sets the overflow behavior of the popover content."
             }
           ]
         }
@@ -5593,19 +5395,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",
@@ -5630,7 +5432,7 @@
       "id": "progress_bar",
       "name": "ProgressBar",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-progressbar--default",
@@ -5658,15 +5460,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",
@@ -5746,23 +5548,23 @@
       "id": "radio",
       "name": "Radio",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-radio--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <Radio name=\"default-radio-name\" value=\"default\" />\n      <FormControl.Label>Label</FormControl.Label>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <Radio name=\"default-radio-name\" value=\"default\" />\n      <FormControl.Label>Label</FormControl.Label>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-radio-features--with-leading-visual",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Radio value=\"default\" name=\"default-radio-name\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <Avatar src={`https://github.com/lukasoppermann.png`} />\n        </FormControl.LeadingVisual>\n        <Radio value=\"default\" name=\"default-radio-name\" />\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        <Radio value=\"default\" name=\"default-radio-name\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <Avatar src={`https://github.com/lukasoppermann.png`} />\n        </FormControl.LeadingVisual>\n        <Radio value=\"default\" name=\"default-radio-name\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-radio-features--disabled",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl disabled>\n        <Radio value=\"default\" name=\"default-radio-name\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl disabled>\n        <Radio value=\"default\" name=\"default-radio-name\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-radio-features--with-caption",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <Radio value=\"default\" name=\"default-radio-name\" />\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        <Radio value=\"default\" name=\"default-radio-name\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -5807,16 +5609,6 @@
         {
           "name": "ref",
           "type": "React.RefObject<HTMLInputElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -5826,7 +5618,7 @@
       "id": "radio_group",
       "name": "RadioGroup",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-radiogroup--default",
@@ -5838,7 +5630,7 @@
         },
         {
           "id": "components-radiogroup-features--with-external-label",
-          "code": "() => (\n  <>\n    <Box\n      id=\"choiceHeading\"\n      borderBottomWidth=\"1px\"\n      borderBottomStyle=\"solid\"\n      borderBottomColor=\"border.default\"\n      pb={2}\n      mb={3}\n      fontSize={3}\n    >\n      External label\n    </Box>\n    <RadioGroup aria-labelledby=\"choiceHeading\" name=\"defaultRadioGroup\">\n      <FormControl>\n        <Radio value=\"one\" />\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)"
+          "code": "() => (\n  <>\n    <div id=\"choiceHeading\" className={classes.ExternalLabel}>\n      External label\n    </div>\n    <RadioGroup aria-labelledby=\"choiceHeading\" name=\"defaultRadioGroup\">\n      <FormControl>\n        <Radio value=\"one\" />\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)"
         },
         {
           "id": "components-radiogroup-features--error",
@@ -5968,7 +5760,7 @@
       "id": "relative_time",
       "name": "RelativeTime",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-relativetime--default",
@@ -6118,11 +5910,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"relative-time\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6132,7 +5919,7 @@
       "id": "segmented_control",
       "name": "SegmentedControl",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-segmentedcontrol--default",
@@ -6172,7 +5959,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 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    </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",
@@ -6219,11 +6006,6 @@
           "description": "The size of the buttons",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -6252,9 +6034,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",
@@ -6297,11 +6080,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>"
@@ -6327,55 +6105,55 @@
       "id": "select",
       "name": "Select",
       "status": "alpha",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "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",
@@ -6419,11 +6197,11 @@
       "docsId": "select_panel",
       "name": "SelectPanel",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-selectpanel--default",
-          "code": "() => {\n  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n  const [filter, setFilter] = useState('')\n  const filteredItems = items.filter((item) =>\n    item.text?.toLowerCase().startsWith(filter.toLowerCase()),\n  )\n  const [open, setOpen] = useState(false)\n  return (\n    <FormControl>\n      <FormControl.Label>Labels</FormControl.Label>\n      <SelectPanel\n        title=\"Select labels\"\n        placeholder=\"Select labels\" // button text when no items are selected\n        subtitle=\"Use labels to organize issues and pull requests\"\n        renderAnchor={({ children, ...anchorProps }) => (\n          <Button\n            trailingAction={TriangleDownIcon}\n            {...anchorProps}\n            aria-haspopup=\"dialog\"\n          >\n            {children}\n          </Button>\n        )}\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredItems}\n        selected={selected}\n        onSelectedChange={setSelected}\n        onFilterChange={setFilter}\n        width=\"medium\"\n        message={\n          filteredItems.length === 0\n            ? {\n                variant: 'empty',\n                title: `No language found for \\`${filter}\\``,\n                body: 'Adjust your search term to find other languages',\n              }\n            : undefined\n        }\n      />\n    </FormControl>\n  )\n}"
+          "code": "() => {\n  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))\n  const [filter, setFilter] = useState('')\n  const filteredItems = items.filter((item) =>\n    item.text?.toLowerCase().startsWith(filter.toLowerCase()),\n  )\n  const [open, setOpen] = useState(false)\n  return (\n    <FormControl>\n      <FormControl.Label>Labels</FormControl.Label>\n      <SelectPanel\n        title=\"Select labels\"\n        placeholder=\"Select labels\" // button text when no items are selected\n        subtitle=\"Use labels to organize issues and pull requests\"\n        renderAnchor={({ children, ...anchorProps }) => (\n          <Button\n            trailingAction={TriangleDownIcon}\n            {...anchorProps}\n            aria-haspopup=\"dialog\"\n          >\n            {children}\n          </Button>\n        )}\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredItems}\n        selected={selected}\n        onSelectedChange={setSelected}\n        onFilterChange={setFilter}\n        width=\"medium\"\n        message={\n          filteredItems.length === 0\n            ? {\n                variant: 'empty',\n                title: 'No items available',\n                body: '',\n              }\n            : undefined\n        }\n      />\n    </FormControl>\n  )\n}"
         },
         {
           "id": "components-selectpanel-features--with-item-dividers",
@@ -6588,8 +6366,8 @@
         },
         {
           "name": "message",
-          "type": "{title: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';  body: React.ReactNode;}",
-          "defaultValue": "A default empty message is provided by default if this option is not supplied",
+          "type": "{title: string | React.ReactElement; variant: 'empty' | 'error' | 'warning';  body: React.ReactNode; icon?:React.ComponentType<IconProps>;action?: React.ReactElement;}",
+          "defaultValue": "A default empty message is provided if this option is not configured. Supply a custom empty message to override the default.",
           "description": "Message to display in the panel in case of error or empty results"
         },
         {
@@ -6609,6 +6387,12 @@
           "description": "Whether to display the selected items at the top of the list",
           "default": "true"
         },
+        {
+          "name": "showSelectAll",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "When `true` and on a multi-select SelectPanel, displays a 'Select all' checkbox that allows users to select or deselect all visible items at once. The checkbox label automatically toggles between 'Select all' and 'Deselect all' based on the current selection state, and shows an indeterminate state when some items are selected."
+        },
         {
           "name": "disableFullscreenOnNarrow",
           "type": "boolean",
@@ -6635,7 +6419,7 @@
       "id": "skeleton_box",
       "name": "SkeletonBox",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-skeleton-skeletonbox--default",
@@ -6668,11 +6452,135 @@
           "type": "string",
           "description": "The className of the skeleton box",
           "defaultValue": ""
+        }
+      ],
+      "subcomponents": []
+    },
+    "skeleton_avatar": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/SkeletonAvatar",
+      "id": "skeleton_avatar",
+      "name": "SkeletonAvatar",
+      "status": "alpha",
+      "a11yReviewed": "2025-01-08",
+      "stories": [
+        {
+          "id": "components-skeleton-skeletonavatar--default",
+          "code": "() => <SkeletonAvatar />"
         },
         {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
+          "id": "components-skeleton-skeletonavatar-features--square",
+          "code": "() => <SkeletonAvatar square />"
+        },
+        {
+          "id": "components-skeleton-skeletonavatar-features--size",
+          "code": "() => (\n  <div>\n    <SkeletonAvatar size={4} />\n    <SkeletonAvatar size={8} />\n    <SkeletonAvatar size={12} />\n    <SkeletonAvatar size={16} />\n    <SkeletonAvatar size={20} />\n    <SkeletonAvatar size={24} />\n    <SkeletonAvatar size={28} />\n    <SkeletonAvatar size={32} />\n    <SkeletonAvatar size={40} />\n    <SkeletonAvatar size={48} />\n    <SkeletonAvatar size={56} />\n    <SkeletonAvatar size={64} />\n  </div>\n)"
+        },
+        {
+          "id": "components-skeleton-skeletonavatar-features--size-responsive",
+          "code": "() => (\n  <div>\n    <SkeletonAvatar\n      size={{\n        narrow: 4,\n        regular: 8,\n        wide: 12,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 8,\n        regular: 12,\n        wide: 16,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 12,\n        regular: 16,\n        wide: 20,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 16,\n        regular: 20,\n        wide: 24,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 20,\n        regular: 24,\n        wide: 28,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 24,\n        regular: 28,\n        wide: 32,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 28,\n        regular: 32,\n        wide: 40,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 32,\n        regular: 40,\n        wide: 48,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 40,\n        regular: 48,\n        wide: 56,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 48,\n        regular: 56,\n        wide: 64,\n      }}\n    />\n  </div>\n)"
+        },
+        {
+          "id": "components-skeleton-skeletonavatar-features--in-a-stack",
+          "code": "() => (\n  <AvatarStack>\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n  </AvatarStack>\n)"
+        }
+      ],
+      "importPath": "@primer/react/experimental",
+      "props": [
+        {
+          "name": "size",
+          "type": "number | { narrow?: number; regular?: number; wide?: number; }",
+          "defaultValue": "20",
+          "description": "The size of the avatar in pixels."
+        },
+        {
+          "name": "square",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "If true, the avatar will be square instead of circular."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class name for custom styling."
+        }
+      ],
+      "subcomponents": []
+    },
+    "skeleton_text": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/SkeletonText",
+      "id": "skeleton_text",
+      "name": "SkeletonText",
+      "status": "alpha",
+      "a11yReviewed": "2025-01-08",
+      "stories": [
+        {
+          "id": "components-skeleton-skeletontext--default",
+          "code": "() => <SkeletonText />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--with-max-width",
+          "code": "() => <SkeletonText maxWidth={200} />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--with-multiple-lines",
+          "code": "() => <SkeletonText lines={3} />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--display",
+          "code": "() => <SkeletonText size=\"display\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--subtitle",
+          "code": "() => <SkeletonText size=\"subtitle\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--title-large",
+          "code": "() => <SkeletonText size=\"titleLarge\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--title-medium",
+          "code": "() => <SkeletonText size=\"titleMedium\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--title-small",
+          "code": "() => <SkeletonText size=\"titleSmall\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--body-large",
+          "code": "() => <SkeletonText size=\"bodyLarge\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--body-medium",
+          "code": "() => <SkeletonText size=\"bodyMedium\" />"
+        },
+        {
+          "id": "components-skeleton-skeletontext-features--body-small",
+          "code": "() => <SkeletonText size=\"bodySmall\" />"
+        }
+      ],
+      "importPath": "@primer/react/experimental",
+      "props": [
+        {
+          "name": "size",
+          "defaultValue": "'bodyMedium'",
+          "type": "'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle'",
+          "description": "Size of the text that the skeleton is replacing."
+        },
+        {
+          "name": "lines",
+          "defaultValue": "1",
+          "type": "number",
+          "description": "Number of lines of skeleton text to render."
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width that the line(s) of skeleton text can take up.  Accepts any valid CSS `max-width` value."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class name for custom styling."
         }
       ],
       "subcomponents": []
@@ -6682,7 +6590,7 @@
       "id": "spinner",
       "name": "Spinner",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-spinner--default",
@@ -6698,7 +6606,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",
@@ -6729,11 +6637,6 @@
         {
           "name": "data-*",
           "type": "string"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6743,7 +6646,7 @@
       "id": "split_page_layout",
       "name": "SplitPageLayout",
       "status": "alpha",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-splitpagelayout--default",
@@ -6751,15 +6654,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": [
@@ -6795,11 +6697,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the header is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -6835,11 +6732,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -6915,11 +6807,6 @@
               "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
             }
           ]
         },
@@ -6955,11 +6842,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the footer is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -6970,11 +6852,15 @@
       "id": "stack",
       "name": "Stack",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-stack--default",
           "code": "() => (\n  <Stack>\n    <div\n      style={{\n        background: 'var(--display-lemon-bgColor-muted)',\n        borderRadius: 'var(--borderRadius-medium)',\n        padding: 'var(--base-size-8)',\n      }}\n    >\n      First\n    </div>\n    <div\n      style={{\n        background: 'var(--display-olive-bgColor-muted)',\n        borderRadius: 'var(--borderRadius-medium)',\n        padding: 'var(--base-size-8)',\n      }}\n    >\n      Second\n    </div>\n    <div\n      style={{\n        background: 'var(--display-lime-bgColor-muted)',\n        borderRadius: 'var(--borderRadius-medium)',\n        padding: 'var(--base-size-8)',\n      }}\n    >\n      Third\n    </div>\n  </Stack>\n)"
+        },
+        {
+          "id": "components-stack-features--shrinking-stack-items",
+          "code": "() => (\n  <div\n    style={{\n      maxWidth: '200px',\n      padding: 'var(--base-size-8)',\n    }}\n  >\n    <Stack direction=\"horizontal\" gap=\"condensed\">\n      <Stack.Item shrink={false}>\n        <ShieldLockIcon size=\"small\" />\n      </Stack.Item>\n      <Stack.Item>\n        This stack has the leading icon set to prevent shrinking\n      </Stack.Item>\n    </Stack>\n    <Stack direction=\"horizontal\" gap=\"condensed\">\n      <Stack.Item shrink={true}>\n        <ShieldLockIcon size=\"small\" />\n      </Stack.Item>\n      <Stack.Item>\n        This stack item does not have the icon set to prevent shrinking\n      </Stack.Item>\n    </Stack>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -7023,6 +6909,11 @@
               "type": "boolean | ResponsiveValue<boolean>",
               "description": "Allow item to keep size or expand to fill the available space."
             },
+            {
+              "name": "shrink",
+              "type": "boolean | ResponsiveValue<boolean>",
+              "description": "Allow item to keep size or shrink to fit the available space."
+            },
             {
               "name": "className",
               "type": "string"
@@ -7036,7 +6927,7 @@
       "id": "state_label",
       "name": "StateLabel",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-statelabel-features--issue-opened",
@@ -7102,11 +6993,6 @@
           "name": "status",
           "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable' | 'open' | 'closed'",
           "required": true
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -7116,7 +7002,7 @@
       "id": "sub_nav",
       "name": "SubNav",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-subnav-features--selected",
@@ -7150,11 +7036,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": [
@@ -7179,23 +7060,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": []
         }
       ]
     },
@@ -7264,7 +7134,7 @@
       "id": "text",
       "name": "Text",
       "status": "alpha",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-text--default",
@@ -7272,11 +7142,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",
@@ -7339,71 +7209,71 @@
       "id": "text_input",
       "name": "TextInput",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
@@ -7586,48 +7456,48 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/TextInputWithTokens",
       "id": "text_input_with_tokens",
       "name": "TextInputWithTokens",
-      "status": "alpha",
-      "a11yReviewed": false,
+      "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",
@@ -7700,43 +7570,43 @@
       "id": "textarea",
       "name": "Textarea",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "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",
@@ -7796,15 +7666,20 @@
           "type": "React.ElementType",
           "defaultValue": "\"input\""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "className",
           "type": "string | undefined",
           "description": "The className to apply to the wrapper element"
+        },
+        {
+          "name": "minHeight",
+          "type": "number",
+          "description": "The minimum height of the textarea"
+        },
+        {
+          "name": "maxHeight",
+          "type": "number",
+          "description": "The maximum height of the textarea"
         }
       ],
       "subcomponents": []
@@ -7814,7 +7689,7 @@
       "id": "timeline",
       "name": "Timeline",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-timeline--default",
@@ -7830,11 +7705,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          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)"
         },
         {
           "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",
@@ -7903,7 +7778,7 @@
       "id": "toggle_switch",
       "name": "ToggleSwitch",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-toggleswitch--default",
@@ -7911,35 +7786,39 @@
         },
         {
           "id": "components-toggleswitch-features--small",
-          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <Text id=\"toggle\" fontWeight={'bold'} fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch size=\"small\" aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch size=\"small\" aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
         },
         {
           "id": "components-toggleswitch-features--with-caption",
-          "code": "() => (\n  <Box display=\"flex\" alignItems={'start'}>\n    <Box flexGrow={1}>\n      <Text fontSize={2} fontWeight=\"bold\" id=\"switchLabel\" display=\"block\">\n        Notifications\n      </Text>\n      <Text color=\"fg.subtle\" fontSize={1} id=\"switchCaption\" display=\"block\">\n        Notifications will be delivered via email and the GitHub notification\n        center\n      </Text>\n    </Box>\n    <ToggleSwitch\n      aria-labelledby=\"switchLabel\"\n      aria-describedby=\"switchCaption\"\n    />\n  </Box>\n)"
+          "code": "() => (\n  <div className={styles.Row}>\n    <div className={styles.ColGrow}>\n      <span className={styles.SwitchLabel} id=\"switchLabel\">\n        Notifications\n      </span>\n      <span className={styles.SwitchCaption} id=\"switchCaption\">\n        Notifications will be delivered via email and the GitHub notification\n        center\n      </span>\n    </div>\n    <ToggleSwitch\n      aria-labelledby=\"switchLabel\"\n      aria-describedby=\"switchCaption\"\n    />\n  </div>\n)"
         },
         {
           "id": "components-toggleswitch-features--disabled",
-          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <Text id=\"toggle\" fontWeight={'bold'} fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch disabled aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch disabled aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
         },
         {
           "id": "components-toggleswitch-features--checked",
-          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <Text id=\"toggle\" fontWeight={'bold'} fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch checked aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch checked aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
         },
         {
           "id": "components-toggleswitch-features--checked-disabled",
-          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <Text id=\"toggle\" fontWeight={'bold'} fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch checked disabled aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch checked disabled aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
         },
         {
           "id": "components-toggleswitch-features--loading",
-          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <Text id=\"toggle\" fontWeight={'bold'} fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch loading aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch loading aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
         },
         {
           "id": "components-toggleswitch-features--label-end",
-          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <Text id=\"toggle\" fontWeight={'bold'} fontSize={1}>\n      Toggle label\n    </Text>\n    <ToggleSwitch statusLabelPosition=\"end\" aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch statusLabelPosition=\"end\" aria-labelledby=\"toggle\" />\n  </ToggleSwitchStoryWrapper>\n)"
         },
         {
           "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      <Box display=\"flex\" maxWidth=\"300px\">\n        <Box flexGrow={1} fontSize={2} fontWeight=\"bold\" id=\"switchLabel\">\n          Notifications\n        </Box>\n        <ToggleSwitch\n          onClick={onClick}\n          onChange={handleSwitchChange}\n          checked={isOn}\n          aria-labelledby=\"switchLabel\"\n        />\n      </Box>\n      <p>The switch is {isOn ? 'on' : 'off'}</p>\n    </>\n  )\n}"
+          "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",
@@ -8005,11 +7884,35 @@
           "defaultValue": "'start'",
           "description": "Whether the \"on\" and \"off\" labels should appear before or after the switch.\n\n**This should only be changed when the switch's alignment needs to be adjusted.** For example: It needs to be left-aligned because the label appears above it and the caption appears below it."
         },
+        {
+          "name": "loadingLabelDelay",
+          "type": "number",
+          "defaultValue": "2000",
+          "description": "When the switch is in the loading state, this value controls the amount of delay in milliseconds before the word \"Loading\" is announced to screen readers."
+        },
+        {
+          "name": "loadingLabel",
+          "type": "string",
+          "defaultValue": "'Loading'",
+          "description": "The text that is announced to AT such as screen readers when the switch is in a loading state."
+        },
         {
           "name": "buttonType",
           "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": []
@@ -8019,7 +7922,7 @@
       "id": "token",
       "name": "Token",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-token--default",
@@ -8027,7 +7930,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",
@@ -8035,7 +7938,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",
@@ -8043,11 +7946,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",
@@ -8063,7 +7966,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",
@@ -8166,56 +8069,6 @@
               "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
-            }
-          ]
         }
       ]
     },
@@ -8229,15 +8082,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",
@@ -8281,44 +8134,44 @@
       "name": "Tooltip",
       "docsId": "tooltip",
       "status": "beta",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "importPath": "@primer/react/next",
       "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": [
@@ -8358,7 +8211,7 @@
       "id": "tree_view",
       "name": "TreeView",
       "status": "beta",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-treeview--default",
@@ -8386,7 +8239,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",
@@ -8475,6 +8328,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",
@@ -8593,7 +8451,7 @@
       "id": "truncate",
       "name": "Truncate",
       "status": "alpha",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-truncate--default",
@@ -8650,7 +8508,7 @@
       "id": "underline_nav",
       "name": "UnderlineNav",
       "status": "beta",
-      "a11yReviewed": true,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "components-underlinenav-features--default",
@@ -8707,11 +8565,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": [
@@ -8752,11 +8605,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -8798,7 +8646,7 @@
       "id": "legacy_underline_nav",
       "name": "UnderlineNav",
       "status": "deprecated",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "deprecated-components-underlinenav--default",
@@ -8830,11 +8678,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": [
@@ -8867,146 +8710,44 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/experimental/IssueLabel",
       "id": "issue_label",
       "name": "IssueLabel",
-      "status": "draft",
-      "a11yReviewed": false,
+      "status": "alpha",
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "experimental-components-issuelabel--default",
-          "code": "() => <IssueLabel text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-pink",
-          "code": "() => <IssueLabel variant=\"pink\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-plum",
-          "code": "() => <IssueLabel variant=\"plum\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-purple",
-          "code": "() => <IssueLabel variant=\"purple\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-indigo",
-          "code": "() => <IssueLabel variant=\"indigo\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-blue",
-          "code": "() => <IssueLabel variant=\"blue\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-cyan",
-          "code": "() => <IssueLabel variant=\"cyan\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-teal",
-          "code": "() => <IssueLabel variant=\"teal\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-pine",
-          "code": "() => <IssueLabel variant=\"pine\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-green",
-          "code": "() => <IssueLabel variant=\"green\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-lime",
-          "code": "() => <IssueLabel variant=\"lime\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-olive",
-          "code": "() => <IssueLabel variant=\"olive\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-lemon",
-          "code": "() => <IssueLabel variant=\"lemon\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-yellow",
-          "code": "() => <IssueLabel variant=\"yellow\" text=\"Issue label\" />"
+          "code": "() => <IssueLabel>Issue label</IssueLabel>"
         },
         {
-          "id": "experimental-components-issuelabel-features--variant-orange",
-          "code": "() => <IssueLabel variant=\"orange\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-red",
-          "code": "() => <IssueLabel variant=\"red\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-coral",
-          "code": "() => <IssueLabel variant=\"coral\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-gray",
-          "code": "() => <IssueLabel variant=\"gray\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-brown",
-          "code": "() => <IssueLabel variant=\"brown\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--variant-auburn",
-          "code": "() => <IssueLabel variant=\"auburn\" text=\"Issue label\" />"
+          "id": "experimental-components-issuelabel-features--group-of-labels",
+          "code": "() => (\n  <Stack direction=\"horizontal\" gap=\"condensed\" wrap=\"wrap\">\n    <IssueLabel variant=\"blue\">Issue label</IssueLabel>\n    <IssueLabel variant=\"purple\">Another label</IssueLabel>\n    <IssueLabel variant=\"green\">A third label</IssueLabel>\n    <IssueLabel variant=\"orange\">Issue label</IssueLabel>\n    <IssueLabel variant=\"yellow\">Another label</IssueLabel>\n    <IssueLabel variant=\"brown\">A third label</IssueLabel>\n  </Stack>\n)"
         },
         {
           "id": "experimental-components-issuelabel-features--hex-color",
-          "code": "(args: { fillColor: `#${string}` }) => (\n  <IssueLabel text=\"Issue label\" fillColor={args.fillColor} />\n)"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--as-link",
-          "code": "() => <IssueLabel href=\"/\" text=\"Issue label\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--as-button",
-          "code": "() => <IssueLabel text=\"Issue label\" as=\"button\" />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--on-click",
-          "code": "() => <IssueLabel text=\"Issue label\" onClick={() => alert('clicked')} />"
-        },
-        {
-          "id": "experimental-components-issuelabel-features--group-of-labels",
-          "code": "() => (\n  <Stack direction=\"horizontal\" gap=\"condensed\" wrap=\"wrap\">\n    <IssueLabel variant=\"blue\" text=\"Issue label\" />\n    <IssueLabel variant=\"purple\" text=\"Another label\" />\n    <IssueLabel variant=\"green\" text=\"A third label\" />\n    <IssueLabel variant=\"orange\" text=\"Issue label\" />\n    <IssueLabel variant=\"yellow\" text=\"Another label\" />\n    <IssueLabel variant=\"brown\" text=\"A third label\" />\n  </Stack>\n)"
+          "code": "(args: { fillColor: `#${string}` }) => {\n  return <IssueLabel fillColor={args.fillColor}>Issue label</IssueLabel>\n}"
         }
       ],
       "importPath": "@primer/react/experimental",
       "props": [
         {
-          "name": "fillColor",
-          "type": "string",
-          "description": "The hex code for a custom background color"
-        },
-        {
-          "name": "variant",
-          "type": "'pink'\n| 'plum'\n| 'purple'\n| 'indigo'\n| 'blue'\n| 'cyan'\n| 'teal'\n| 'pine'\n| 'green'\n| 'lime'\n| 'olive'\n| 'lemon'\n| 'yellow'\n| 'orange'\n| 'red'\n| 'coral'\n| 'gray'\n| 'brown'\n| 'auburn'",
-          "defaultValue": "'gray'",
-          "description": "Color variant for the background and text color"
+          "name": "as",
+          "type": "React.ElementType",
+          "description": "The HTML element or React component to render as the root element"
         },
         {
           "name": "className",
           "type": "string",
-          "description": "Class name for custom styling."
-        },
-        {
-          "name": "href",
-          "type": "string"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "'span'"
+          "description": "Class name for custom styling"
         },
         {
-          "name": "text",
+          "name": "fillColor",
           "type": "string",
-          "description": "Label text."
+          "description": "The hex code for a custom background color"
         },
         {
-          "name": "id",
-          "type": "string",
-          "description": "A unique identifier that can be associated with the label."
+          "name": "variant",
+          "type": "'pink'\n| 'plum'\n| 'purple'\n| 'indigo'\n| 'blue'\n| 'cyan'\n| 'teal'\n| 'pine'\n| 'green'\n| 'lime'\n| 'olive'\n| 'lemon'\n| 'yellow'\n| 'orange'\n| 'red'\n| 'coral'\n| 'gray'\n| 'brown'\n| 'auburn'",
+          "defaultValue": "'gray'",
+          "description": "Color variant for the background and text color"
         }
       ],
       "subcomponents": []
@@ -9021,7 +8762,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",
@@ -9029,7 +8770,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\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          <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",
@@ -9037,7 +8778,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",
@@ -9057,7 +8798,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              sx={{\n                fontWeight:\n                  selectedFilter === 'branches' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -9242,145 +8983,12 @@
         }
       ]
     },
-    "skeleton_avatar": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/experimental/Skeleton",
-      "id": "skeleton_avatar",
-      "name": "SkeletonAvatar",
-      "status": "draft",
-      "a11yReviewed": false,
-      "stories": [
-        {
-          "id": "experimental-components-skeleton-skeletonavatar--default",
-          "code": "() => <SkeletonAvatar />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletonavatar-features--square",
-          "code": "() => <SkeletonAvatar square />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletonavatar-features--size",
-          "code": "() => (\n  <div>\n    <SkeletonAvatar size={4} />\n    <SkeletonAvatar size={8} />\n    <SkeletonAvatar size={12} />\n    <SkeletonAvatar size={16} />\n    <SkeletonAvatar size={20} />\n    <SkeletonAvatar size={24} />\n    <SkeletonAvatar size={28} />\n    <SkeletonAvatar size={32} />\n    <SkeletonAvatar size={40} />\n    <SkeletonAvatar size={48} />\n    <SkeletonAvatar size={56} />\n    <SkeletonAvatar size={64} />\n  </div>\n)"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletonavatar-features--size-responsive",
-          "code": "() => (\n  <div>\n    <SkeletonAvatar\n      size={{\n        narrow: 4,\n        regular: 8,\n        wide: 12,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 8,\n        regular: 12,\n        wide: 16,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 12,\n        regular: 16,\n        wide: 20,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 16,\n        regular: 20,\n        wide: 24,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 20,\n        regular: 24,\n        wide: 28,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 24,\n        regular: 28,\n        wide: 32,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 28,\n        regular: 32,\n        wide: 40,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 32,\n        regular: 40,\n        wide: 48,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 40,\n        regular: 48,\n        wide: 56,\n      }}\n    />\n    <SkeletonAvatar\n      size={{\n        narrow: 48,\n        regular: 56,\n        wide: 64,\n      }}\n    />\n  </div>\n)"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletonavatar-features--in-a-stack",
-          "code": "() => (\n  <AvatarStack>\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n  </AvatarStack>\n)"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletonavatar-features--in-an-avatar-pair",
-          "code": "() => (\n  <AvatarPair>\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n  </AvatarPair>\n)"
-        }
-      ],
-      "importPath": "@primer/react/experimental",
-      "props": [
-        {
-          "name": "size",
-          "type": "number | { narrow?: number; regular?: number; wide?: number; }",
-          "defaultValue": "20",
-          "description": "The size of the avatar in pixels."
-        },
-        {
-          "name": "square",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "If true, the avatar will be square instead of circular."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Class name for custom styling."
-        }
-      ],
-      "subcomponents": []
-    },
-    "skeleton_text": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/experimental/Skeleton",
-      "id": "skeleton_text",
-      "name": "SkeletonText",
-      "status": "draft",
-      "a11yReviewed": false,
-      "stories": [
-        {
-          "id": "experimental-components-skeleton-skeletontext--default",
-          "code": "() => <SkeletonText />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--with-max-width",
-          "code": "() => <SkeletonText maxWidth={200} />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--with-multiple-lines",
-          "code": "() => <SkeletonText lines={3} />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--display",
-          "code": "() => <SkeletonText size=\"display\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--subtitle",
-          "code": "() => <SkeletonText size=\"subtitle\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--title-large",
-          "code": "() => <SkeletonText size=\"titleLarge\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--title-medium",
-          "code": "() => <SkeletonText size=\"titleMedium\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--title-small",
-          "code": "() => <SkeletonText size=\"titleSmall\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--body-large",
-          "code": "() => <SkeletonText size=\"bodyLarge\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--body-medium",
-          "code": "() => <SkeletonText size=\"bodyMedium\" />"
-        },
-        {
-          "id": "experimental-components-skeleton-skeletontext-features--body-small",
-          "code": "() => <SkeletonText size=\"bodySmall\" />"
-        }
-      ],
-      "importPath": "@primer/react/experimental",
-      "props": [
-        {
-          "name": "size",
-          "defaultValue": "'bodyMedium'",
-          "type": "'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle'",
-          "description": "Size of the text that the skeleton is replacing."
-        },
-        {
-          "name": "lines",
-          "defaultValue": "1",
-          "type": "number",
-          "description": "Number of lines of skeleton text to render."
-        },
-        {
-          "name": "maxWidth",
-          "type": "string",
-          "description": "Maximum width that the line(s) of skeleton text can take up.  Accepts any valid CSS `max-width` value."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Class name for custom styling."
-        }
-      ],
-      "subcomponents": []
-    },
     "underline_panels": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/experimental/UnderlinePanels",
       "id": "underline_panels",
       "name": "UnderlinePanels",
       "status": "draft",
-      "a11yReviewed": false,
+      "a11yReviewed": "2025-01-08",
       "stories": [
         {
           "id": "experimental-components-underlinepanels--default",