@primer/react 38.0.0-rc.3 → 38.0.0-rc.4

package/generated/components.json

@@ -1359,7 +1359,7 @@
         },
         {
           "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}"
+          "code": "() => {\n  type Choice = 'one' | 'two' | 'three'\n  const messages: Map<Choice, string> = new Map([\n    ['one', 'This is a message for choice one'],\n    ['two', 'This is a message for choice two'],\n    ['three', 'This is a message for choice three'],\n  ])\n  const [selected, setSelected] = React.useState<Choice>('one')\n  return (\n    <>\n      <Banner\n        title=\"Info\"\n        description={<AriaStatus>{messages.get(selected)}</AriaStatus>}\n        onDismiss={action('onDismiss')}\n        primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}\n        secondaryAction={\n          <Banner.SecondaryAction>Button</Banner.SecondaryAction>\n        }\n      />\n      <RadioGroup\n        name=\"options\"\n        onChange={(selected) => {\n          setSelected(selected as Choice)\n        }}\n        className={classes.RadioGroupWithTopMargin}\n      >\n        <RadioGroup.Label>Choices</RadioGroup.Label>\n        <FormControl>\n          <Radio value=\"one\" defaultChecked />\n          <FormControl.Label>Choice one</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"two\" />\n          <FormControl.Label>Choice two</FormControl.Label>\n        </FormControl>\n        <FormControl>\n          <Radio value=\"three\" />\n          <FormControl.Label>Choice three</FormControl.Label>\n        </FormControl>\n      </RadioGroup>\n    </>\n  )\n}"
         }
       ],
       "props": [
@@ -2151,11 +2151,6 @@
       ],
       "importPath": "@primer/react",
       "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -2243,11 +2238,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -2322,11 +2312,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "If true, the user must make a selection before the owning form can be submitted"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -2338,11 +2323,6 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "If true, the fieldset legend will be visually hidden"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -2354,11 +2334,6 @@
               "type": "React.ReactNode",
               "defaultValue": "",
               "description": "The caption content"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -2377,11 +2352,6 @@
               "defaultValue": "",
               "required": true,
               "description": "Changes the visual style to match the validation status"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -2564,11 +2534,6 @@
           "type": "string",
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "BetterSystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -3342,27 +3307,27 @@
         },
         {
           "id": "components-flash-features--success",
-          "code": "() => (\n  <Flash\n    variant=\"success\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={CheckCircleIcon} aria-label=\"Success\" />\n    </div>\n    <div className={classes.Message}>Success</div>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"success\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <CheckCircleIcon aria-label=\"Success\" />\n    </div>\n    <div className={classes.Message}>Success</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--danger",
-          "code": "() => (\n  <Flash\n    variant=\"danger\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={InfoIcon} aria-label=\"Danger\" />\n    </div>\n    <div className={classes.Message}>Danger</div>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"danger\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Danger\" />\n    </div>\n    <div className={classes.Message}>Danger</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--warning",
-          "code": "() => (\n  <Flash\n    variant=\"warning\"\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={AlertIcon} aria-label=\"Warning\" />\n    </div>\n    <div className={classes.Message}>Warning</div>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    variant=\"warning\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <AlertIcon aria-label=\"Warning\" />\n    </div>\n    <div className={classes.Message}>Warning</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--full",
-          "code": "() => (\n  <Flash\n    full\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <Octicon icon={InfoIcon} aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>Full</div>\n  </Flash>\n)"
+          "code": "() => (\n  <Flash\n    full\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>Full</div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--with-icon-and-action",
-          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message'\n        '.      actions'\n      `,\n      },\n    }}\n  >\n    <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)"
+          "code": "() => (\n  <Flash className={classes.WithIconAndAction}>\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n  </Flash>\n)"
         },
         {
           "id": "components-flash-features--with-icon-action-dismiss",
-          "code": "() => (\n  <Flash\n    sx={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateRows: 'min-content',\n      gridTemplateAreas: `'visual message actions close'`,\n      '@media screen and (max-width: 543.98px)': {\n        gridTemplateColumns: 'min-content 1fr',\n        gridTemplateRows: 'min-content min-content',\n        gridTemplateAreas: `\n        'visual message close'\n        '.      actions actions'\n      `,\n      },\n    }}\n  >\n    <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)"
+          "code": "() => (\n  <Flash className={classes.WithIconActionDismiss}>\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n    <div className={classes.Close}>\n      <IconButton variant=\"invisible\" icon={XIcon} aria-label=\"Dismiss\" />\n    </div>\n  </Flash>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -3387,11 +3352,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"div\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -3653,11 +3613,11 @@
       "stories": [
         {
           "id": "components-header--default",
-          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link\n        href=\"#\"\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        <Octicon\n          icon={MarkGithubIcon}\n          size={32}\n          sx={{\n            mr: 2,\n          }}\n        />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item full>Menu</Header.Item>\n    <Header.Item\n      sx={{\n        mr: 0,\n      }}\n    >\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
+          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link href=\"#\" className={classes.HeaderLink}>\n        <MarkGithubIcon className={classes.Icon} size={32} />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item full>Menu</Header.Item>\n    <Header.Item className={classes.AvatarContainer}>\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
         },
         {
           "id": "components-header-features--with-full-size-item",
-          "code": "() => (\n  <Header>\n    <Header.Item>Item 1</Header.Item>\n    <Header.Item full>Item 2</Header.Item>\n    <Header.Item\n      sx={{\n        mr: 0,\n      }}\n    >\n      Item 3\n    </Header.Item>\n  </Header>\n)"
+          "code": "() => (\n  <Header>\n    <Header.Item>Item 1</Header.Item>\n    <Header.Item full>Item 2</Header.Item>\n    <Header.Item className={classes.LastItem}>Item 3</Header.Item>\n  </Header>\n)"
         },
         {
           "id": "components-header-features--with-links",
@@ -3665,17 +3625,11 @@
         },
         {
           "id": "components-header-features--with-many-items",
-          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link\n        href=\"#\"\n        sx={{\n          fontSize: 2,\n        }}\n      >\n        <Octicon\n          icon={MarkGithubIcon}\n          size={32}\n          sx={{\n            mr: 2,\n          }}\n        />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item\n      sx={{\n        mr: 0,\n      }}\n    >\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
+          "code": "() => (\n  <Header>\n    <Header.Item>\n      <Header.Link className={classes.Logo} href=\"#\">\n        <MarkGithubIcon className={classes.Icon} size={32} />\n        <span>GitHub</span>\n      </Header.Link>\n    </Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item>Item</Header.Item>\n    <Header.Item className={classes.LastItem}>\n      <Avatar\n        src=\"https://github.com/octocat.png\"\n        size={20}\n        square\n        alt=\"@octocat\"\n      />\n    </Header.Item>\n  </Header>\n)"
         }
       ],
       "importPath": "@primer/react",
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        }
-      ],
+      "props": [],
       "subcomponents": [
         {
           "name": "Header.Item",
@@ -3685,11 +3639,6 @@
               "type": "string",
               "defaultValue": "",
               "description": "Stretches item to fill the available space"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -3706,11 +3655,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {
@@ -4660,11 +4604,6 @@
           "type": "AriaRole",
           "description": "The ARIA role to assign to the top-level node of this component."
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "as",
           "type": "React.ElementType",
@@ -4691,11 +4630,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4725,11 +4659,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "`{ narrow: false regular: true wide: true }`",
               "description": "Whether the parent link is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4747,11 +4676,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4769,11 +4693,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4797,11 +4716,6 @@
               "type": "| 'subtitle' | 'medium' | 'large' | { narrow?: | 'subtitle' | 'medium' | 'large' regular?: | 'subtitle' | 'medium' | 'large' wide?: | 'subtitle' | 'medium' | 'large' }",
               "defaultValue": "medium",
               "description": "Default title (medium) is the most common page title size. Use for static titles in most situations.\nLarge variant should be used for user-generated content such as issues, pull requests, or discussions.\nSubtitle variant can be used when a PageHeader.Title is already present in the page, such as in a SplitPageLayout."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4819,11 +4733,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4841,11 +4750,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4864,11 +4768,6 @@
               "defaultValue": "false",
               "description": "Whether the content is hidden."
             },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            },
             {
               "name": "as",
               "type": "React.ElementType",
@@ -4890,11 +4789,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4912,11 +4806,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4934,11 +4823,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4956,11 +4840,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -4978,11 +4857,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
@@ -5016,11 +4890,6 @@
               "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
               "defaultValue": "false",
               "description": "Whether the content is hidden."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         }
@@ -5349,11 +5218,6 @@
           "type": "string",
           "defaultValue": "div",
           "description": "Sets the underlying HTML tag for the component"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -5441,47 +5305,6 @@
       ],
       "subcomponents": []
     },
