@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.1

package/generated/components.json

@@ -796,7 +796,7 @@
       "stories": [
         {
           "id": "components-anchoredoverlay--default",
-          "code": "() => {\n  const [open, setOpen] = useState(false)\n  return (\n    <AnchoredOverlay\n      open={open}\n      onOpen={() => setOpen(true)}\n      onClose={() => setOpen(false)}\n      renderAnchor={(props) => <Button {...props}>Button</Button>}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        sx: {\n          minWidth: '320px',\n        },\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      {hoverCard}\n    </AnchoredOverlay>\n  )\n}"
+          "code": "() => {\n  const [open, setOpen] = useState(false)\n  return (\n    <AnchoredOverlay\n      open={open}\n      onOpen={() => setOpen(true)}\n      onClose={() => setOpen(false)}\n      renderAnchor={(props) => <Button {...props}>Button</Button>}\n      overlayProps={{\n        role: 'dialog',\n        'aria-modal': true,\n        'aria-label': 'User Card Overlay',\n        style: {\n          minWidth: '320px',\n        },\n      }}\n      focusZoneSettings={{\n        disabled: true,\n      }}\n      preventOverflow={false}\n    >\n      {hoverCard}\n    </AnchoredOverlay>\n  )\n}"
         },
         {
           "id": "components-anchoredoverlay-features--portal-inside-scrolling-element",
@@ -989,7 +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",
@@ -2161,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",
@@ -2440,11 +2440,11 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
       "id": "circle_octicon",
       "name": "CircleOcticon",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-circleocticon--default",
+          "id": "deprecated-components-circleocticon--default",
           "code": "() => (\n  <CircleOcticon\n    icon={CheckIcon}\n    size={32}\n    sx={{\n      backgroundColor: 'success.emphasis',\n      color: 'fg.onEmphasis',\n    }}\n    aria-label=\"Changes approved\"\n  />\n)"
         }
       ],
