@primer/react 38.0.0-rc.5 → 38.0.0-rc.7

package/generated/components.json

@@ -19,15 +19,13 @@
           "name": "aria-label",
           "type": "string",
           "required": false,
-          "description": "When provided, a label is added to the action bar",
-          "defaultValue": ""
+          "description": "When provided, a label is added to the action bar"
         },
         {
           "name": "aria-labelledby",
           "type": "string",
           "required": false,
-          "description": "When provided, uses the element with that ID as the accessible name for the ActionBar",
-          "defaultValue": ""
+          "description": "When provided, uses the element with that ID as the accessible name for the ActionBar"
         },
         {
           "name": "children",
@@ -40,15 +38,15 @@
           "name": "size",
           "type": "'small' | 'large' | 'medium'",
           "required": false,
-          "description": "Size of the action bar",
-          "defaultValue": ""
+          "defaultValue": "'medium'",
+          "description": "Size of the action bar"
         },
         {
           "name": "flush",
           "type": "boolean",
           "required": false,
-          "description": "Allows ActionBar to be flush with the container",
-          "defaultValue": "false"
+          "defaultValue": "false",
+          "description": "Allows ActionBar to be flush with the container"
         },
         {
           "name": "className",
@@ -275,11 +273,6 @@
           "type": "AriaRole",
           "defaultValue": "",
           "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -352,11 +345,6 @@
               "required": false,
               "description": "id to attach to the root element of the Item",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -383,11 +371,6 @@
               "required": false,
               "description": "",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -422,11 +405,6 @@
               "required": false,
               "description": "Text describing why the item is inactive. This may be used when an item's usual functionality\nis unavailable due to a system error such as a database outage.",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -443,11 +421,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Icon (or similar) positioned before item text."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -460,11 +433,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Visual positioned after item text."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -521,11 +489,6 @@
               "defaultValue": "'inline'",
               "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "className",
               "type": "string | undefined",
@@ -576,11 +539,6 @@
               "defaultValue": "h3",
               "required": false,
               "description": "The level of the heading and it is only required (enforce by runtime warning) for lists. (i.e. not required for ActionMenu or listbox roles)"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -624,22 +582,6 @@
               "type": "AriaRole",
               "defaultValue": "",
               "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
-        },
-        {
-          "filePath": "/Users/mperrotti/work-dir/react/packages/react/src/ActionList/Divider.tsx",
-          "name": "ActionList.Divider",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -1922,11 +1864,6 @@
           "type": "'small'\n| 'medium'\n| 'large'",
           "defaultValue": "'medium'"
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "trailingIcon",
           "type": "React.ComponentType<OcticonProps>",
@@ -2112,11 +2049,6 @@
           "required": false,
           "description": "If `description` is provided, we will use a Tooltip to describe the button. Then `aria-label` is used to label the button.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -2431,7 +2363,7 @@
         },
         {
           "id": "components-confirmationdialog-features--shorthand-hook",
-          "code": "() => {\n  const confirm = useConfirm()\n  const { theme } = useTheme()\n  const onButtonClick = useCallback(\n    async (event: React.MouseEvent) => {\n      if (\n        (await confirm({\n          title: 'Are you sure?',\n          content: 'Do you really want to turn this button green?',\n        })) &&\n        event.target instanceof HTMLElement\n      ) {\n        event.target.style.color = theme?.colors.success.fg ?? 'green'\n        event.target.textContent = \"I'm green!\"\n      }\n    },\n    [confirm, theme],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n    </div>\n  )\n}"
+          "code": "() => {\n  const confirm = useConfirm()\n  const onButtonClick = useCallback(\n    async (event: React.MouseEvent) => {\n      if (\n        (await confirm({\n          title: 'Are you sure?',\n          content: 'Do you really want to turn this button green?',\n        })) &&\n        event.target instanceof HTMLElement\n      ) {\n        event.target.style.color = 'var(--fgColor-success)'\n        event.target.textContent = \"I'm green!\"\n      }\n    },\n    [confirm],\n  )\n  return (\n    <div className={classes.ButtonContainer}>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n      <Button onClick={onButtonClick} className={classes.TurnGreenButton}>\n        Turn me green!\n      </Button>\n    </div>\n  )\n}"
         },
         {
           "id": "components-confirmationdialog-features--shorthand-hook-from-action-menu",
@@ -3468,11 +3400,6 @@
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -3522,11 +3449,6 @@
               "type": "string",
               "description": "Class name(s) for custom styling.",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3544,11 +3466,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The content (usually just text) that is rendered to give contextual info about the field"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3573,11 +3490,6 @@
               "type": "string",
               "description": "May be used to override the ID assigned by FormControl's React Context",
               "defaultValue": ""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3589,11 +3501,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The visual to render before the choice input's label"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -4288,11 +4195,6 @@
           "type": "string",
           "defaultValue": "text-bottom",
           "description": "Sets the `vertical-align` CSS property"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -4314,7 +4216,7 @@
         },
         {
           "id": "private-components-overlay-features--positioned-overlays",
-          "code": "({ right, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [direction, setDirection] = useState<'left' | 'right'>(\n    right ? 'right' : 'left',\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('left')\n        }}\n      >\n        Open left overlay\n      </Button>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('right')\n        }}\n        sx={{\n          mt: 2,\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonLeft}\n                />\n                <Text>Look! left aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonRight}\n                />\n                <Text>Look! right aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        )\n      ) : null}\n    </div>\n  )\n}"
+          "code": "({ right, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [direction, setDirection] = useState<'left' | 'right'>(\n    right ? 'right' : 'left',\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('left')\n        }}\n      >\n        Open left overlay\n      </Button>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('right')\n        }}\n        style={{\n          marginTop: '8px',\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonLeft}\n                />\n                <Text>Look! left aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonRight}\n                />\n                <Text>Look! right aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        )\n      ) : null}\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -4840,7 +4742,7 @@
       "stories": [
         {
           "id": "components-pagelayout--default",
-          "code": "(args) => (\n  <PageLayout\n    containerWidth={args.containerWidth}\n    padding={args.padding}\n    rowGap={args.rowGap}\n    columnGap={args.columnGap}\n    sx={args.sx}\n  >\n    {args['Render header?'] ? (\n      <PageLayout.Header\n        padding={args['Header.padding']}\n        divider={{\n          narrow: args['Header.divider.narrow'],\n          regular: args['Header.divider.regular'],\n          wide: args['Header.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Header.hidden.narrow'],\n          regular: args['Header.hidden.regular'],\n          wide: args['Header.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Header placeholder height']}\n          label=\"Header\"\n        />\n      </PageLayout.Header>\n    ) : null}\n    <PageLayout.Content\n      width={args['Content.width']}\n      padding={args['Content.padding']}\n      hidden={{\n        narrow: args['Content.hidden.narrow'],\n        regular: args['Content.hidden.regular'],\n        wide: args['Content.hidden.wide'],\n      }}\n    >\n      <Placeholder\n        height={args['Content placeholder height']}\n        label=\"Content\"\n      />\n    </PageLayout.Content>\n    {args['Render pane?'] ? (\n      <PageLayout.Pane\n        position={{\n          narrow: args['Pane.position.narrow'],\n          regular: args['Pane.position.regular'],\n          wide: args['Pane.position.wide'],\n        }}\n        width={args['Pane.width']}\n        minWidth={args['Pane.minWidth']}\n        sticky={args['Pane.sticky']}\n        resizable={args['Pane.resizable']}\n        padding={args['Pane.padding']}\n        divider={{\n          narrow: args['Pane.divider.narrow'],\n          regular: args['Pane.divider.regular'],\n          wide: args['Pane.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Pane.hidden.narrow'],\n          regular: args['Pane.hidden.regular'],\n          wide: args['Pane.hidden.wide'],\n        }}\n      >\n        <Placeholder height={args['Pane placeholder height']} label=\"Pane\" />\n      </PageLayout.Pane>\n    ) : null}\n    {args['Render footer?'] ? (\n      <PageLayout.Footer\n        padding={args['Footer.padding']}\n        divider={{\n          narrow: args['Footer.divider.narrow'],\n          regular: args['Footer.divider.regular'],\n          wide: args['Footer.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Footer.hidden.narrow'],\n          regular: args['Footer.hidden.regular'],\n          wide: args['Footer.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Footer placeholder height']}\n          label=\"Footer\"\n        />\n      </PageLayout.Footer>\n    ) : null}\n  </PageLayout>\n)"
+          "code": "(args) => (\n  <PageLayout\n    containerWidth={args.containerWidth}\n    padding={args.padding}\n    rowGap={args.rowGap}\n    columnGap={args.columnGap}\n  >\n    {args['Render header?'] ? (\n      <PageLayout.Header\n        padding={args['Header.padding']}\n        divider={{\n          narrow: args['Header.divider.narrow'],\n          regular: args['Header.divider.regular'],\n          wide: args['Header.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Header.hidden.narrow'],\n          regular: args['Header.hidden.regular'],\n          wide: args['Header.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Header placeholder height']}\n          label=\"Header\"\n        />\n      </PageLayout.Header>\n    ) : null}\n    <PageLayout.Content\n      width={args['Content.width']}\n      padding={args['Content.padding']}\n      hidden={{\n        narrow: args['Content.hidden.narrow'],\n        regular: args['Content.hidden.regular'],\n        wide: args['Content.hidden.wide'],\n      }}\n    >\n      <Placeholder\n        height={args['Content placeholder height']}\n        label=\"Content\"\n      />\n    </PageLayout.Content>\n    {args['Render pane?'] ? (\n      <PageLayout.Pane\n        position={{\n          narrow: args['Pane.position.narrow'],\n          regular: args['Pane.position.regular'],\n          wide: args['Pane.position.wide'],\n        }}\n        width={args['Pane.width']}\n        minWidth={args['Pane.minWidth']}\n        sticky={args['Pane.sticky']}\n        resizable={args['Pane.resizable']}\n        padding={args['Pane.padding']}\n        divider={{\n          narrow: args['Pane.divider.narrow'],\n          regular: args['Pane.divider.regular'],\n          wide: args['Pane.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Pane.hidden.narrow'],\n          regular: args['Pane.hidden.regular'],\n          wide: args['Pane.hidden.wide'],\n        }}\n      >\n        <Placeholder height={args['Pane placeholder height']} label=\"Pane\" />\n      </PageLayout.Pane>\n    ) : null}\n    {args['Render footer?'] ? (\n      <PageLayout.Footer\n        padding={args['Footer.padding']}\n        divider={{\n          narrow: args['Footer.divider.narrow'],\n          regular: args['Footer.divider.regular'],\n          wide: args['Footer.divider.wide'],\n        }}\n        hidden={{\n          narrow: args['Footer.hidden.narrow'],\n          regular: args['Footer.hidden.regular'],\n          wide: args['Footer.hidden.wide'],\n        }}\n      >\n        <Placeholder\n          height={args['Footer placeholder height']}\n          label=\"Footer\"\n        />\n      </PageLayout.Footer>\n    ) : null}\n  </PageLayout>\n)"
         },
         {
           "id": "components-pagelayout-features--pull-request-page",
@@ -5890,7 +5792,7 @@
         },
         {
           "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
-          "code": "() => (\n  <div className={classes.LabelAndCaptionContainer}>\n    <div className={classes.LabelAndCaption}>\n      <Text className={classes.TextLargeBold} id=\"scLabel-vert\" display=\"block\">\n        File view\n      </Text>\n      <Text\n        className={classes.TextMediumSubtle}\n        id=\"scCaption-vert\"\n        display=\"block\"\n      >\n        Change the way the file is viewed\n      </Text>\n    </div>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </div>\n)"
+          "code": "() => (\n  <div className={classes.LabelAndCaptionContainer}>\n    <div className={classes.LabelAndCaption}>\n      <Text\n        className={classes.TextLargeBold}\n        id=\"scLabel-vert\"\n        style={{\n          display: 'block',\n        }}\n      >\n        File view\n      </Text>\n      <Text\n        className={classes.TextMediumSubtle}\n        id=\"scCaption-vert\"\n        style={{\n          display: 'block',\n        }}\n      >\n        Change the way the file is viewed\n      </Text>\n    </div>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -7291,24 +7193,24 @@
         },
         {
           "name": "width",
-          "type": "string | number | Array<string | number>",
+          "type": "string | number",
           "defaultValue": "",
           "deprecated": true,
-          "description": "(Use sx prop) Set the width of the input"
+          "description": "(Use css modules) Set the width of the input"
         },
         {
           "name": "maxWidth",
-          "type": "string | number | Array<string | number>",
+          "type": "string | number",
           "defaultValue": "",
           "deprecated": true,
-          "description": "(Use sx prop) Set the maximum width of the input"
+          "description": "(Use css modules) Set the maximum width of the input"
         },
         {
           "name": "minWidth",
-          "type": "string | number | Array<string | number>",
+          "type": "string | number",
           "defaultValue": "",
           "deprecated": true,
-          "description": "(Use sx prop) Set the minimum width of the input"
+          "description": "(Use css modules) Set the minimum width of the input"
         },
         {
           "name": "icon",
@@ -7631,7 +7533,7 @@
         },
         {
           "id": "components-timeline-features--timeline-break",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge className={classes.BadgeWithDoneBackground}>\n        <Octicon\n          icon={GitMergeIcon}\n          color=\"fg.onEmphasis\"\n          aria-label=\"Merged\"\n        />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge className={classes.BadgeWithDoneBackground}>\n        <Octicon\n          icon={GitMergeIcon}\n          className={classes.GitMergeIcon}\n          aria-label=\"Merged\"\n        />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--with-inline-links",
@@ -8121,7 +8023,7 @@
       "stories": [
         {
           "id": "components-treeview--default",
-          "code": "() => (\n  <nav aria-label=\"Files changed\">\n    <TreeView aria-label=\"Files changed\">\n      <TreeView.Item id=\"src\" defaultExpanded>\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id=\"src/Avatar.tsx\">\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Avatar.tsx\n            <TreeView.TrailingVisual label=\"Added\">\n              <Octicon icon={DiffAddedIcon} color=\"success.fg\" />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n          <TreeView.Item id=\"src/Button.tsx\" current>\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Button.tsx\n            <TreeView.TrailingVisual label=\"Modified\">\n              <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n      <TreeView.Item id=\"package.json\">\n        <TreeView.LeadingVisual>\n          <FileIcon />\n        </TreeView.LeadingVisual>\n        package.json\n        <TreeView.TrailingVisual label=\"Modified\">\n          <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n        </TreeView.TrailingVisual>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n)"
+          "code": "() => (\n  <nav aria-label=\"Files changed\">\n    <TreeView aria-label=\"Files changed\">\n      <TreeView.Item id=\"src\" defaultExpanded>\n        <TreeView.LeadingVisual>\n          <TreeView.DirectoryIcon />\n        </TreeView.LeadingVisual>\n        src\n        <TreeView.SubTree>\n          <TreeView.Item id=\"src/Avatar.tsx\">\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Avatar.tsx\n            <TreeView.TrailingVisual label=\"Added\">\n              <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n          <TreeView.Item id=\"src/Button.tsx\" current>\n            <TreeView.LeadingVisual>\n              <FileIcon />\n            </TreeView.LeadingVisual>\n            Button.tsx\n            <TreeView.TrailingVisual label=\"Modified\">\n              <Octicon\n                icon={DiffModifiedIcon}\n                className={classes.AttentionIcon}\n              />\n            </TreeView.TrailingVisual>\n          </TreeView.Item>\n        </TreeView.SubTree>\n      </TreeView.Item>\n      <TreeView.Item id=\"package.json\">\n        <TreeView.LeadingVisual>\n          <FileIcon />\n        </TreeView.LeadingVisual>\n        package.json\n        <TreeView.TrailingVisual label=\"Modified\">\n          <Octicon icon={DiffModifiedIcon} className={classes.AttentionIcon} />\n        </TreeView.TrailingVisual>\n      </TreeView.Item>\n    </TreeView>\n  </nav>\n)"
         },
         {
           "id": "components-treeview-features--files",
@@ -8129,7 +8031,7 @@
         },
         {
           "id": "components-treeview-features--files-changed",
-          "code": "() => {\n  return (\n    <nav aria-label=\"Files\">\n      <TreeView aria-label=\"Files\" truncate={false}>\n        <TreeView.Item id=\"src\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          src\n          <TreeView.SubTree>\n            <TreeView.Item id=\"src/Avatar.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              Avatar.tsx\n              <TreeView.TrailingVisual label=\"added\">\n                <Octicon icon={DiffAddedIcon} color=\"success.fg\" />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/Button\" defaultExpanded>\n              <TreeView.LeadingVisual>\n                <TreeView.DirectoryIcon />\n              </TreeView.LeadingVisual>\n              Button\n              <TreeView.SubTree>\n                <TreeView.Item id=\"src/Button/Button.tsx\" current>\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n                <TreeView.Item id=\"src/Button/Button.test.tsx\">\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.test.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n              </TreeView.SubTree>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/ReallyLongFileNameThatShouldBeTruncated.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              ReallyLongFileNameThatShouldBeTruncated.tsx\n              <TreeView.TrailingVisual label=\"modified\">\n                <Octicon icon={DiffModifiedIcon} color=\"attention.fg\" />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n        <TreeView.Item id=\"public\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          public\n          <TreeView.SubTree>\n            <TreeView.Item id=\"public/index.html\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              index.html\n              <TreeView.TrailingVisual label=\"renamed\">\n                <Octicon icon={DiffRenamedIcon} />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"public/favicon.ico\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              favicon.ico\n              <TreeView.TrailingVisual label=\"removed\">\n                <Octicon icon={DiffRemovedIcon} color=\"danger.fg\" />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n      </TreeView>\n    </nav>\n  )\n}"
+          "code": "() => {\n  return (\n    <nav aria-label=\"Files\">\n      <TreeView aria-label=\"Files\" truncate={false}>\n        <TreeView.Item id=\"src\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          src\n          <TreeView.SubTree>\n            <TreeView.Item id=\"src/Avatar.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              Avatar.tsx\n              <TreeView.TrailingVisual label=\"added\">\n                <Octicon icon={DiffAddedIcon} className={classes.SuccessIcon} />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/Button\" defaultExpanded>\n              <TreeView.LeadingVisual>\n                <TreeView.DirectoryIcon />\n              </TreeView.LeadingVisual>\n              Button\n              <TreeView.SubTree>\n                <TreeView.Item id=\"src/Button/Button.tsx\" current>\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon\n                      icon={DiffModifiedIcon}\n                      className={classes.AttentionIcon}\n                    />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n                <TreeView.Item id=\"src/Button/Button.test.tsx\">\n                  <TreeView.LeadingVisual>\n                    <FileIcon />\n                  </TreeView.LeadingVisual>\n                  Button.test.tsx\n                  <TreeView.TrailingVisual label=\"modified\">\n                    <Octicon\n                      icon={DiffModifiedIcon}\n                      className={classes.AttentionIcon}\n                    />\n                  </TreeView.TrailingVisual>\n                </TreeView.Item>\n              </TreeView.SubTree>\n            </TreeView.Item>\n            <TreeView.Item id=\"src/ReallyLongFileNameThatShouldBeTruncated.tsx\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              ReallyLongFileNameThatShouldBeTruncated.tsx\n              <TreeView.TrailingVisual label=\"modified\">\n                <Octicon\n                  icon={DiffModifiedIcon}\n                  className={classes.AttentionIcon}\n                />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n        <TreeView.Item id=\"public\" defaultExpanded>\n          <TreeView.LeadingVisual>\n            <TreeView.DirectoryIcon />\n          </TreeView.LeadingVisual>\n          public\n          <TreeView.SubTree>\n            <TreeView.Item id=\"public/index.html\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              index.html\n              <TreeView.TrailingVisual label=\"renamed\">\n                <Octicon icon={DiffRenamedIcon} />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n            <TreeView.Item id=\"public/favicon.ico\">\n              <TreeView.LeadingVisual>\n                <FileIcon />\n              </TreeView.LeadingVisual>\n              favicon.ico\n              <TreeView.TrailingVisual label=\"removed\">\n                <Octicon\n                  icon={DiffRemovedIcon}\n                  className={classes.DangerIcon}\n                />\n              </TreeView.TrailingVisual>\n            </TreeView.Item>\n          </TreeView.SubTree>\n        </TreeView.Item>\n      </TreeView>\n    </nav>\n  )\n}"
         },
         {
           "id": "components-treeview-features--async-success",
@@ -8692,7 +8594,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-groups",
-          "code": "() => {\n  /* Selection */\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const onCollaboratorSelect = (colloratorId: string) => {\n    if (!selectedAssigneeIds.includes(colloratorId))\n      setSelectedAssigneeIds([...selectedAssigneeIds, colloratorId])\n    else\n      setSelectedAssigneeIds(\n        selectedAssigneeIds.filter((id) => id !== colloratorId),\n      )\n  }\n  const onClearSelection = () => setSelectedAssigneeIds([])\n  const onSubmit = () => {\n    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedAssigneeIds(initialAssigneeIds)\n  }\n\n  /* Filtering */\n  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredUsers(data.collaborators)\n    else {\n      setFilteredUsers(\n        data.collaborators\n          .map((collaborator) => {\n            if (collaborator.login.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                collaborator,\n              }\n            else if (collaborator.name.startsWith(query))\n              return {\n                priority: 2,\n                collaborator,\n              }\n            else if (collaborator.login.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                collaborator,\n              }\n            else if (collaborator.name.toLowerCase().includes(query))\n              return {\n                priority: 4,\n                collaborator,\n              }\n            else\n              return {\n                priority: -1,\n                collaborator,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.collaborator),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.assigneeIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n  return (\n    <>\n      <h1>SelectPanel with groups</h1>\n\n      <SelectPanel\n        title=\"Request up to 100 reviewers\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          sx={{\n            width: '200px',\n            '[data-component=buttonContent]': {\n              justifyContent: 'start',\n            },\n          }}\n        >\n          Reviewers\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Suggestions\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Everyone else\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => !collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  /* Selection */\n  const initialAssigneeIds = data.issue.assigneeIds // mock initial state\n  const [selectedAssigneeIds, setSelectedAssigneeIds] =\n    React.useState<string[]>(initialAssigneeIds)\n  const onCollaboratorSelect = (collaboratorId: string) => {\n    if (!selectedAssigneeIds.includes(collaboratorId))\n      setSelectedAssigneeIds([...selectedAssigneeIds, collaboratorId])\n    else\n      setSelectedAssigneeIds(\n        selectedAssigneeIds.filter((id) => id !== collaboratorId),\n      )\n  }\n  const onClearSelection = () => setSelectedAssigneeIds([])\n  const onSubmit = () => {\n    data.issue.assigneeIds = selectedAssigneeIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedAssigneeIds(initialAssigneeIds)\n  }\n\n  /* Filtering */\n  const [filteredUsers, setFilteredUsers] = React.useState(data.collaborators)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredUsers(data.collaborators)\n    else {\n      setFilteredUsers(\n        data.collaborators\n          .map((collaborator) => {\n            if (collaborator.login.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                collaborator,\n              }\n            else if (collaborator.name.startsWith(query))\n              return {\n                priority: 2,\n                collaborator,\n              }\n            else if (collaborator.login.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                collaborator,\n              }\n            else if (collaborator.name.toLowerCase().includes(query))\n              return {\n                priority: 4,\n                collaborator,\n              }\n            else\n              return {\n                priority: -1,\n                collaborator,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.collaborator),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.assigneeIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredUsers : data.collaborators.sort(sortingFn)\n  return (\n    <>\n      <h1>SelectPanel with groups</h1>\n\n      <SelectPanel\n        title=\"Request up to 100 reviewers\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button\n          variant=\"invisible\"\n          trailingAction={GearIcon}\n          style={{\n            width: '200px',\n          }}\n          className={classes.ButtonContentStartJustify}\n        >\n          Reviewers\n        </SelectPanel.Button>\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Suggestions\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n            <ActionList.Group>\n              <ActionList.GroupHeading variant=\"filled\">\n                Everyone else\n              </ActionList.GroupHeading>\n              {itemsToShow\n                .filter((collaborator) => !collaborator.recommended)\n                .map((collaborator) => (\n                  <ActionList.Item\n                    key={collaborator.id}\n                    onSelect={() => onCollaboratorSelect(collaborator.id)}\n                    selected={selectedAssigneeIds.includes(collaborator.id)}\n                  >\n                    <ActionList.LeadingVisual>\n                      <Avatar\n                        src={`https://github.com/${collaborator.login}.png`}\n                      />\n                    </ActionList.LeadingVisual>\n                    {collaborator.login}\n                    <ActionList.Description>\n                      {collaborator.login}\n                    </ActionList.Description>\n                  </ActionList.Item>\n                ))}\n            </ActionList.Group>\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-examples--async-search-with-use-transition",
@@ -8704,7 +8606,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-filter-buttons",
-          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight:\n                  selectedFilter === 'branches' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'branches'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'tags'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.0.0-rc.5",
+  "version": "38.0.0-rc.7",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -109,6 +109,7 @@
     "@babel/preset-typescript": "7.27.1",
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
+    "@primer/doc-gen": "^0.0.1",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "28.0.6",
     "@rollup/plugin-json": "6.1.0",