-    "pointer_box": {
-      "source": "https://github.com/primer/react/tree/main/packages/react/src/PointerBox",
-      "id": "pointer_box",
-      "name": "PointerBox",
-      "status": "deprecated",
-      "a11yReviewed": "2025-01-08",
-      "stories": [
-        {
-          "id": "deprecated-components-pointerbox--default",
-          "code": "() => <PointerBox>Pointer box content</PointerBox>"
-        }
-      ],
-      "importPath": "@primer/react/deprecated",
-      "props": [
-        {
-          "name": "bg",
-          "type": "string | string & (string | number | symbol | null)[] | string & { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; }",
-          "description": "Background color of the box\nThe color utility parses a component's `color` and `bg` props and converts them into CSS declarations.\nBy default the raw value of the prop is returned.\n\nColor palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation.\nArray values are converted into responsive values.\n\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)",
-          "defaultValue": ""
-        },
-        {
-          "name": "border",
-          "type": "string | number | string & (Border<TLengthStyledSystem> | null)[] | string & { [x: string]: Border<TLengthStyledSystem> | undefined; [x: number]: Border<TLengthStyledSystem> | undefined; } | number & (Border<TLengthStyledSystem> | null)[] | number & { [x: string]: Border<TLengthStyledSystem> | undefined; [x: number]: Border<TLengthStyledSystem> | undefined; }",
-          "description": "Width of the border around the box\nThe border CSS property sets an element's border. It's a shorthand for border-width, border-style,\nand border-color.\n\n[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border)",
-          "defaultValue": ""
-        },
-        {
-          "name": "borderColor",
-          "type": "string | string & (string | number | symbol | null)[] | string & { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; }",
-          "description": "Color of the border around the box\nThe border-color shorthand CSS property sets the color of all sides of an element's border.\n\n[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)",
-          "defaultValue": ""
-        },
-        {
-          "name": "caret",
-          "type": "| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'",
-          "defaultValue": "'bottom'",
-          "description": "Sets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top"
-        }
-      ],
-      "subcomponents": []
-    },
     "popover": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/Popover",
       "id": "popover",
