@primer/react 37.32.0-rc.cd2a373fc → 37.32.0-rc.e125d74fc

package/generated/components.json

@@ -989,7 +989,7 @@
       "stories": [
         {
           "id": "components-autocomplete--default",
-          "code": "() => {\n  return (\n    <Box\n      as=\"form\"\n      sx={{\n        p: 3,\n      }}\n      onSubmit={(event) => event.preventDefault()}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-default\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-default\"\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form\n      className={classes.DefaultForm}\n      onSubmit={(event) => event.preventDefault()}\n    >\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel-default\">\n          Label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              selectedItemIds={[]}\n              aria-labelledby=\"autocompleteLabel-default\"\n              items={items}\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--with-token-input",
@@ -1218,42 +1218,6 @@
       ],
       "subcomponents": []
     },
-    "avatar_pair": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/AvatarPair",
-      "id": "avatar_pair",
-      "name": "AvatarPair",
-      "status": "alpha",
-      "a11yReviewed": "2025-01-08",
-      "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",
@@ -2197,19 +2161,19 @@
         },
         {
           "id": "components-checkbox-features--with-leading-visual",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl>\n        <FormControl.LeadingVisual>\n          <MarkGithubIcon />\n        </FormControl.LeadingVisual>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--disabled",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl disabled>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl disabled>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--with-caption",
-          "code": "() => {\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <form>\n      <FormControl>\n        <Checkbox value=\"default\" />\n        <FormControl.Label>Default label</FormControl.Label>\n        <FormControl.Caption>This is a caption</FormControl.Caption>\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-checkbox-features--indeterminate",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <Checkbox value=\"default\" indeterminate />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <Checkbox value=\"default\" indeterminate />\n      <FormControl.Label>Default label</FormControl.Label>\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6211,7 +6175,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",
@@ -6370,51 +6334,51 @@
       "stories": [
         {
           "id": "components-select--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-option-groups",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.OptGroup label=\"Group one\">\n          <Select.Option value=\"one\">Choice one</Select.Option>\n          <Select.Option value=\"two\">Choice two</Select.Option>\n          <Select.Option value=\"three\">Choice three</Select.Option>\n          <Select.Option value=\"four\">Choice four</Select.Option>\n        </Select.OptGroup>\n        <Select.OptGroup disabled label=\"Group two\">\n          <Select.Option value=\"five\">Choice five</Select.Option>\n          <Select.Option value=\"six\">Choice six</Select.Option>\n        </Select.OptGroup>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.OptGroup label=\"Group one\">\n          <Select.Option value=\"one\">Choice one</Select.Option>\n          <Select.Option value=\"two\">Choice two</Select.Option>\n          <Select.Option value=\"three\">Choice three</Select.Option>\n          <Select.Option value=\"four\">Choice four</Select.Option>\n        </Select.OptGroup>\n        <Select.OptGroup disabled label=\"Group two\">\n          <Select.Option value=\"five\">Choice five</Select.Option>\n          <Select.Option value=\"six\">Choice six</Select.Option>\n        </Select.OptGroup>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl disabled>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl disabled>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select block>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select block>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--small",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"small\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"small\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--large",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"large\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select size=\"large\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-custom-styling",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select\n        sx={{\n          borderRadius: '12px',\n          border: '1px dashed #000000',\n        }}\n      >\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select className={classes.CustomSelect}>\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-select-features--with-placeholder-option",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select placeholder=\"No choice selected\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Select placeholder=\"No choice selected\">\n        <Select.Option value=\"one\">Choice one</Select.Option>\n        <Select.Option value=\"two\">Choice two</Select.Option>\n        <Select.Option value=\"three\">Choice three</Select.Option>\n        <Select.Option value=\"four\">Choice four</Select.Option>\n        <Select.Option value=\"five\">Choice five</Select.Option>\n        <Select.Option value=\"six\">Choice six</Select.Option>\n      </Select>\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6748,10 +6712,6 @@
         {
           "id": "components-skeleton-skeletonavatar-features--in-a-stack",
           "code": "() => (\n  <AvatarStack>\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n  </AvatarStack>\n)"
-        },
-        {
-          "id": "components-skeleton-skeletonavatar-features--in-an-avatar-pair",
-          "code": "() => (\n  <AvatarPair>\n    <SkeletonAvatar />\n    <SkeletonAvatar />\n  </AvatarPair>\n)"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -6876,7 +6836,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",
@@ -6929,7 +6889,7 @@
         },
         {
           "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",
@@ -7459,11 +7419,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",
@@ -7530,67 +7490,67 @@
       "stories": [
         {
           "id": "components-textinput--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput disabled />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput disabled />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <TextInput />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <TextInput />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <TextInput />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"success\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput />\n      <FormControl.Validation variant=\"success\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput block />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput block />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--small",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"small\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"small\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--large",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--required",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl required>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl required>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInput size=\"large\" />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textinput-features--with-leading-visual",
-          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput leadingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput leadingVisual=\"$\" />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput leadingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput leadingVisual=\"$\" />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-trailing-icon",
-          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <Box>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput trailingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const Checkmark = () => <CheckIcon aria-label=\"Checkmark\" />\n  return (\n    <div>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput trailingVisual={Checkmark} />\n      </FormControl>\n      <FormControl>\n        <FormControl.Label>Enter monies</FormControl.Label>\n        <TextInput trailingVisual=\"minutes\" placeholder=\"200\" />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-trailing-action",
-          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-tooltip-direction",
-          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <Box as=\"form\">\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                  tooltipDirection=\"nw\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </Box>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = useState('sample text')\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInput\n          value={value}\n          onChange={handleChange}\n          trailingAction={\n            <Stack\n              justify=\"center\"\n              style={{\n                minWidth: '34px',\n              }}\n            >\n              {value.length ? (\n                <TextInput.Action\n                  onClick={() => setValue('')}\n                  icon={XCircleFillIcon}\n                  aria-label=\"Clear input\"\n                  tooltipDirection=\"nw\"\n                />\n              ) : undefined}\n            </Stack>\n          }\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-loading-indicator",
-          "code": "(args: FormControlArgs<TextInputProps>) => {\n  return (\n    <Box as=\"form\">\n      <h3>No visual</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"auto\" {...args} />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n        </FormControl>\n      </Box>\n      <Box mb={5}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n        </FormControl>\n      </Box>\n\n      <h3>Leading visual</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={5}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </Box>\n\n      <h3>Trailing visual</h3>\n      <FormControl>\n        <Box mb={2}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n          </FormControl>\n        </Box>\n        <Box mb={2}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"leading\"\n              value=\"leading\"\n            />\n          </FormControl>\n        </Box>\n        <Box mb={5}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"trailing\"\n              value=\"trailing\"\n            />\n          </FormControl>\n        </Box>\n      </FormControl>\n\n      <h3>Both visuals</h3>\n\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"small\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            value=\"auto\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </Box>\n      <Box mb={2}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"large\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </Box>\n    </Box>\n  )\n}"
+          "code": "(args: FormControlArgs<TextInputProps>) => {\n  return (\n    <div>\n      <h3>No visual</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"auto\" {...args} />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"leading\" {...args} loaderPosition=\"leading\" />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottomLarge}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput value=\"trailing\" {...args} loaderPosition=\"trailing\" />\n        </FormControl>\n      </div>\n\n      <h3>Leading visual</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput leadingVisual={Calendar} {...args} value=\"auto\" />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottomLarge}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </div>\n\n      <h3>Trailing visual</h3>\n      <FormControl>\n        <div className={classes.MarginBottom}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput trailingVisual={Calendar} {...args} value=\"auto\" />\n          </FormControl>\n        </div>\n        <div className={classes.MarginBottom}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"leading\"\n              value=\"leading\"\n            />\n          </FormControl>\n        </div>\n        <div className={classes.MarginBottomLarge}>\n          <FormControl>\n            <FormControl.Label>Default label</FormControl.Label>\n            <TextInput\n              trailingVisual={Calendar}\n              {...args}\n              loaderPosition=\"trailing\"\n              value=\"trailing\"\n            />\n          </FormControl>\n        </div>\n      </FormControl>\n\n      <h3>Both visuals</h3>\n\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"small\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            value=\"auto\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"leading\"\n            value=\"leading\"\n          />\n        </FormControl>\n      </div>\n      <div className={classes.MarginBottom}>\n        <FormControl>\n          <FormControl.Label>Default label</FormControl.Label>\n          <TextInput\n            size=\"large\"\n            leadingVisual={Calendar}\n            trailingVisual={Calendar}\n            {...args}\n            loaderPosition=\"trailing\"\n            value=\"trailing\"\n          />\n        </FormControl>\n      </div>\n    </div>\n  )\n}"
         },
         {
           "id": "components-textinput-features--with-autocomplete-attribute",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>First name</FormControl.Label>\n      <TextInput autoComplete=\"given-name\" />\n    </FormControl>\n    <FormControl>\n      <FormControl.Label>Last name</FormControl.Label>\n      <TextInput autoComplete=\"family-name\" />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>First name</FormControl.Label>\n      <TextInput autoComplete=\"given-name\" />\n    </FormControl>\n    <FormControl>\n      <FormControl.Label>Last name</FormControl.Label>\n      <TextInput autoComplete=\"family-name\" />\n    </FormControl>\n  </form>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -7790,31 +7750,31 @@
         },
         {
           "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}"
+          "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}"
+          "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}"
+          "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}"
+          "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}"
+          "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}"
+          "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}"
+          "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",
@@ -7891,39 +7851,39 @@
       "stories": [
         {
           "id": "components-textarea--default",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--disabled",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea disabled />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea disabled />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--with-caption",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Textarea />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <FormControl.Caption>This is a caption</FormControl.Caption>\n      <Textarea />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--visually-hidden-label",
-          "code": "() => (\n  <Box as=\"form\">\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Textarea />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <Heading as=\"h2\" variant=\"small\">\n      Primer form title\n    </Heading>\n    <FormControl>\n      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>\n      <Textarea />\n      <FormControl.Caption>\n        Label is visually hidden; the title describes the purpose visually\n      </FormControl.Caption>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--error",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"error\">\n        Something went wrong\n      </FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--success",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea />\n      <FormControl.Validation variant=\"success\">Success</FormControl.Validation>\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--block",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea block />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea block />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-height",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea rows={3} />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea rows={3} />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-width",
-          "code": "() => (\n  <Box as=\"form\">\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea cols={60} />\n    </FormControl>\n  </Box>\n)"
+          "code": "() => (\n  <form>\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <Textarea cols={60} />\n    </FormControl>\n  </form>\n)"
         },
         {
           "id": "components-textarea-features--custom-resize-behavior",
@@ -8236,7 +8196,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",
@@ -8244,7 +8204,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",
@@ -8252,11 +8212,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",
@@ -8272,7 +8232,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",
@@ -8438,15 +8398,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",
@@ -8495,39 +8455,39 @@
       "stories": [
         {
           "id": "components-tooltipv2--default",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 6,\n    }}\n  >\n    <Tooltip text=\"This change can't be undone.\">\n      <Button>Delete</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"This change can't be undone.\">\n      <Button>Delete</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--anchor-has-margin",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip text=\"Tooltip is still centered\">\n      <Button\n        sx={{\n          marginLeft: 3,\n        }}\n      >\n        Button has 16px margin Left\n      </Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"Tooltip is still centered\">\n      <Button className={classes.MarginLeftButton}>\n        Button has 16px margin Left\n      </Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--label-type",
-          "code": "() => (\n  <Box>\n    <Tooltip text=\"Contribution Documentation for 'Primer React'\" type=\"label\">\n      <Link\n        href=\"https://github.com/primer/react/contributor-docs/CONTRIBUTING.md\"\n        sx={{\n          ml: 1,\n          color: 'fg.muted',\n        }}\n      >\n        <Octicon\n          icon={BookIcon}\n          sx={{\n            color: 'fg.muted',\n          }}\n        />\n      </Link>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Tooltip text=\"Contribution Documentation for 'Primer React'\" type=\"label\">\n      <Link\n        href=\"https://github.com/primer/react/contributor-docs/CONTRIBUTING.md\"\n        className={classes.LabelLink}\n      >\n        <Octicon icon={BookIcon} className={classes.LabelIcon} />\n      </Link>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--description-type",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip text=\"Supplementary text\" direction=\"n\">\n      <Button>Save</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"Supplementary text\" direction=\"n\">\n      <Button>Save</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--icon-button-with-description",
-          "code": "() => (\n  <Box\n    sx={{\n      p: 5,\n    }}\n  >\n    <Tooltip text=\"Supplementary text for icon button\" direction=\"e\">\n      <IconButton icon={SearchIcon} aria-label=\"Search\" />\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.PaddedContainer}>\n    <Tooltip text=\"Supplementary text for icon button\" direction=\"e\">\n      <IconButton icon={SearchIcon} aria-label=\"Search\" />\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--all-directions",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 5,\n      display: 'flex',\n      gap: '8px',\n    }}\n  >\n    <Tooltip direction=\"n\" text=\"Supplementary text\">\n      <Button>North</Button>\n    </Tooltip>\n    <Tooltip direction=\"s\" text=\"Supplementary text\">\n      <Button>South</Button>\n    </Tooltip>\n    <Tooltip direction=\"e\" text=\"Supplementary text\">\n      <Button>East</Button>\n    </Tooltip>\n    <Tooltip direction=\"w\" text=\"Supplementary text\">\n      <Button>West</Button>\n    </Tooltip>\n    <Tooltip direction=\"ne\" text=\"Supplementary text\">\n      <Button>North East</Button>\n    </Tooltip>\n    <Tooltip direction=\"nw\" text=\"Supplementary text\">\n      <Button>North West</Button>\n    </Tooltip>\n    <Tooltip direction=\"se\" text=\"Supplementary text\">\n      <Button>Southeast</Button>\n    </Tooltip>\n    <Tooltip direction=\"sw\" text=\"Supplementary text\">\n      <Button>Southwest</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.AllDirectionsRow}>\n    <Tooltip direction=\"n\" text=\"Supplementary text\">\n      <Button>North</Button>\n    </Tooltip>\n    <Tooltip direction=\"s\" text=\"Supplementary text\">\n      <Button>South</Button>\n    </Tooltip>\n    <Tooltip direction=\"e\" text=\"Supplementary text\">\n      <Button>East</Button>\n    </Tooltip>\n    <Tooltip direction=\"w\" text=\"Supplementary text\">\n      <Button>West</Button>\n    </Tooltip>\n    <Tooltip direction=\"ne\" text=\"Supplementary text\">\n      <Button>North East</Button>\n    </Tooltip>\n    <Tooltip direction=\"nw\" text=\"Supplementary text\">\n      <Button>North West</Button>\n    </Tooltip>\n    <Tooltip direction=\"se\" text=\"Supplementary text\">\n      <Button>Southeast</Button>\n    </Tooltip>\n    <Tooltip direction=\"sw\" text=\"Supplementary text\">\n      <Button>Southwest</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--multiline-text",
-          "code": "() => (\n  <Box>\n    <Tooltip\n      direction=\"e\"\n      text=\"Random long text that needs to be wrapped and be multipline and have some paddings around\"\n    >\n      <Button>Multiline East</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Tooltip\n      direction=\"e\"\n      text=\"Random long text that needs to be wrapped and be multipline and have some paddings around\"\n    >\n      <Button>Multiline East</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--calculated-direction",
-          "code": "() => (\n  <Box\n    sx={{\n      padding: 5,\n      display: 'flex',\n      gap: '8px',\n    }}\n  >\n    <Tooltip\n      direction=\"w\"\n      text=\"But appears in the east direction due to not having enough space in the west\"\n    >\n      <Button>West</Button>\n    </Tooltip>\n\n    <Tooltip text=\"The direction here is north by default but there is not enough space in the north therefore the tooltip appears in the south\">\n      <Button>North</Button>\n    </Tooltip>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.AllDirectionsRow}>\n    <Tooltip\n      direction=\"w\"\n      text=\"But appears in the east direction due to not having enough space in the west\"\n    >\n      <Button>West</Button>\n    </Tooltip>\n\n    <Tooltip text=\"The direction here is north by default but there is not enough space in the north therefore the tooltip appears in the south\">\n      <Button>North</Button>\n    </Tooltip>\n  </div>\n)"
         },
         {
           "id": "components-tooltipv2-features--on-action-menu-anchor",
-          "code": "() => (\n  <Box\n    sx={{\n      display: 'flex',\n      padding: 5,\n      gap: 2,\n    }}\n  >\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n          <Button\n            leadingVisual={GitBranchIcon}\n            trailingAction={TriangleDownIcon}\n          >\n            ActionMenu.Anchor w/ t\n          </Button>\n        </Tooltip>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n        <ActionMenu.Button leadingVisual={GitBranchIcon}>\n          ActionMenu.Button w/ t\n        </ActionMenu.Button>\n      </Tooltip>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Button leadingVisual={GitBranchIcon} trailingAction={TriangleDownIcon}>\n          ActionMenu.Anchor\n        </Button>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Button leadingVisual={GitBranchIcon}>\n        ActionMenu.Button\n      </ActionMenu.Button>\n\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  </Box>\n)"
+          "code": "() => (\n  <div className={classes.ActionMenuRow}>\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n          <Button\n            leadingVisual={GitBranchIcon}\n            trailingAction={TriangleDownIcon}\n          >\n            ActionMenu.Anchor w/ t\n          </Button>\n        </Tooltip>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <Tooltip text=\"Supplementary text to add here\" direction=\"n\">\n        <ActionMenu.Button leadingVisual={GitBranchIcon}>\n          ActionMenu.Button w/ t\n        </ActionMenu.Button>\n      </Tooltip>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Anchor>\n        <Button leadingVisual={GitBranchIcon} trailingAction={TriangleDownIcon}>\n          ActionMenu.Anchor\n        </Button>\n      </ActionMenu.Anchor>\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <ActionMenu>\n      <ActionMenu.Button leadingVisual={GitBranchIcon}>\n        ActionMenu.Button\n      </ActionMenu.Button>\n\n      <ActionMenu.Overlay width=\"medium\">\n        <ActionList>\n          <ActionList.Item onSelect={() => alert('Main')}>\n            <ActionList.LeadingVisual>\n              <CheckIcon />\n            </ActionList.LeadingVisual>\n            main <ActionList.TrailingVisual>default</ActionList.TrailingVisual>\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 1')}>\n            branch-1\n          </ActionList.Item>\n          <ActionList.Item onSelect={() => alert('Branch 2')}>\n            branch-2\n          </ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  </div>\n)"
         }
       ],
       "props": [
@@ -8595,7 +8555,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",
@@ -8975,6 +8935,42 @@
         }
       ]
     },
+    "avatar_pair": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/AvatarPair",
+      "id": "avatar_pair",
+      "name": "AvatarPair",
+      "status": "alpha",
+      "a11yReviewed": "2025-01-08",
+      "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": []
+    },
     "filtered_search": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/FilteredSearch",
       "id": "filtered_search",