@primer/react 38.0.0-rc.1 → 38.0.0-rc.2

package/generated/components.json

@@ -1289,11 +1289,6 @@
           "type": "string",
           "description": "Class name for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1304,66 +1299,66 @@
       "name": "Banner",
       "status": "alpha",
       "a11yReviewed": "2025-01-08",
-      "importPath": "@primer/react/experimental",
+      "importPath": "@primer/react",
       "stories": [
         {
-          "id": "experimental-components-banner--default",
+          "id": "components-banner--default",
           "code": "() => {\n  return (\n    <Banner\n      onDismiss={action('onDismiss')}\n      title=\"Info\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--critical",
+          "id": "components-banner-features--critical",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Critical\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      variant=\"critical\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--info",
+          "id": "components-banner-features--info",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Info\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"info\"\n    ></Banner>\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--success",
+          "id": "components-banner-features--success",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Success\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"success\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--upsell",
+          "id": "components-banner-features--upsell",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Upsell\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"upsell\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--warning",
+          "id": "components-banner-features--warning",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"warning\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismiss",
+          "id": "components-banner-features--dismiss",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Notice\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismiss-with-actions",
+          "id": "components-banner-features--dismiss-with-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Notice\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--with-hidden-title",
+          "id": "components-banner-features--with-hidden-title",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      variant=\"warning\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--with-hidden-title-and-actions",
+          "id": "components-banner-features--with-hidden-title-and-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      variant=\"warning\"\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-actions",
+          "id": "components-banner-features--dismissible-with-hidden-title-and-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"warning\"\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--dismissible-with-hidden-title-and-secondary-action",
+          "id": "components-banner-features--dismissible-with-hidden-title-and-secondary-action",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      hideTitle\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      onDismiss={action('onDismiss')}\n      variant=\"warning\"\n      secondaryAction={\n        <Banner.SecondaryAction leadingVisual={GitPullRequestIcon}>\n          Button\n        </Banner.SecondaryAction>\n      }\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--with-actions",
+          "id": "components-banner-features--with-actions",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Warning\"\n      description={\n        <>\n          GitHub users are{' '}\n          <Link inline href=\"#\">\n            now required\n          </Link>{' '}\n          to enable two-factor authentication as an additional security measure.\n        </>\n      }\n      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n      secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}\n      variant=\"warning\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-features--custom-icon",
+          "id": "components-banner-features--custom-icon",
           "code": "() => {\n  return (\n    <Banner\n      title=\"Upsell\"\n      description=\"An example banner with a custom icon\"\n      icon={<CopilotIcon />}\n      onDismiss={action('onDismiss')}\n      variant=\"upsell\"\n    />\n  )\n}"
         },
         {
-          "id": "experimental-components-banner-examples--with-announcement",
+          "id": "components-banner-examples--with-announcement",
           "code": "() => {\n  type Choice = 'one' | 'two' | 'three'\n  const messages: Map<Choice, string> = new Map([\n    ['one', 'This is a message for choice one'],\n    ['two', 'This is a message for choice two'],\n    ['three', 'This is a message for choice three'],\n  ])\n  const [selected, setSelected] = React.useState<Choice>('one')\n  return (\n    <>\n      <Banner\n        title=\"Info\"\n        description={<AriaStatus>{messages.get(selected)}</AriaStatus>}\n        onDismiss={action('onDismiss')}\n        primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n        secondaryAction={\n          <Banner.SecondaryAction>Button</Banner.SecondaryAction>\n        }\n      />\n      <RadioGroup\n        sx={{\n          marginTop: 4,\n        }}\n        name=\"options\"\n        onChange={(selected) => {\n          setSelected(selected as Choice)\n        }}\n      >\n        <RadioGroup.Label>Choices</RadioGroup.Label>\n        <FormControl>\n          <Radio value=\"one\" defaultChecked />\n          <FormControl.Label>Choice one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"two\" />\n          <FormControl.Label>Choice two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"three\" />\n          <FormControl.Label>Choice three</FormControl.Label>\n        </FormControl>\n      </RadioGroup>\n    </>\n  )\n}"
         }
       ],
@@ -1646,11 +1641,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"a\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -1832,7 +1822,7 @@
         },
         {
           "id": "components-button-features--inactive-button-with-tooltip",
-          "code": "() => (\n  <Tooltip\n    text=\"Action unavailable: an error occurred while loading respository permissions\"\n    direction=\"n\"\n  >\n    <Button inactive>Review changes</Button>\n  </Tooltip>\n)"
+          "code": "() => (\n  <Tooltip\n    text=\"Action unavailable: an error occurred while loading repository permissions\"\n    direction=\"n\"\n  >\n    <Button inactive>Review changes</Button>\n  </Tooltip>\n)"
         },
         {
           "id": "components-button-features--expanded-button",
@@ -2376,11 +2366,11 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleBadge",
       "id": "circle_badge",
       "name": "CircleBadge",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-circlebadge--default",
+          "id": "deprecated-components-circlebadge--default",
           "code": "() => (\n  <CircleBadge>\n    <CircleBadge.Icon icon={ZapIcon} aria-label=\"User badge\" />\n  </CircleBadge>\n)"
         }
       ],