@@ -5786,16 +5609,6 @@
         {
           "name": "ref",
           "type": "React.RefObject<HTMLInputElement>"
-        },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"input\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6097,11 +5910,6 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "\"relative-time\""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -6829,11 +6637,6 @@
         {
           "name": "data-*",
           "type": "string"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": []
@@ -7233,11 +7036,6 @@
           "name": "aria-label",
           "type": "string",
           "description": "Used to set the `aria-label` on the top level `<nav>` element."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -7262,23 +7060,12 @@
               "name": "to",
               "type": "string | Partial<Path>",
               "description": "Used when the item is rendered using a component like React Router's `Link`. The path to navigate to."
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ]
         },
         {
           "name": "SubNav.Links",
-          "props": [
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
-            }
-          ]
+          "props": []
         }
       ]
     },
@@ -7879,11 +7666,6 @@
           "type": "React.ElementType",
           "defaultValue": "\"input\""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "className",
           "type": "string | undefined",
@@ -7923,11 +7705,11 @@
         },
         {
           "id": "components-timeline-features--timeline-break",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge\n        sx={{\n          bg: 'done.emphasis',\n        }}\n      >\n        <Octicon\n          icon={GitMergeIcon}\n          color=\"fg.onEmphasis\"\n          aria-label=\"Merged\"\n        />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge className={classes.BadgeWithDoneBackground}>\n        <Octicon\n          icon={GitMergeIcon}\n          color=\"fg.onEmphasis\"\n          aria-label=\"Merged\"\n        />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n    <Timeline.Break />\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitBranchIcon} aria-label=\"Branch\" />\n      </Timeline.Badge>\n      <Timeline.Body>This is a message</Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         },
         {
           "id": "components-timeline-features--with-inline-links",
-          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link\n          href=\"#\"\n          sx={{\n            fontWeight: 'bold',\n            color: 'fg.default',\n            mr: 1,\n            '&:hover': {\n              color: 'var(--fgColor-accent)',\n            },\n          }}\n          muted\n        >\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
+          "code": "() => (\n  <Timeline>\n    <Timeline.Item>\n      <Timeline.Badge>\n        <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n      </Timeline.Badge>\n      <Timeline.Body>\n        <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n          Monalisa\n        </Link>\n        enabled auto-merge (squash)\n      </Timeline.Body>\n    </Timeline.Item>\n  </Timeline>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -8033,6 +7815,10 @@
         {
           "id": "components-toggleswitch-features--controlled",
           "code": "() => {\n  const [isOn, setIsOn] = React.useState(false)\n  const onClick = React.useCallback(() => {\n    setIsOn(!isOn)\n  }, [setIsOn, isOn])\n  const handleSwitchChange = (on: boolean) => {\n    action(`new switch \"on\" state: ${on}`)\n  }\n  return (\n    <>\n      <div\n        className={styles.Row}\n        style={{\n          maxWidth: '300px',\n        }}\n      >\n        <span\n          className={clsx(styles.ColGrow, styles.SwitchLabel)}\n          id=\"switchLabel\"\n        >\n          Notifications\n        </span>\n        <ToggleSwitch\n          onClick={onClick}\n          onChange={handleSwitchChange}\n          checked={isOn}\n          aria-labelledby=\"switchLabel\"\n        />\n      </div>\n      <p>The switch is {isOn ? 'on' : 'off'}</p>\n    </>\n  )\n}"
+        },
+        {
+          "id": "components-toggleswitch-features--with-custom-labels",
+          "code": "() => (\n  <ToggleSwitchStoryWrapper>\n    <span id=\"toggle\" className={styles.ToggleLabel}>\n      Toggle label\n    </span>\n    <ToggleSwitch\n      buttonLabelOn=\"Active\"\n      buttonLabelOff=\"Inactive\"\n      aria-labelledby=\"toggle\"\n    />\n  </ToggleSwitchStoryWrapper>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -8115,6 +7901,18 @@
           "type": "'button' | 'submit' | 'reset'",
           "defaultValue": "'button'",
           "description": "As it’s part of form behavior, this controls whether the button is of type `button`, `submit`, or `reset`."
+        },
+        {
+          "name": "buttonLabelOn",
+          "type": "string",
+          "defaultValue": "'On'",
+          "description": "The text to display when the toggle switch is turned on. Only customize this label if there is a more specific label for the context. For example, you might use 'Show' if the setting is 'Show images'."
+        },
+        {
+          "name": "buttonLabelOff",
+          "type": "string",
+          "defaultValue": "'Off'",
+          "description": "The text to display when the toggle switch is turned off. Only customize this label if there is a more specific label for the context. For example, you might use 'Hide' if the setting is 'Show images'."
         }
       ],
       "subcomponents": []
@@ -8530,6 +8328,11 @@
               "type": "boolean",
               "description": "The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
             },