@@ -2488,6 +2488,10 @@
         {
           "id": "components-confirmationdialog-features--shorthand-hook-from-action-menu",
           "code": "() => {\n  const confirm = useConfirm()\n  const [text, setText] = useState('open me')\n  const onButtonClick = useCallback(async () => {\n    if (\n      await confirm({\n        title: 'Are you sure?',\n        content: 'Do you really want to do a trick?',\n      })\n    ) {\n      setText('tada!')\n    }\n  }, [confirm])\n  return (\n    <div className={classes.ButtonContainer}>\n      <ActionMenu>\n        <ActionMenu.Button>{text}</ActionMenu.Button>\n        <ActionMenu.Overlay>\n          <ActionList>\n            <ActionList.Item onSelect={onButtonClick}>\n              Do a trick!\n            </ActionList.Item>\n          </ActionList>\n        </ActionMenu.Overlay>\n      </ActionMenu>\n    </div>\n  )\n}"
+        },
+        {
+          "id": "components-confirmationdialog-features--loading-states",
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [isConfirmLoading, setIsConfirmLoading] = useState(false)\n  const [isCancelLoading, setIsCancelLoading] = useState(false)\n  const handleConfirm = useCallback(() => {\n    setIsConfirmLoading(true)\n    // Simulate async operation\n    setTimeout(() => {\n      setIsConfirmLoading(false)\n      setIsOpen(false)\n    }, 2000)\n  }, [])\n  const handleCancel = useCallback(() => {\n    setIsCancelLoading(true)\n    // Simulate async operation\n    setTimeout(() => {\n      setIsCancelLoading(false)\n      setIsOpen(false)\n    }, 1500)\n  }, [])\n  const handleClose = useCallback(\n    (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => {\n      if (gesture === 'confirm') {\n        handleConfirm()\n      } else if (gesture === 'cancel') {\n        handleCancel()\n      } else {\n        setIsOpen(false)\n      }\n    },\n    [handleConfirm, handleCancel],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={() => setIsOpen(true)}>Show Loading Dialog</Button>\n      {isOpen && (\n        <ConfirmationDialog\n          title=\"Delete this file?\"\n          confirmButtonType=\"danger\"\n          confirmButtonContent=\"Delete\"\n          confirmButtonLoading={isConfirmLoading}\n          cancelButtonLoading={isCancelLoading}\n          onClose={handleClose}\n        >\n          This action cannot be undone. The file will be permanently deleted\n          from your repository.\n        </ConfirmationDialog>\n      )}\n    </div>\n  )\n}"
         }
       ],
       "props": [
@@ -4440,7 +4444,7 @@
       "stories": [
         {
           "id": "private-components-overlay--default",
-          "code": "(args: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <Box ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n        }}\n      >\n        Open overlay\n      </Button>\n      {isOpen || args.open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"large\"\n          anchorSide=\"inside-right\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Sample overlay\"\n          ref={containerRef}\n        >\n          <Box\n            sx={{\n              height: '100vh',\n              maxWidth: 'calc(-1rem + 100vw)',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <IconButton\n              aria-label=\"Close\"\n              onClick={closeOverlay}\n              icon={XIcon}\n              variant=\"invisible\"\n              sx={{\n                position: 'absolute',\n                left: '5px',\n                top: '5px',\n              }}\n            />\n            <Text>Look! an overlay</Text>\n          </Box>\n        </Overlay>\n      ) : null}\n    </Box>\n  )\n}"
+          "code": "(args: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n        }}\n      >\n        Open overlay\n      </Button>\n      {isOpen || args.open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"large\"\n          anchorSide=\"inside-right\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Sample overlay\"\n          ref={containerRef}\n        >\n          <div className={classes.FullHeightContent}>\n            <IconButton\n              aria-label=\"Close\"\n              onClick={closeOverlay}\n              icon={XIcon}\n              variant=\"invisible\"\n              className={classes.CloseButtonOverlay}\n            />\n            <Text>Look! an overlay</Text>\n          </div>\n        </Overlay>\n      ) : null}\n    </div>\n  )\n}"
         },
         {
           "id": "private-components-overlay-features--dialog-overlay",
@@ -5661,15 +5665,15 @@
         },
         {
           "id": "components-progressbar-features--inline",
-          "code": "() => (\n  <ProgressBar\n    inline\n    progress=\"66\"\n    sx={{\n      width: '100px',\n    }}\n    aria-label=\"Upload test.png\"\n  />\n)"
+          "code": "() => (\n  <ProgressBar\n    inline\n    progress=\"66\"\n    style={{\n      width: '100px',\n    }}\n    aria-label=\"Upload test.png\"\n  />\n)"
         },
         {
-          "id": "components-progressbar-features--color",
-          "code": "() => (\n  <ProgressBar progress=\"66\" bg=\"done.emphasis\" aria-label=\"Upload test.png\" />\n)"
+          "id": "components-progressbar-features--all-colors",
+          "code": "() => (\n  <ProgressBar aria-label=\"Upload test.png\">\n    <ProgressBar.Item\n      progress={20}\n      aria-label=\"Photo Usage\"\n      bg=\"accent.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={15}\n      aria-label=\"Application Usage\"\n      bg=\"danger.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={12}\n      aria-label=\"Music Usage\"\n      bg=\"severe.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={11}\n      aria-label=\"Music Usage\"\n      bg=\"done.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={8}\n      aria-label=\"Music Usage\"\n      bg=\"sponsors.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={7}\n      aria-label=\"Music Usage\"\n      bg=\"neutral.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={7}\n      aria-label=\"Music Usage\"\n      bg=\"attention.emphasis\"\n    />\n  </ProgressBar>\n)"
         },
         {
           "id": "components-progressbar-features--multiple-items",
-          "code": "() => (\n  <ProgressBar>\n    <ProgressBar.Item\n      progress={33}\n      aria-label=\"Photo Usage\"\n      sx={{\n        bg: 'accent.emphasis',\n      }}\n    />\n    <ProgressBar.Item\n      progress={23}\n      aria-label=\"Application Usage\"\n      bg={'danger.emphasis'}\n    />\n    <ProgressBar.Item\n      progress={14}\n      aria-label=\"Music Usage\"\n      bg={'severe.emphasis'}\n    />\n  </ProgressBar>\n)"
+          "code": "() => (\n  <ProgressBar>\n    <ProgressBar.Item\n      progress={33}\n      aria-label=\"Photo Usage\"\n      bg=\"accent.emphasis\"\n    />\n    <ProgressBar.Item\n      progress={23}\n      aria-label=\"Application Usage\"\n      bg={'danger.emphasis'}\n    />\n    <ProgressBar.Item\n      progress={14}\n      aria-label=\"Music Usage\"\n      bg={'severe.emphasis'}\n    />\n  </ProgressBar>\n)"
         },
         {
           "id": "components-progressbar-features--animated",
@@ -6175,7 +6179,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",
@@ -6334,51 +6338,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",
@@ -6836,7 +6840,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",
@@ -6889,15 +6893,14 @@
         },
         {
           "id": "components-splitpagelayout-features--settings-page",
-          "code": "() => (\n  <SplitPageLayout>\n    <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n      <NavList aria-label=\"Main navigation\">\n        <NavList.Item href=\"#\">Profile</NavList.Item>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Account\n        </NavList.Item>\n        <NavList.Item href=\"#\">Emails</NavList.Item>\n        <NavList.Item href=\"#\">Notifications</NavList.Item>\n      </NavList>\n    </SplitPageLayout.Pane>\n    <SplitPageLayout.Content>\n      <Heading\n        as=\"h2\"\n        sx={{\n          fontSize: 4,\n          fontWeight: 'normal',\n          color: 'danger.fg',\n          mb: 2,\n        }}\n      >\n        Danger zone\n      </Heading>\n      <Box\n        sx={{\n          border: '1px solid',\n          borderColor: 'danger.emphasis',\n          borderRadius: 2,\n          p: 3,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 3,\n        }}\n      >\n        <Box\n          sx={{\n            display: 'grid',\n            gap: 1,\n          }}\n        >\n          <Text\n            sx={{\n              fontSize: 1,\n              fontWeight: 'bold',\n              color: 'danger.fg',\n            }}\n          >\n            Delete account\n          </Text>\n          <Text\n            sx={{\n              fontSize: 1,\n              color: 'fg.muted',\n            }}\n          >\n            Are you sure you don&apos;t want to just downgrade your account to a\n            free account? We won&apos;t charge your credit card anymore.\n          </Text>\n        </Box>\n        <Button variant=\"danger\">Delete account</Button>\n      </Box>\n    </SplitPageLayout.Content>\n  </SplitPageLayout>\n)"
+          "code": "() => (\n  <SplitPageLayout>\n    <SplitPageLayout.Pane position=\"start\" aria-label=\"Navigation Pane\">\n      <NavList aria-label=\"Main navigation\">\n        <NavList.Item href=\"#\">Profile</NavList.Item>\n        <NavList.Item href=\"#\" aria-current=\"page\">\n          Account\n        </NavList.Item>\n        <NavList.Item href=\"#\">Emails</NavList.Item>\n        <NavList.Item href=\"#\">Notifications</NavList.Item>\n      </NavList>\n    </SplitPageLayout.Pane>\n    <SplitPageLayout.Content>\n      <Heading as=\"h2\" className={classes.SectionHeading}>\n        Danger zone\n      </Heading>\n      <div className={classes.DeleteAccountContainer}>\n        <div className={classes.DeleteAccountTextContainer}>\n          <Text className={classes.DeleteAccountTitle}>Delete account</Text>\n          <Text className={classes.DeleteAccountDescription}>\n            Are you sure you don&apos;t want to just downgrade your account to a\n            free account? We won&apos;t charge your credit card anymore.\n          </Text>\n        </div>\n        <Button variant=\"danger\">Delete account</Button>\n      </div>\n    </SplitPageLayout.Content>\n  </SplitPageLayout>\n)"
         }
       ],
       "importPath": "@primer/react",
       "props": [
         {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
+          "name": "className",
+          "type": "string"
         }
       ],
       "subcomponents": [
@@ -6933,11 +6936,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the header is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -6973,11 +6971,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -7053,11 +7046,6 @@
               "type": "'end' | 'start' | {narrow?: 'end' | 'start', narrow?: 'end' | 'start', wide?: 'end' | 'start'}",
               "description": "Which side of the page the pane should be on. Can be changed for different viewport widths.",
               "defaultValue": "start"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -7093,11 +7081,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the footer is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -7249,11 +7232,6 @@
           "name": "status",
           "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'unavailable' | 'open' | 'closed'",
           "required": true
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -7419,11 +7397,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",
@@ -7490,67 +7468,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",
@@ -7750,31 +7728,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",
@@ -7851,39 +7829,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",
@@ -8196,7 +8174,7 @@
         },
         {
           "id": "components-token-features--interactive-token",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <Token as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--token-with-leading-visual",
@@ -8204,7 +8182,7 @@
         },
         {
           "id": "components-token-features--token-with-on-remove-fn",
-          "code": "({ ...args }) => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <Token text=\"token\" onRemove={action('remove me')} {...args} />\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n        {...args}\n      />\n      <Token\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n        {...args}\n      />\n    </Box>\n  )\n}"
+          "code": "({ ...args }) => {\n  return (\n    <div className={classes.TokenRow}>\n      <Token text=\"token\" onRemove={action('remove me')} {...args} />\n      <Token\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n        {...args}\n      />\n      <Token\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n        {...args}\n      />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--default-issue-label-token",
@@ -8212,11 +8190,11 @@
         },
         {
           "id": "components-token-features--interactive-issue-label-token",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        text=\"Link\"\n      />\n      <IssueLabelToken as=\"button\" onClick={action('clicked')} text=\"Button\" />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--issue-label-token-with-on-remove-fn",
-          "code": "() => {\n  return (\n    <Box\n      display=\"flex\"\n      sx={{\n        alignItems: 'start',\n        gap: get('space.2'),\n      }}\n    >\n      <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n      />\n      <IssueLabelToken\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n      />\n    </Box>\n  )\n}"
+          "code": "() => {\n  return (\n    <div className={classes.TokenRow}>\n      <IssueLabelToken text=\"token\" onRemove={action('remove me')} />\n      <IssueLabelToken\n        as=\"a\"\n        href=\"/?path=/story/components-token-features--issue-label-token-custom-colors\"\n        onRemove={action('remove me')}\n        text=\"Link\"\n      />\n      <IssueLabelToken\n        as=\"button\"\n        onClick={action('clicked')}\n        onRemove={action('remove me')}\n        text=\"Button\"\n      />\n    </div>\n  )\n}"
         },
         {
           "id": "components-token-features--small-token",
@@ -8232,7 +8210,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",
@@ -8335,56 +8313,6 @@
               "deprecated": true
             }
           ]
-        },
-        {
-          "name": "AvatarToken",
-          "props": [
-            {
-              "name": "avatarSrc",
-              "type": "string"
-            },
-            {
-              "name": "text",
-              "required": true,
-              "type": "string",
-              "description": "The text label inside the token"
-            },
-            {
-              "name": "as",
-              "type": "'button' | 'a' | 'span'",
-              "defaultValue": "'span'"
-            },
-            {
-              "name": "onRemove",
-              "type": "() => void",
-              "description": "The function that gets called when a user clicks the remove button, or keys `Backspace` or `Delete` when focused on the token"
-            },
-            {
-              "name": "hideRemoveButton",
-              "type": "boolean",
-              "description": "Whether the remove button should be rendered in the token"
-            },
-            {
-              "name": "isSelected",
-              "type": "boolean",
-              "description": "Whether the token is selected"
-            },
-            {
-              "name": "id",
-              "type": "number | string",
-              "description": "A unique identifier that can be associated with the token"
-            },
-            {
-              "name": "size",
-              "type": "'small' | 'medium' | 'large' | 'xlarge'",
-              "description": "Which size the token will be rendered at"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
         }
       ]
     },