@@ -2436,38 +2426,6 @@
         }
       ]
     },
-    "circle_octicon": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/CircleOcticon",
-      "id": "circle_octicon",
-      "name": "CircleOcticon",
-      "status": "deprecated",
-      "a11yReviewed": "2025-01-08",
-      "stories": [
-        {
-          "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)"
-        }
-      ],
-      "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "icon",
-          "type": "Octicon"
-        },
-        {
-          "name": "size",
-          "defaultValue": "32",
-          "type": "number",
-          "description": "Set the width and height of the icon in pixels."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
-      "subcomponents": []
-    },
     "confirmationdialog": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/ConfirmationDialog",
       "id": "confirmationdialog",
@@ -3039,13 +2997,7 @@
         }
       ],
       "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
+      "props": [],
       "subcomponents": [
         {
           "name": "Details.Summary",
@@ -3060,11 +3012,6 @@
             {
               "name": "children",
               "type": "React.ReactNode"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -3092,7 +3039,7 @@
         },
         {
           "id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer",
-          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: 4,\n              }}\n            >\n              <Box\n                sx={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                }}\n              >\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Box>\n              <Box\n                sx={{\n                  display: 'flex',\n                  justifyContent: 'space-between',\n                }}\n              >\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Box>\n            </Box>\n          ) : (\n            <div>\n              <Box\n                sx={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                  gap: 1,\n                }}\n              >\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Box>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
+          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Stack gap=\"spacious\" direction=\"vertical\">\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n            </Stack>\n          ) : (\n            <div>\n              <Stack gap=\"condensed\" direction=\"vertical\">\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Stack>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
         },
         {
           "id": "components-dialog-features--bottom-sheet-narrow",
@@ -3116,7 +3063,7 @@
         },
         {
           "id": "components-dialog-features--retains-focus-trap-with-dynamic-content",
-          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [secondOpen, setSecondOpen] = useState(false)\n  const [expandContent, setExpandContent] = useState(false)\n  const [changeBodyContent, setChangeBodyContent] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n  const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n  const renderFooterConditionally = () => {\n    if (!changeBodyContent) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  return (\n    <>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        Show dialog\n      </Button>\n      {isOpen && (\n        <Dialog\n          title=\"My Dialog\"\n          onClose={onDialogClose}\n          renderFooter={renderFooterConditionally}\n        >\n          <Button onClick={() => setExpandContent(!expandContent)}>\n            Click me to dynamically {expandContent ? 'remove' : 'render'}{' '}\n            content\n          </Button>\n          <Button onClick={() => setChangeBodyContent(!changeBodyContent)}>\n            Click me to {changeBodyContent ? 'remove' : 'add'} a footer\n          </Button>\n          <Button onClick={openSecondDialog}>\n            Click me to open a new dialog\n          </Button>\n          {expandContent && (\n            <Box>\n              {lipsum}\n              <Button>Dialog Button Example 1</Button>\n              <Button>Dialog Button Example 2</Button>\n            </Box>\n          )}\n          {secondOpen && (\n            <Dialog\n              title=\"Inner dialog!\"\n              onClose={onSecondDialogClose}\n              width=\"small\"\n            >\n              Hello world\n            </Dialog>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [secondOpen, setSecondOpen] = useState(false)\n  const [expandContent, setExpandContent] = useState(false)\n  const [changeBodyContent, setChangeBodyContent] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])\n  const openSecondDialog = useCallback(() => setSecondOpen(true), [])\n  const renderFooterConditionally = () => {\n    if (!changeBodyContent) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  return (\n    <>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        Show dialog\n      </Button>\n      {isOpen && (\n        <Dialog\n          title=\"My Dialog\"\n          onClose={onDialogClose}\n          renderFooter={renderFooterConditionally}\n        >\n          <Button onClick={() => setExpandContent(!expandContent)}>\n            Click me to dynamically {expandContent ? 'remove' : 'render'}{' '}\n            content\n          </Button>\n          <Button onClick={() => setChangeBodyContent(!changeBodyContent)}>\n            Click me to {changeBodyContent ? 'remove' : 'add'} a footer\n          </Button>\n          <Button onClick={openSecondDialog}>\n            Click me to open a new dialog\n          </Button>\n          {expandContent && (\n            <Stack gap=\"normal\" direction=\"vertical\">\n              {lipsum}\n              <Button>Dialog Button Example 1</Button>\n              <Button>Dialog Button Example 2</Button>\n            </Stack>\n          )}\n          {secondOpen && (\n            <Dialog\n              title=\"Inner dialog!\"\n              onClose={onSecondDialogClose}\n              width=\"small\"\n            >\n              Hello world\n            </Dialog>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -3272,7 +3219,7 @@
       "stories": [
         {
           "id": "components-dialog--default",
-          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <Box\n        sx={{\n          mb: 3,\n        }}\n      >\n        <Banner\n          title=\"This component is deprecated\"\n          description=\"We recommend using Dialog instead.\"\n          variant=\"warning\"\n        />\n      </Box>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <Box p={3}>\n            <Text>Some content</Text>\n          </Box>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"
+          "code": "() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <div\n        style={{\n          marginBottom: 'var(--stack-gap-normal)',\n        }}\n      >\n        <Banner\n          title=\"This component is deprecated\"\n          description=\"We recommend using Dialog instead.\"\n          variant=\"warning\"\n        />\n      </div>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <div\n            style={{\n              padding: 'var(--stack-gap-normal)',\n            }}\n          >\n            <Text>Some content</Text>\n          </div>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/deprecated",
@@ -3365,27 +3312,27 @@
         },
         {
           "id": "components-flash-features--success",
-          "code": "() => (\n  <Flash\n    variant=\"success\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={CheckCircleIcon} aria-label=\"Success\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Success\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"success\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={CheckCircleIcon} aria-label=\"Success\" />\n    </div>\n    <div className={classes.Message}>Success</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--danger",
-          "code": "() => (\n  <Flash\n    variant=\"danger\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Danger\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Danger\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"danger\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={InfoIcon} aria-label=\"Danger\" />\n    </div>\n    <div className={classes.Message}>Danger</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--warning",
-          "code": "() => (\n  <Flash\n    variant=\"warning\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={AlertIcon} aria-label=\"Warning\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Warning\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"warning\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={AlertIcon} aria-label=\"Warning\" />\n    </div>\n    <div className={classes.Message}>Warning</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--full",
-          "code": "() => (\n  <Flash\n    full\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      Full\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    full\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>Full</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--with-icon-and-action",
-          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message'\n        '.      actions'\n      `,\n      },\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </Box>\n    <Box\n      sx={{\n        gridArea: 'actions',\n        '@media screen and (max-width: 543.98px)': {\n          alignSelf: 'start',\n          margin: 'var(--base-size-8) 0 0 var(--base-size-8)',\n        },\n      }}\n    >\n      <Button>Join waitlist</Button>\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message'\n        '.      actions'\n      `,\n      },\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--with-icon-action-dismiss",
-          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions close'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message close'\n        '.      actions actions'\n      `,\n      },\n    }}\n  >\n    <Box\n      sx={{\n        display: 'grid',\n        paddingBlock: 'var(--base-size-8)',\n        alignSelf: 'start',\n        gridArea: 'visual',\n      }}\n    >\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </Box>\n    <Box\n      sx={{\n        fontSize: 1,\n        lineHeight: '1.5',\n        padding: '0.375rem var(--base-size-8)',\n        alignSelf: 'center',\n        gridArea: 'message',\n      }}\n    >\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </Box>\n    <Box\n      sx={{\n        gridArea: 'actions',\n        '@media screen and (max-width: 543.98px)': {\n          alignSelf: 'start',\n          margin: 'var(--base-size-8) 0 0 var(--base-size-8)',\n        },\n      }}\n    >\n      <Button>Join waitlist</Button>\n    </Box>\n    <Box\n      sx={{\n        gridArea: 'close',\n        marginLeft: 'var(--controlStack-medium-gap-condensed)',\n      }}\n    >\n      <IconButton\n        variant=\"invisible\"\n        icon={XIcon}\n        aria-label=\"Dismiss\"\n        sx={{\n          svg: {\n            margin: '0',\n            color: 'fg.muted',\n          },\n        }}\n      />\n    </Box>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions close'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message close'\n        '.      actions actions'\n      `,\n      },\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n    <div className={classes.Close}>\n      <IconButton\n        variant=\"invisible\"\n        icon={XIcon}\n        aria-label=\"Dismiss\"\n        sx={{\n          svg: {\n            margin: '0',\n            color: 'fg.muted',\n          },\n        }}\n      />\n    </div>\n  </Flash>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -3802,11 +3749,11 @@
         },
         {
           "id": "experimental-components-hidden-features--hide-content",
-          "code": "() => (\n  <Box>\n    <Hidden when=\"narrow\">\n      {' '}\n      This value is shown in regular and wide viewports\n    </Hidden>\n    <Hidden when=\"regular\">\n      {' '}\n      This value is shown in narrow and wide viewports\n    </Hidden>\n    <Hidden when=\"wide\">\n      {' '}\n      This value is shown in narrow and regular viewports\n    </Hidden>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Hidden when=\"narrow\">\n      {' '}\n      This value is shown in regular and wide viewports\n    </Hidden>\n    <Hidden when=\"regular\">\n      {' '}\n      This value is shown in narrow and wide viewports\n    </Hidden>\n    <Hidden when=\"wide\">\n      {' '}\n      This value is shown in narrow and regular viewports\n    </Hidden>\n  </div>\n)"
         },
         {
           "id": "experimental-components-hidden-features--render-content-responsively",
-          "code": "() => (\n  <Box>\n    <Hidden when=\"narrow\">\n      <Button variant=\"primary\">\n        I am visible when the viewport is regular or wide viewport\n      </Button>\n    </Hidden>\n\n    <Hidden when={['regular', 'wide']}>\n      <Button variant=\"primary\">\n        I am visible when the viewport is narrow\n      </Button>\n    </Hidden>\n  </Box>\n)"
+          "code": "() => (\n  <div>\n    <Hidden when=\"narrow\">\n      <Button variant=\"primary\">\n        I am visible when the viewport is regular or wide viewport\n      </Button>\n    </Hidden>\n\n    <Hidden when={['regular', 'wide']}>\n      <Button variant=\"primary\">\n        I am visible when the viewport is narrow\n      </Button>\n    </Hidden>\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -3878,11 +3825,11 @@
       "stories": [
         {
           "id": "experimental-components-keybindinghint-features--on-emphasis",
-          "code": "(args) => (\n  <Box\n    sx={{\n      backgroundColor: 'var(--bgColor-black)',\n      p: 3,\n    }}\n  >\n    <KeybindingHint {...args} />\n  </Box>\n)"
+          "code": "(args) => (\n  <div className={classes.EmphasisBackground}>\n    <KeybindingHint {...args} />\n  </div>\n)"
         },
         {
           "id": "experimental-components-keybindinghint-features--on-primary",
-          "code": "(args) => (\n  <Box\n    sx={{\n      backgroundColor: 'var(--button-primary-bgColor-rest)',\n      p: 3,\n    }}\n  >\n    <KeybindingHint {...args} />\n  </Box>\n)"
+          "code": "(args) => (\n  <div className={classes.PrimaryBackground}>\n    <KeybindingHint {...args} />\n  </div>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -4448,11 +4395,11 @@
         },
         {
           "id": "private-components-overlay-features--dialog-overlay",
-          "code": "({ anchorSide, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n    initialFocusRef: confirmButtonRef,\n    returnFocusRef: buttonRef,\n  })\n  return (\n    <Box ref={anchorRef}>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        open overlay\n      </Button>\n      {isOpen || open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"small\"\n          anchorSide={anchorSide}\n          role={role}\n          aria-modal={role === 'dialog' ? 'true' : undefined}\n          aria-label={role === 'dialog' ? 'Confirmation screen' : undefined}\n          ref={containerRef}\n        >\n          <Box display=\"flex\" flexDirection=\"column\" p={2}>\n            <Text>Are you sure?</Text>\n            <Button variant=\"danger\" onClick={closeOverlay}>\n              Cancel\n            </Button>\n            <Button onClick={closeOverlay} ref={confirmButtonRef}>\n              Confirm\n            </Button>\n          </Box>\n        </Overlay>\n      ) : null}\n    </Box>\n  )\n}"
+          "code": "({ anchorSide, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n    initialFocusRef: confirmButtonRef,\n    returnFocusRef: buttonRef,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n        open overlay\n      </Button>\n      {isOpen || open ? (\n        <Overlay\n          initialFocusRef={confirmButtonRef}\n          returnFocusRef={buttonRef}\n          ignoreClickRefs={[buttonRef]}\n          onEscape={closeOverlay}\n          onClickOutside={closeOverlay}\n          width=\"small\"\n          anchorSide={anchorSide}\n          role={role}\n          aria-modal={role === 'dialog' ? 'true' : undefined}\n          aria-label={role === 'dialog' ? 'Confirmation screen' : undefined}\n          ref={containerRef}\n        >\n          <div className={classes.DialogContent}>\n            <Text>Are you sure?</Text>\n            <Button variant=\"danger\" onClick={closeOverlay}>\n              Cancel\n            </Button>\n            <Button onClick={closeOverlay} ref={confirmButtonRef}>\n              Confirm\n            </Button>\n          </div>\n        </Overlay>\n      ) : null}\n    </div>\n  )\n}"
         },
         {
           "id": "private-components-overlay-features--positioned-overlays",
-          "code": "({ right, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [direction, setDirection] = useState<'left' | 'right'>(\n    right ? 'right' : 'left',\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <Box ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('left')\n        }}\n      >\n        Open left overlay\n      </Button>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('right')\n        }}\n        sx={{\n          mt: 2,\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <Box\n              sx={{\n                width: ['350px', '500px'],\n              }}\n            >\n              <Box\n                sx={{\n                  height: '100vh',\n                  maxWidth: 'calc(-1rem + 100vw)',\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  sx={{\n                    position: 'absolute',\n                    left: '5px',\n                    top: '5px',\n                  }}\n                />\n                <Text>Look! left aligned</Text>\n              </Box>\n            </Box>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <Box\n              sx={{\n                width: ['350px', '500px'],\n              }}\n            >\n              <Box\n                sx={{\n                  height: '100vh',\n                  maxWidth: 'calc(-1rem + 100vw)',\n                  display: 'flex',\n                  justifyContent: 'center',\n                  alignItems: 'center',\n                }}\n              >\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  sx={{\n                    position: 'absolute',\n                    right: '5px',\n                    top: '5px',\n                  }}\n                />\n                <Text>Look! right aligned</Text>\n              </Box>\n            </Box>\n          </Overlay>\n        )\n      ) : null}\n    </Box>\n  )\n}"
+          "code": "({ right, role, open }: Args) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [direction, setDirection] = useState<'left' | 'right'>(\n    right ? 'right' : 'left',\n  )\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const confirmButtonRef = useRef<HTMLButtonElement>(null)\n  const anchorRef = useRef<HTMLDivElement>(null)\n  const closeOverlay = () => setIsOpen(false)\n  const containerRef = useRef<HTMLDivElement>(null)\n  useFocusTrap({\n    containerRef,\n    disabled: !isOpen,\n  })\n  return (\n    <div ref={anchorRef}>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('left')\n        }}\n      >\n        Open left overlay\n      </Button>\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setIsOpen(!isOpen)\n          setDirection('right')\n        }}\n        sx={{\n          mt: 2,\n        }}\n      >\n        Open right overlay\n      </Button>\n      {isOpen || open ? (\n        direction === 'left' ? (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide=\"inside-right\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Left aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonLeft}\n                />\n                <Text>Look! left aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        ) : (\n          <Overlay\n            initialFocusRef={confirmButtonRef}\n            returnFocusRef={buttonRef}\n            ignoreClickRefs={[buttonRef]}\n            onEscape={closeOverlay}\n            onClickOutside={closeOverlay}\n            width=\"auto\"\n            anchorSide={'inside-left'}\n            right={0}\n            position=\"fixed\"\n            role={role}\n            aria-modal={role === 'dialog' ? 'true' : undefined}\n            aria-label={role === 'dialog' ? 'Right aligned overlay' : undefined}\n            ref={containerRef}\n          >\n            <div className={classes.ResponsiveWidthContainer}>\n              <div className={classes.OverlayFullHeight}>\n                <IconButton\n                  aria-label=\"Close\"\n                  onClick={closeOverlay}\n                  icon={XIcon}\n                  variant=\"invisible\"\n                  className={classes.CloseButtonRight}\n                />\n                <Text>Look! right aligned</Text>\n              </div>\n            </div>\n          </Overlay>\n        )\n      ) : null}\n    </div>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -4505,7 +4452,7 @@
         {
           "name": "maxHeight",
           "type": "| 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-          "defaultValue": "",
+          "defaultValue": "100vh",
           "description": "Sets the maximum height of the `Overlay`, pick from our set list of heights. `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`."
         },
         {
@@ -4565,7 +4512,7 @@
           "type": "'hidden' | 'scroll' | 'auto' | 'visible'",
           "required": false,
           "description": "",
-          "defaultValue": ""
+          "defaultValue": "hidden"
         },
         {
           "name": "preventOverflow",
@@ -5460,11 +5407,6 @@
           "type": "function",
           "defaultValue": "(props: PageProps) => ReactNode",
           "description": "Provide a custom component or render prop to render each page link within the component."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -5473,15 +5415,15 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/PointerBox",
       "id": "pointer_box",
       "name": "PointerBox",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-pointerbox--default",
+          "id": "deprecated-components-pointerbox--default",
           "code": "() => <PointerBox>Pointer box content</PointerBox>"
         }
       ],
-      "importPath": "@primer/react",
+      "importPath": "@primer/react/deprecated",
       "props": [
         {
           "name": "bg",
@@ -5600,19 +5542,19 @@
       "stories": [
         {
           "id": "behaviors-portal--default",
-          "code": "() => (\n  <>\n    Root position\n    <Box bg=\"red.2\" p={3}>\n      Outer container\n      <Box bg=\"green.2\" p={3}>\n        Inner container\n        <Portal>\n          Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.\n        </Portal>\n      </Box>\n    </Box>\n  </>\n)"
+          "code": "() => (\n  <>\n    Root position\n    <div className={clsx(classes.PortalContainer, classes.OuterContainer)}>\n      Outer container\n      <div className={clsx(classes.PortalContainer, classes.InnerContainer)}>\n        Inner container\n        <Portal>\n          Portaled content rendered at <code>&lt;BaseStyles&gt;</code> root.\n        </Portal>\n      </div>\n    </div>\n  </>\n)"
         },
         {
           "id": "behaviors-portal-features--custom-portal-root-by-id",
-          "code": "() => (\n  <>\n    Root position\n    <Box bg=\"red.2\" p={3} id=\"__primerPortalRoot__\">\n      Outer container\n      <Box bg=\"green.2\" p={3}>\n        Inner container\n        <Portal>Portaled content rendered at the outer container.</Portal>\n      </Box>\n    </Box>\n  </>\n)"
+          "code": "() => (\n  <>\n    Root position\n    <div\n      className={clsx(classes.PortalContainer, classes.OuterContainer)}\n      id=\"__primerPortalRoot__\"\n    >\n      Outer container\n      <div className={clsx(classes.PortalContainer, classes.InnerContainer)}>\n        Inner container\n        <Portal>Portaled content rendered at the outer container.</Portal>\n      </div>\n    </div>\n  </>\n)"
         },
         {
           "id": "behaviors-portal-features--custom-portal-root-by-registration",
-          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <Box bg=\"red.2\" p={3} ref={outerContainerRef}>\n        {mounted ? (\n          <>\n            Outer container\n            <Box bg=\"green.2\" p={3}>\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </Box>\n          </>\n        ) : null}\n      </Box>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        {mounted ? (\n          <>\n            Outer container\n            <div\n              className={clsx(classes.PortalContainer, classes.InnerContainer)}\n            >\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </div>\n          </>\n        ) : null}\n      </div>\n    </>\n  )\n}"
         },
         {
           "id": "behaviors-portal-features--multiple-portal-roots",
-          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const innerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (\n      outerContainerRef.current instanceof HTMLElement &&\n      innerContainerRef.current instanceof HTMLElement\n    ) {\n      registerPortalRoot(outerContainerRef.current, 'outer')\n      registerPortalRoot(innerContainerRef.current, 'inner')\n      setMounted(true)\n    }\n  }, [outerContainerRef])\n  return (\n    <>\n      Root position\n      <Box bg=\"red.2\" p={3} ref={outerContainerRef}>\n        Outer container\n        <Box bg=\"green.2\" p={3} ref={innerContainerRef}>\n          {mounted ? (\n            <>\n              <Portal containerName=\"outer\">\n                Portaled content rendered at the outer container.\n              </Portal>\n              <Portal containerName=\"inner\">\n                Portaled content rendered at the end of the inner container.\n              </Portal>\n              <Portal>\n                Portaled content rendered at <code>&lt;BaseStyles&gt;</code>{' '}\n                root.\n              </Portal>\n            </>\n          ) : null}\n          Inner container\n        </Box>\n      </Box>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const innerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (\n      outerContainerRef.current instanceof HTMLElement &&\n      innerContainerRef.current instanceof HTMLElement\n    ) {\n      registerPortalRoot(outerContainerRef.current, 'outer')\n      registerPortalRoot(innerContainerRef.current, 'inner')\n      setMounted(true)\n    }\n  }, [outerContainerRef])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        Outer container\n        <div\n          className={clsx(classes.PortalContainer, classes.InnerContainer)}\n          ref={innerContainerRef}\n        >\n          {mounted ? (\n            <>\n              <Portal containerName=\"outer\">\n                Portaled content rendered at the outer container.\n              </Portal>\n              <Portal containerName=\"inner\">\n                Portaled content rendered at the end of the inner container.\n              </Portal>\n              <Portal>\n                Portaled content rendered at <code>&lt;BaseStyles&gt;</code>{' '}\n                root.\n              </Portal>\n            </>\n          ) : null}\n          Inner container\n        </div>\n      </div>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -6681,11 +6623,6 @@
           "type": "string",
           "description": "The className of the skeleton box",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -7711,47 +7648,47 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/TextInputWithTokens",
       "id": "text_input_with_tokens",
       "name": "TextInputWithTokens",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-textinputwithtokens--default",
+          "id": "deprecated-components-textinputwithtokens--default",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} />\n    </FormControl>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--with-leading-visual",
+          "id": "deprecated-components-textinputwithtokens-features--with-leading-visual",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInputWithTokens\n        leadingVisual={NumberIcon}\n        tokens={tokens}\n        onTokenRemove={onTokenRemove}\n      />\n    </FormControl>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--with-trailing-visual",
+          "id": "deprecated-components-textinputwithtokens-features--with-trailing-visual",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <FormControl>\n      <FormControl.Label>Default label</FormControl.Label>\n      <TextInputWithTokens\n        trailingVisual={CheckIcon}\n        tokens={tokens}\n        onTokenRemove={onTokenRemove}\n      />\n    </FormControl>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--with-loading-indicator",
+          "id": "deprecated-components-textinputwithtokens-features--with-loading-indicator",
           "code": "(args: FormControlArgs<TextInputWithTokensProps>) => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form className={classes.Grid}>\n      <FormControl>\n        <FormControl.Label>No visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Leading visual</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n        />\n      </FormControl>\n\n      <FormControl>\n        <FormControl.Label>Both visuals</FormControl.Label>\n        <TextInputWithTokens\n          {...args}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          leadingVisual={NumberIcon}\n          trailingVisual={CheckIcon}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--using-issue-label-tokens",
+          "id": "deprecated-components-textinputwithtokens-features--using-issue-label-tokens",
           "code": "() => {\n  const [tokens, setTokens] = useState([\n    {\n      text: 'enhancement',\n      id: 1,\n      fillColor: '#a2eeef',\n    },\n    {\n      text: 'bug',\n      id: 2,\n      fillColor: '#d73a4a',\n    },\n    {\n      text: 'good first issue',\n      id: 3,\n      fillColor: '#0cf478',\n    },\n  ])\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokenComponent={IssueLabelToken}\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--unstyled",
+          "id": "deprecated-components-textinputwithtokens-features--unstyled",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label visuallyHidden>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          className={classes.Unstyled}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--prevent-tokens-from-wrapping",
+          "id": "deprecated-components-textinputwithtokens-features--prevent-tokens-from-wrapping",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          preventTokenWrapping\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--max-height",
+          "id": "deprecated-components-textinputwithtokens-features--max-height",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 7))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <div className={classes.MaxWidth}>\n      {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */}\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          maxHeight={70}\n          block // `block` only needed to fill parent width without overflowing\n        />\n      </FormControl>\n    </div>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--size",
+          "id": "deprecated-components-textinputwithtokens-features--size",
           "code": "() => {\n  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          size=\"small\"\n        />\n      </FormControl>\n    </form>\n  )\n}"
         },
         {
-          "id": "components-textinputwithtokens-features--truncated",
+          "id": "deprecated-components-textinputwithtokens-features--truncated",
           "code": "() => {\n  const [tokens, setTokens] = useState(mockTokens)\n  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {\n    setTokens(tokens.filter((token) => token.id !== tokenId))\n  }\n  return (\n    <form>\n      <FormControl>\n        <FormControl.Label>Default label</FormControl.Label>\n        <TextInputWithTokens\n          tokens={tokens}\n          onTokenRemove={onTokenRemove}\n          visibleTokenCount={5}\n        />\n      </FormControl>\n    </form>\n  )\n}"
         }
       ],
@@ -9011,7 +8948,7 @@
       "stories": [
         {
           "id": "deprecated-components-selectpanel--default",
-          "code": "() => {\n  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels\n  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(\n    initialSelectedLabels,\n  )\n\n  /* Selection */\n  const onLabelSelect = (labelId: string) => {\n    if (!selectedLabelIds.includes(labelId))\n      setSelectedLabelIds([...selectedLabelIds, labelId])\n    else setSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId))\n  }\n  const onClearSelection = () => {\n    setSelectedLabelIds([])\n  }\n  const onSubmit = () => {\n    data.issue.labelIds = selectedLabelIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedLabelIds(initialSelectedLabels)\n  }\n\n  /* Filtering */\n  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredLabels(data.labels)\n    else {\n      setFilteredLabels(\n        data.labels\n          .map((label) => {\n            if (label.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                label,\n              }\n            else if (label.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                label,\n              }\n            else if (label.description?.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                label,\n              }\n            else\n              return {\n                priority: -1,\n                label,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.label),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.labelIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)\n  return (\n    <>\n      <SelectPanel\n        title=\"Select labels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            aria-label=\"Search\"\n            onChange={onSearchInputChange}\n          />\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((label) => (\n              <ActionList.Item\n                key={label.id}\n                onSelect={() => onLabelSelect(label.id)}\n                selected={selectedLabelIds.includes(label.id)}\n              >\n                <ActionList.LeadingVisual>\n                  <Box\n                    sx={{\n                      width: 14,\n                      height: 14,\n                      borderRadius: '100%',\n                    }}\n                    style={{\n                      backgroundColor: `#${label.color}`,\n                    }}\n                  />\n                </ActionList.LeadingVisual>\n                {label.name}\n                <ActionList.Description variant=\"block\">\n                  {label.description}\n                </ActionList.Description>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction variant=\"button\">\n            Edit labels\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels\n  const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(\n    initialSelectedLabels,\n  )\n\n  /* Selection */\n  const onLabelSelect = (labelId: string) => {\n    if (!selectedLabelIds.includes(labelId))\n      setSelectedLabelIds([...selectedLabelIds, labelId])\n    else setSelectedLabelIds(selectedLabelIds.filter((id) => id !== labelId))\n  }\n  const onClearSelection = () => {\n    setSelectedLabelIds([])\n  }\n  const onSubmit = () => {\n    data.issue.labelIds = selectedLabelIds // pretending to persist changes\n  }\n  const onCancel = () => {\n    setSelectedLabelIds(initialSelectedLabels)\n  }\n\n  /* Filtering */\n  const [filteredLabels, setFilteredLabels] = React.useState(data.labels)\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n    if (query === '') setFilteredLabels(data.labels)\n    else {\n      setFilteredLabels(\n        data.labels\n          .map((label) => {\n            if (label.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                label,\n              }\n            else if (label.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                label,\n              }\n            else if (label.description?.toLowerCase().includes(query))\n              return {\n                priority: 3,\n                label,\n              }\n            else\n              return {\n                priority: -1,\n                label,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.label),\n      )\n    }\n  }\n  const sortingFn = (\n    itemA: {\n      id: string\n    },\n    itemB: {\n      id: string\n    },\n  ) => {\n    const initialSelectedIds = data.issue.labelIds\n    if (\n      initialSelectedIds.includes(itemA.id) &&\n      initialSelectedIds.includes(itemB.id)\n    )\n      return 1\n    else if (initialSelectedIds.includes(itemA.id)) return -1\n    else if (initialSelectedIds.includes(itemB.id)) return 1\n    else return 1\n  }\n  const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)\n  return (\n    <>\n      <SelectPanel\n        title=\"Select labels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n        onClearSelection={onClearSelection}\n      >\n        <SelectPanel.Button>Assign label</SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput\n            aria-label=\"Search\"\n            onChange={onSearchInputChange}\n          />\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((label) => (\n              <ActionList.Item\n                key={label.id}\n                onSelect={() => onLabelSelect(label.id)}\n                selected={selectedLabelIds.includes(label.id)}\n              >\n                <ActionList.LeadingVisual>\n                  <div\n                    className={sharedClasses.Circle}\n                    style={{\n                      backgroundColor: `#${label.color}`,\n                    }}\n                  />\n                </ActionList.LeadingVisual>\n                {label.name}\n                <ActionList.Description variant=\"block\">\n                  {label.description}\n                </ActionList.Description>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction variant=\"button\">\n            Edit labels\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-examples--minimal",
@@ -9019,7 +8956,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--short-select-panel",
-          "code": "() => {\n  const initialChannels = {\n    GitHub: false,\n    Email: false,\n  }\n  const [channels, setChannels] = React.useState(initialChannels)\n  const [onlyFailures, setOnlyFailures] = React.useState(false)\n  const onSubmit = () => {\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setChannels(initialChannels)\n  }\n  const toggleChannel = (channel: keyof typeof channels) => {\n    setChannels({\n      ...channels,\n      [channel]: !channels[channel],\n    })\n  }\n  const channelsEnabled = channels.GitHub || channels.Email\n  return (\n    <>\n      <h1>Short SelectPanel</h1>\n      <p>\n        Use <code>height=fit-content</code> to match height of contents\n      </p>\n      <SelectPanel\n        title=\"Select notification channels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button>\n          <Text\n            sx={{\n              color: 'fg.muted',\n            }}\n          >\n            Notify me:\n          </Text>{' '}\n          {Object.keys(channels)\n            .filter((channel) => channels[channel as keyof typeof channels])\n            .join(', ') || 'Never'}\n          {onlyFailures && channelsEnabled && ' (Failed workflows only)'}\n        </SelectPanel.Button>\n\n        <ActionList>\n          <ActionList.Item\n            selected={channels.GitHub}\n            onSelect={() => toggleChannel('GitHub')}\n          >\n            On GitHub\n          </ActionList.Item>\n          <ActionList.Item\n            selected={channels.Email}\n            onSelect={() => toggleChannel('Email')}\n          >\n            Email\n          </ActionList.Item>\n          <Box\n            role=\"none\"\n            sx={{\n              transition: 'max-height 100ms ease-out, opacity 100ms ease-out',\n              opacity: channelsEnabled ? 1 : 0,\n              maxHeight: channelsEnabled ? '100px' : 0,\n              overflow: channelsEnabled ? 'visible' : 'hidden',\n            }}\n          >\n            <ActionList.Divider />\n            <ActionList.Item\n              selected={onlyFailures}\n              onSelect={() => setOnlyFailures(!onlyFailures)}\n            >\n              Only notify for failed workflows\n            </ActionList.Item>\n          </Box>\n        </ActionList>\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const initialChannels = {\n    GitHub: false,\n    Email: false,\n  }\n  const [channels, setChannels] = React.useState(initialChannels)\n  const [onlyFailures, setOnlyFailures] = React.useState(false)\n  const onSubmit = () => {\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setChannels(initialChannels)\n  }\n  const toggleChannel = (channel: keyof typeof channels) => {\n    setChannels({\n      ...channels,\n      [channel]: !channels[channel],\n    })\n  }\n  const channelsEnabled = channels.GitHub || channels.Email\n  return (\n    <>\n      <h1>Short SelectPanel</h1>\n      <p>\n        Use <code>height=fit-content</code> to match height of contents\n      </p>\n      <SelectPanel\n        title=\"Select notification channels\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button>\n          <Text\n            sx={{\n              color: 'fg.muted',\n            }}\n          >\n            Notify me:\n          </Text>{' '}\n          {Object.keys(channels)\n            .filter((channel) => channels[channel as keyof typeof channels])\n            .join(', ') || 'Never'}\n          {onlyFailures && channelsEnabled && ' (Failed workflows only)'}\n        </SelectPanel.Button>\n\n        <ActionList>\n          <ActionList.Item\n            selected={channels.GitHub}\n            onSelect={() => toggleChannel('GitHub')}\n          >\n            On GitHub\n          </ActionList.Item>\n          <ActionList.Item\n            selected={channels.Email}\n            onSelect={() => toggleChannel('Email')}\n          >\n            Email\n          </ActionList.Item>\n          <div\n            role=\"none\"\n            className={`${classes.TransitionBox} ${channelsEnabled ? classes.TransitionBoxVisible : classes.TransitionBoxHidden}`}\n          >\n            <ActionList.Divider />\n            <ActionList.Item\n              selected={onlyFailures}\n              onSelect={() => setOnlyFailures(!onlyFailures)}\n            >\n              Only notify for failed workflows\n            </ActionList.Item>\n          </div>\n        </ActionList>\n        <SelectPanel.Footer />\n      </SelectPanel>\n    </>\n  )\n}"
         },
         {
           "id": "deprecated-components-selectpanel-features--instant-selection-variant",
@@ -9047,7 +8984,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-filter-buttons",
-          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <Box\n            id=\"filters\"\n            sx={{\n              display: 'flex',\n              marginTop: 1,\n            }}\n          >\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight:\n                  selectedFilter === 'branches' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </Box>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight:\n                  selectedFilter === 'branches' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              sx={{\n                fontWeight: selectedFilter === 'tags' ? 'semibold' : 'normal',\n                color: 'fg.default',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",