+            {
+              "name": "secondaryActions",
+              "type": "TreeViewSecondaryActions[]",
+              "description": "An array of secondary actions to render in as a trailing action. Each action should have a 'label', 'icon', and 'onClick' handler."
+            },
             {
               "name": "containIntrinsicSize",
               "type": "string",
@@ -8762,11 +8565,6 @@
           "type": "'inset' | 'flush'",
           "defaultValue": "'inset'",
           "description": "`inset` children are offset horizontally from container edges. `flush` children are flush horizontally with container edges"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ],
       "subcomponents": [
@@ -8807,11 +8605,6 @@
               "name": "as",
               "type": "React.ElementType",
               "defaultValue": "\"a\""
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject",
-              "deprecated": true
             }
           ],
           "passthrough": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.0.0-rc.3",
+  "version": "38.0.0-rc.4",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/DropdownStyles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from './ThemeProvider';
-declare const getDirectionStyles: (theme: Theme, direction: "ne" | "e" | "se" | "s" | "sw" | "w") => string;
-export default getDirectionStyles;
-//# sourceMappingURL=DropdownStyles.d.ts.map

package/dist/DropdownStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownStyles.d.ts","sourceRoot":"","sources":["../src/DropdownStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,iBAAiB,CAAA;AAE1C,QAAA,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,WAAW,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,WA0HxF,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/FilteredActionList/FilteredActionList-96b126d7.css

@@ -1,2 +0,0 @@
-.prc-FilteredActionList-Root-S5E74{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Container-2A9NQ{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-ActionListItem-39lnB:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-39lnB:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-39lnB:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-39lnB:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-rCAiq{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-w5otq{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-dq2yL{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-l34LA{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
-/*# sourceMappingURL=FilteredActionList-96b126d7.css.map */

package/dist/FilteredActionList/FilteredActionList-96b126d7.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAEF,CAEA,mDACE,wGAKF,CAHE,yDCRA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,iCAA2B,CAF3B,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,+BDcA,CAGF,mGACE,wGAKF,CAHE,yGChBA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,iCAA2B,CAF3B,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,+BDsBA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-96b126d7.css","sourcesContent":[".Root {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.Container {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n  flex-grow: 1;\n}\n\n.ActionListItem:focus {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.FullScreenTextInput {\n  @media screen and (--viewportRange-narrow) {\n    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n    @supports (-webkit-touch-callout: none) {\n      font-size: var(--text-title-size-small);\n    }\n  }\n}\n\n.SelectAllContainer {\n  display: flex;\n  align-items: center;\n  padding-block: var(--base-size-4);\n  padding-inline: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n  /* -1px hack to offset 1px border-bottom causing uneven alignment */\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: calc(50% - var(--base-size-12));\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}