@@ -8398,15 +8326,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",
@@ -8455,39 +8383,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": [
@@ -8555,7 +8483,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",
@@ -8935,42 +8863,6 @@
         }
       ]
     },
-    "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",
@@ -9035,11 +8927,6 @@
           "name": "aria-label",
           "type": "string",
           "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -9140,7 +9027,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-features--with-warning",
-          "code": "() => {\n  /* Selection */\n\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const MAX_LIMIT = 3\n  const onCollaboratorSelect = (colloratorId: string) => {\n    if (!selectedAssigneeIds.includes(colloratorId))\n      setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])\n    else\n      setSelectedAssigneeIds(\n        selectedAssigneeIds.filter((id) => id !== colloratorId),\n      )\n  }\n  const onClearSelection = () => setSelectedAssigneeIds([])\n  const onSubmit = () => {\n    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedAssigneeIds(initialAssigneeIds)\n  }\n\n  /* Filtering */\n  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredUsers(data.collaborators)\n    else {\n      setFilteredUsers(\n        data.collaborators\n          .map((collaborator) => {\n            if (collaborator.login.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                collaborator,\n              }\n            else if (collaborator.name.startsWith(query))\n              return {\n                priority: 2,\n                collaborator,\n              }\n            else if (collaborator.login.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                collaborator,\n              }\n            else if (collaborator.name.toLowerCase().includes(query))\n              return {\n                priority: 4,\n                collaborator,\n              }\n            else\n              return {\n                priority: -1,\n                collaborator,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.collaborator),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.assigneeIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n  return (\n    <>\n      <h1>SelectPanel with warning</h1>\n\n      <SelectPanel\n        title=\"Set assignees\"\n        description={`Select up to ${MAX_LIMIT} people`}\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          sx={{\n            width: '200px',\n            '[data-component=buttonContent]': {\n              justifyContent: 'start',\n            },\n          }}\n        >\n          Assignees\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            onChange={onSearchInputChange}\n            aria-label=\"Search\"\n          />\n        </SelectPanel.Header>\n\n        {selectedAssigneeIds.length >= MAX_LIMIT ? (\n          <SelectPanel.Message variant=\"warning\" size=\"inline\">\n            You have reached the limit of {MAX_LIMIT} assignees on your free\n            account. <Link href=\"/upgrade\">Upgrade your account.</Link>\n          </SelectPanel.Message>\n        ) : null}\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((collaborator) => (\n              <ActionList.Item\n                key={collaborator.id}\n                onSelect={() => onCollaboratorSelect(collaborator.id)}\n                selected={selectedAssigneeIds.includes(collaborator.id)}\n                disabled={\n                  selectedAssigneeIds.length >= MAX_LIMIT &&\n                  !selectedAssigneeIds.includes(collaborator.id)\n                }\n              >\n                <ActionList.LeadingVisual>\n                  <Avatar\n                    src={`https://github.com/${collaborator.login}.png`}\n                  />\n                </ActionList.LeadingVisual>\n                {collaborator.login}\n                <ActionList.Description>\n                  {collaborator.login}\n                </ActionList.Description>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  /* Selection */\n\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const MAX_LIMIT = 3\n  const onCollaboratorSelect = (colloratorId: string) => {\n    if (!selectedAssigneeIds.includes(colloratorId))\n      setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])\n    else\n      setSelectedAssigneeIds(\n        selectedAssigneeIds.filter((id) => id !== colloratorId),\n      )\n  }\n  const onClearSelection = () => setSelectedAssigneeIds([])\n  const onSubmit = () => {\n    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedAssigneeIds(initialAssigneeIds)\n  }\n\n  /* Filtering */\n  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredUsers(data.collaborators)\n    else {\n      setFilteredUsers(\n        data.collaborators\n          .map((collaborator) => {\n            if (collaborator.login.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                collaborator,\n              }\n            else if (collaborator.name.startsWith(query))\n              return {\n                priority: 2,\n                collaborator,\n              }\n            else if (collaborator.login.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                collaborator,\n              }\n            else if (collaborator.name.toLowerCase().includes(query))\n              return {\n                priority: 4,\n                collaborator,\n              }\n            else\n              return {\n                priority: -1,\n                collaborator,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.collaborator),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.assigneeIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n  return (\n    <>\n      <h1>SelectPanel with warning</h1>\n\n      <SelectPanel\n        title=\"Set assignees\"\n        description={`Select up to ${MAX_LIMIT} people`}\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          className={classes.ButtonCustom}\n        >\n          Assignees\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            onChange={onSearchInputChange}\n            aria-label=\"Search\"\n          />\n        </SelectPanel.Header>\n\n        {selectedAssigneeIds.length >= MAX_LIMIT ? (\n          <SelectPanel.Message variant=\"warning\" size=\"inline\">\n            You have reached the limit of {MAX_LIMIT} assignees on your free\n            account. <Link href=\"/upgrade\">Upgrade your account.</Link>\n          </SelectPanel.Message>\n        ) : null}\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((collaborator) => (\n              <ActionList.Item\n                key={collaborator.id}\n                onSelect={() => onCollaboratorSelect(collaborator.id)}\n                selected={selectedAssigneeIds.includes(collaborator.id)}\n                disabled={\n                  selectedAssigneeIds.length >= MAX_LIMIT &&\n                  !selectedAssigneeIds.includes(collaborator.id)\n                }\n              >\n                <ActionList.LeadingVisual>\n                  <Avatar\n                    src={`https://github.com/${collaborator.login}.png`}\n                  />\n                </ActionList.LeadingVisual>\n                {collaborator.login}\n                <ActionList.Description>\n                  {collaborator.login}\n                </ActionList.Description>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-examples--open-from-menu",