@primer/react-brand 0.74.0-rc.ffd69649 → 0.74.0

package/docs/components/Card/index.md

@@ -96,9 +96,9 @@ _Don't use both icon and image as the visual asset._
 
 ### Label
 
-The label can be used to indicate the type of content or its status. For example, use it to indicate that the content is `new` or that it is a `beta` feature. The label is optional and can be used along with a visual asset.
+Use `Card.Label` for displaying one short label above the heading. It renders a [Token](../Token/index.md) by default.
 
-![An image showing two cards, one with a Label and another one with Label and Icon.](https://github.com/primer/brand/assets/6951037/3e16bb51-9e19-4a98-a9c2-e289d4bf540c)
+Prefer `Card.Tokens` for showing groups of metadata. Both are optional. Never place the standalone [Label](../Label/index.md) component inside or alongside a Card.
 
 ### Heading
 

package/docs/components/Card/react.md

@@ -101,8 +101,7 @@ Use `Card.Tokens` to display one or more [Token](../Token/index.md) components b
 
 ### Label
 
-Use `Card.Label` to display a short label above the heading. It renders a `Token` by default. Use
-`variant="accent-text"` for eyebrow-style copy.
+Use `Card.Label` for displaying one short label above the heading.
 
 ```jsx
 <Card href="https://github.com" ctaVariant="arrow">
@@ -197,7 +196,7 @@ When an image should stretch to fill the card width, set `padding="none"` on `Ca
 
 ### Tokens
 
-Use `Card.Tokens` to display more than one [Token](../Token/index.md).
+Use `Card.Tokens` to display one or more [Token](../Token/index.md) components.
 
 ```jsx
 <>

package/docs/components/InlineCode/index.md

@@ -0,0 +1,53 @@
+---
+title: Inline code
+description: Use InlineCode to render a short inline code fragment.
+keywords: ['code', 'command', 'filename', 'inline']
+source: https://github.com/primer/brand/blob/main/packages/react/src/InlineCode/InlineCode.tsx
+storybook: '/brand/storybook/?path=/story/components-inlinecode--playground'
+---
+
+```js
+import {InlineCode} from '@primer/react-brand'
+```
+
+## Usage
+
+Use inline code for short code fragments such as commands, filenames, API names, configuration keys and values.
+
+## Examples
+
+### Default
+
+```jsx
+<Text as="p">
+  Install Primer Brand with <InlineCode>npm install @primer/react-brand</InlineCode>.
+</Text>
+```
+
+### In a heading
+
+```jsx
+<Heading>
+  Work directly with your GitHub Issues via <InlineCode wrap={false}>/mcp</InlineCode> support
+</Heading>
+```
+
+### Wrapping
+
+`InlineCode` wraps by default to prevent long fragments from overflowing their container. Use `wrap={false}` only for
+slash commands that must remain together and have a low character count.
+
+```jsx
+<Text as="p">
+  Long commands wrap when needed: <InlineCode>npm install @primer/react-brand@latest --save-exact</InlineCode>. Short
+  slash commands can remain together: <InlineCode wrap={false}>/mcp</InlineCode>.
+</Text>
+```
+
+## Component props
+
+| Name   | Type      | Default | Description                                  |
+| :----- | :-------- | :-----: | :------------------------------------------- |
+| `wrap` | `boolean` |  `true` | Controls whether the code fragment can wrap. |
+
+`InlineCode` renders a native `code` element and accepts its standard HTML attributes.

package/docs/components/Label/index.md

@@ -1,76 +1,44 @@
 ---
 title: Label
-description: Use the label component to add metadata or indicate the status of items.
-keywords: ['badge', 'tag', 'metadata', 'status', 'indicator']
+description: Use label to display short status or metadata attached to an object in product-like UI.
+keywords: ['product UI', 'data table', 'issue metadata', 'status', 'indicator']
 ---
 
 ![An image showing a group of labels with different styles, colors, leading icons and content.](https://github.com/primer/brand/assets/6951037/1c9c6b81-0a2a-4a56-a9f5-a9608f89e220)
 
 ## Usage
 
-Use labels to indicate the status of an item or to help oraganize and categorize them. E.g, using "New" or "Recommended". Labels aren't meant to be used as interactive elements. Instead use the [Button](../Button/index.md) component.
+Use Label to display short status or metadata attached to an object in product-like UI, such as a data-table row,
+dashboard item, application workflow, or GitHub issue. Keep it visually attached to the object it describes. Label is
+not interactive and should not be used as an isolated eyebrow or pre-heading marker.
 
-**✅ Do**
-
-![](https://github.com/primer/brand/assets/6951037/5da25ec0-a780-4add-972a-246bf9462e07)
-
-_Use labels to categorize an item._
-
-**❌ Don't**
-
-![](https://github.com/primer/brand/assets/6951037/976d645c-17ba-45ff-97ea-03c81a4c3b53)
-
-_Don't use labels as an interactive or navigational element. Use a button or a link component._
-
-Position the labels to clearly identify the object they’re informing.
-
-**✅ Do**
-
-![](https://github.com/primer/brand/assets/6951037/467449ad-013d-4b9c-9eec-a4655c4d13ec)
-
-_Give labels enough space to be clearly identified. Use size or color to differentiate them if needed._
-
-**❌ Don't**
-
-![](https://github.com/primer/brand/assets/6951037/5a32b608-2bc7-417b-b064-42c2308075ea)
-
-_When used along with other items, don't place the label too close to them._
+Choose a size and color that fit the surrounding product UI without relying on color alone to communicate meaning.
 
 ### Content
 
-Use Label with with short, scannable text. If possible, use a single word to describe the status of an object. Use two or more words if you need to describe a complex state or category. For example, “Limited availability" or "Enterprise only".
+Use Label with short, scannable text. A single word is ideal. Use two or more words only when a record's status needs more context, such as “Limited availability" or “Enterprise only".
 
 ## Options
 
 ### Size
 
-Labels come in two sizes: `medium`, and `large`.
-
-### Medium
+Labels come in three sizes: `small`, `medium`, and `large`. Prefer the smallest size that remains legible in the product UI context.
 
-Use the `medium` size when paired with medium-sized headings or in components such as `Card`.
+### Small
 
-![](https://github.com/primer/brand/assets/912236/2bca5ddd-2422-41a1-a32c-dc6be243f9ce)
+Use the `small` size for compact data rows and issue-style metadata.
 
-_The Card component allows for a medium label to provide extra meta data to the content. In a group of stacked cards,
-the label helps to quickly scan certain items._
-
-![](https://github.com/primer/brand/assets/6951037/c51e151c-d93a-42f8-bf73-6bd15b1c3781)
+### Medium
 
-_Medium labels are great for headings that introduce a section. They help categorize the main topic and provide a
-visual break._
+Use the `medium` size when record metadata needs more emphasis than the small treatment.
 
 ### Large
 
-Use the `large` size when paired with large headings, such as in the `Hero` component.
-
-![](https://github.com/primer/brand/assets/6951037/13f9debc-3b20-4f77-a509-b8291ca677ae)
-
-_Use large labels with headings that introduce a page. Use it to introduce the main topic or application._
+Use the `large` size only when product-like UI needs a particularly prominent status treatment.
 
 ### Color
 
-The label offers color options from the [Primer Brand color palette](../../primitives/color.md). These color choices are carefully curated to ensure optimal contrast with the background or surrounding elements. Colors options doesn't follow a strict functional meaning. We recommend using the colors that best fit the context of your application. For example, blue and purple gradient for `Copilot` examples.
+Label offers color options from the [Primer Brand color palette](../../primitives/color.md). Choose a color that helps distinguish record metadata without relying on color alone to communicate status.
 
 ![An image showing multiple label options with different colors.](https://github.com/primer/brand/assets/6951037/41817520-87bb-41bc-9586-95155604b83d)
 

package/docs/components/Label/react.md

@@ -1,7 +1,7 @@
 ---
 title: Label
-description: Use the label component to add metadata or indicate the status of items.
-keywords: ['badge', 'tag', 'metadata', 'status', 'indicator']
+description: Use label to display short status or metadata attached to an object in product-like UI.
+keywords: ['product UI', 'data table', 'issue metadata', 'status', 'indicator']
 ready: true
 figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=6084-28401'
 source: https://github.com/primer/brand/blob/main/packages/react/src/Label/Label.tsx
@@ -10,25 +10,32 @@ a11yReviewed: true
 ---
 
 ```js
-import {Label} from '@primer/react-brand'
+import {Label, Stack, Text} from '@primer/react-brand'
 ```
 
+Use Label to display short status or metadata attached to an object in product-like UI, such as a data-table row,
+dashboard item, application workflow, or GitHub issue. Keep it visually attached to the object it describes. Never use
+Label as an isolated eyebrow or pre-heading marker.
+
 ## Examples
 
 ### Default
 
-This is the default variant for the `Label`component. It corresponds to the `medium` size and `default` color.
+The default Label uses the `medium` size and `default` color. Keep it visually attached to the record it describes.
 
 ```jsx
-<Label>Default</Label>
+<Stack direction="horizontal" alignItems="center" padding="none">
+  <Label>In progress</Label>
+</Stack>
 ```
 
 ### Sizes
 
-Use the `size` prop to adjust the size of the `Label` component. The `small` size is ideal for body text. The `medium` size is recommended for small headings and `large` is suitable for large headings or section intros.
+Use the `size` prop to fit the density and emphasis of product UI metadata. Prefer the smallest size that remains
+legible. Do not choose a size based on a nearby heading.
 
 ```jsx
-<Stack direction="horizontal" alignItems="flex-start" padding="none">
+<Stack direction="horizontal" alignItems="center" padding="none">
   <Label size="small">Small</Label>
   <Label size="medium">Medium</Label>
   <Label size="large">Large</Label>
@@ -37,31 +44,27 @@ Use the `size` prop to adjust the size of the `Label` component. The `small` siz
 
 ### Color
 
-Use the `color` prop to change the color of the `Label` component. The `default` color is recommended for use with neutral backgrounds.
+Use the `color` prop to distinguish metadata attached to the same record. Do not rely on color alone to communicate
+status.
 
 ```jsx
-<Stack direction="horizontal" alignItems="flex-start" padding="none">
-  <Label color="blue">Blue</Label>
-  <Label color="red">Red</Label>
-  <Label color="green-blue">Green blue</Label>
-  <Label color="red">Red</Label>
-  <Label color="pink-blue">Pink blue</Label>
-  <Label color="orange">Orange</Label>
+<Stack direction="horizontal" alignItems="center" padding="none" flexWrap="wrap">
+  <Label color="red">Bug</Label>
+  <Label color="orange">High priority</Label>
+  <Label color="blue">Needs review</Label>
 </Stack>
 ```
 
 ### Leading visual
 
-You can add a leading icon to enhance the visual context. It is recommended you use an [Octicon](https://primer.style/octicons) here.
+Add a leading icon only when it makes product UI metadata easier to scan. Use an [Octicon](https://primer.style/octicons)
+that reinforces the metadata meaning.
 
 ```jsx
-<Stack direction="horizontal" alignItems="flex-start" padding="none">
+<Stack direction="horizontal" alignItems="center" padding="none">
   <Label color="yellow" leadingVisual={<StarIcon />}>
     Starred
   </Label>
-  <Label color="blue-purple" leadingVisual={<CopilotIcon />}>
-    Copilot
-  </Label>
 </Stack>
 ```
 

package/docs/components/MinimalFooter/index.md

@@ -1,6 +1,6 @@
 ---
 title: Minimal footer
-description: Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+description: Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 keywords: ['legal', 'copyright', 'social', 'links', 'footnotes']
 ready: true
 source: https://github.com/primer/brand/blob/main/packages/react/src/MinimalFooter/MinimalFooter.tsx
@@ -22,6 +22,8 @@ import {MinimalFooter} from '@primer/react-brand'
 
 ### Footer links
 
+Use up to five `MinimalFooter.Link` children. Links can render as anchors or buttons.
+
 ```jsx
 <MinimalFooter>
   <MinimalFooter.Link href="https://github.com/organizations/enterprise_plan">Try GitHub for free</MinimalFooter.Link>
@@ -56,7 +58,7 @@ import {MinimalFooter} from '@primer/react-brand'
 
 ### Footer social links
 
-`MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alteratively, pass an array of valid social links to filter the default list.
+`MinimalFooter` will render all supported social links by default. Social links can be removed however, by passing `socialLinks={false}`. Alternatively, pass an array of valid social links to filter and reorder the default list.
 
 ```jsx
 <Stack>
@@ -68,27 +70,69 @@ import {MinimalFooter} from '@primer/react-brand'
 </Stack>
 ```
 
+### Center component
+
+Use `centerComponent` for an exceptional page-specific control or status indicator between the top and bottom sections.
+
+```jsx
+<MinimalFooter
+  centerComponent={
+    <Stack direction="horizontal" gap="condensed" padding="none">
+      <Text size="200" variant="muted">
+        Status:
+      </Text>
+      <InlineLink href="https://www.githubstatus.com" size="200">
+        All systems operational
+      </InlineLink>
+    </Stack>
+  }
+/>
+```
+
+### Back to top
+
+Use `MinimalFooter.BackToTop` to opt into a control in the top row that scrolls the document back to the top.
+
+After keyboard activation, focus moves to the first `<main>` element, falling back to `<body>` or `<html>` when a main landmark is unavailable. Use `focusTargetId` to identify a different semantic top-of-page destination.
+
+```jsx
+<MinimalFooter socialLinks={false}>
+  <MinimalFooter.BackToTop>Back to top</MinimalFooter.BackToTop>
+</MinimalFooter>
+```
+
 ## Component props
 
 ### MinimalFooter
 
-| Name                 | Type                                                                                             |                                        Default                                        | Description                                            |
-| :------------------- | :----------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------: | :----------------------------------------------------- |
-| `className`          | `string`                                                                                         |                                                                                       | Sets a custom class on the root element                |
-| `children`           | `'MinimalFooter.Link' \| 'MinimalFooter.Footnotes'`                                              |                                      `undefined`                                      | Valid child components                                 |
-| `copyrightStatement` | `string` \| `ReactElement`                                                                       |                                                                                       | The copyright statement to be displayed in the footer. |
-| `logoHref`           | `string`                                                                                         |                                 `'https://github.com'`                                | The href for the GitHub logo.                          |
-| `socialLinks`        | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Array of valid strings or `false` to hide all links    |
+| Name                 | Type                                                                                                                |                                        Default                                        | Description                                                        |
+| :------------------- | :------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------------------------------------------: | :----------------------------------------------------------------- |
+| `className`          | `string`                                                                                                            |                                                                                       | Sets a custom class on the root element                            |
+| `centerComponent`    | `ReactElement`                                                                                                      |                                      `undefined`                                      | Renders an optional component between the top and bottom sections. |
+| `children`           | `'MinimalFooter.Link' \| 'MinimalFooter.Footnotes' \| 'MinimalFooter.BackToTop'`                                    |                                      `undefined`                                      | Valid child components                                             |
+| `copyrightStatement` | `string` \| `ReactElement`                                                                                          |                        Current-year GitHub copyright statement                        | The copyright statement displayed in the bottom section.           |
+| `logoHref`           | `string`                                                                                                            |                                 `'https://github.com'`                                | The href for the GitHub logomark.                                  |
+| `socialLinks`        | `Array<'x' \| 'github' \| 'linkedin' \| 'youtube' \| 'facebook' \| 'twitch' \| 'tiktok' \| 'instagram'>` \| `false` | `['x', 'github', 'linkedin', 'youtube', 'facebook', 'twitch', 'tiktok', 'instagram']` | Ordered subset of social links, or `false` to hide all links.      |
 
 ### MinimalFooter.Link
 
 | Name       | Type              |   Default   | Description                         |
 | :--------- | :---------------- | :---------: | :---------------------------------- |
 | `as`       | `'a'`, `'button'` |    `'a'`    | Applies the underlying HTML element |
-| `children` | `string`          | `undefined` | Link label text                     |
+| `children` | `string`          | `undefined` | Label for a link in the top section |
 
 ### MinimalFooter.Footnotes
 
 | Name       | Type         |   Default   | Description                                                           |
 | :--------- | :----------- | :---------: | :-------------------------------------------------------------------- |
 | `children` | ReactElement | `undefined` | Use Primer Brand `Text` components to benefit from inherited styling. |
+
+### MinimalFooter.BackToTop
+
+| Name            | Type                |   Default   | Description                                                                                                                                                    |
+| :-------------- | :------------------ | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`      | `ReactNode`         |   Required  | The visible and accessible localized label.                                                                                                                    |
+| `focusTargetId` | `string`            | `undefined` | ID of the semantic top-of-page element that receives focus after keyboard activation. Defaults to the first `<main>`, then falls back to `<body>` or `<html>`. |
+| `onClick`       | `MouseEventHandler` | `undefined` | Runs before the built-in behavior. Call `event.preventDefault()` to cancel scrolling and focus transfer.                                                       |
+
+All other props, including ARIA and `data-*` attributes, forward to the underlying `<button>`.

package/docs/components/PricingOptions/index.md

@@ -359,7 +359,9 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
 
 ### Info tooltips
 
-Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary tooltip to a feature.
+Use `infoTooltip` on `PricingOptions.FeatureListItem` to add an optional tooltip to a feature.
+
+An `aria-label` is automatically applied to the tooltip trigger. Use `infoTooltipAriaLabel` to customize it.
 
 ```jsx
 <PricingOptions>
@@ -384,6 +386,25 @@ Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary too
 </PricingOptions>
 ```
 
+Use a custom trigger label when conditionally rendered content prevents the feature text from being used as the
+automatically generated label:
+
+```jsx
+function FeatureWithCustomContent({customContent}) {
+  return (
+    <PricingOptions.FeatureListItem
+      infoTooltip="Interact with Copilot using natural language."
+      infoTooltipAriaLabel="More information about Chat in IDE and Mobile"
+    >
+      <>
+        Chat in IDE and Mobile
+        {customContent ? <Text>Custom footnote</Text> : null}
+      </>
+    </PricingOptions.FeatureListItem>
+  )
+}
+```
+
 ### Actions message
 
 Use `PricingOptions.ActionsMessage` to render status, billing, or upgrade notes in the actions area. Add
@@ -490,11 +511,12 @@ One item per pricing plan to be displayed. Maximum of 4 items.
 
 ### PricingOptions.FeatureListItem
 
-| Name          | Type                       |   Default   | required | Description                                               |
-| :------------ | :------------------------- | :---------: | :------: | :-------------------------------------------------------- |
-| `children`    | `ReactNode`                | `undefined` |  `true`  | The item of the feature list set                          |
-| `infoTooltip` | `string`                   | `undefined` |  `false` | Tooltip text shown on hover/focus via an info icon button |
-| `variant`     | `'included' \| 'excluded'` |  `included` |  `false` | The variant of the feature list set                       |
+| Name                   | Type                       |   Default   | required | Description                                                                         |
+| :--------------------- | :------------------------- | :---------: | :------: | :---------------------------------------------------------------------------------- |
+| `children`             | `ReactNode`                | `undefined` |  `true`  | The item of the feature list set                                                    |
+| `infoTooltip`          | `string`                   | `undefined` |  `false` | Tooltip text shown on hover/focus via an info icon button                           |
+| `infoTooltipAriaLabel` | `string`                   | `undefined` |  `false` | Overrides the automatically generated accessible label for the info tooltip trigger |
+| `variant`              | `'included' \| 'excluded'` |  `included` |  `false` | The variant of the feature list set                                                 |
 
 ### PricingOptions.MenuAction
 

package/docs/components/River/react.md

@@ -49,7 +49,6 @@ import {River, RiverBreakout} from '@primer/react-brand'
       <img src="/images/placeholder.png" alt="placeholder, blank area with a gray background color" />
     </River.Visual>
     <River.Content>
-      <Label>Label</Label>
       <Heading>Heading</Heading>
       <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
@@ -271,14 +270,18 @@ The `gridline` variant adds lateral padding and applies a full-bleed visual back
 
 ### River.Content and RiverBreakout.Content `Required`
 
-[`Label`](../Label/index.md), [`Text`](../../typography/Text/index.md),[`Heading`](../../typography/Heading/index.md), `Link` are the only `children` accepted. They can be composed in any order, but their rendered output will always be in a predetermined order.
+`EyebrowText`, [`Text`](../../typography/Text/index.md),
+[`Heading`](../../typography/Heading/index.md), and
+`Link` are the supported `children`. They can be composed in
+any order, but their rendered output will always be in a predetermined order. Standalone `Label` children remain
+rendered for compatibility, but are deprecated; use `EyebrowText` instead.
 
-| Name        | Type                                                                                            | Default | Description                                      |
-| :---------- | :---------------------------------------------------------------------------------------------- | :-----: | :----------------------------------------------- |
-| `children`  | [`Text`](../../typography/Text/index.md),[`Heading`](../../typography/Heading/index.md), `Link` |         | Content that corresponds to the adjacent visual. |
-| `className` | `string`                                                                                        |         | Sets a custom class on the root element          |
-| `id`        | `string`                                                                                        |         | Sets a custom id                                 |
-| `ref`       | `React.RefObject`                                                                               |         | Forward a Ref to the underlying DOM node         |
+| Name        | Type                                                                                                            | Default | Description                                      |
+| :---------- | :-------------------------------------------------------------------------------------------------------------- | :-----: | :----------------------------------------------- |
+| `children`  | `EyebrowText`, [`Text`](../../typography/Text/index.md), [`Heading`](../../typography/Heading/index.md), `Link` |         | Content that corresponds to the adjacent visual. |
+| `className` | `string`                                                                                                        |         | Sets a custom class on the root element          |
+| `id`        | `string`                                                                                                        |         | Sets a custom id                                 |
+| `ref`       | `React.RefObject`                                                                                               |         | Forward a Ref to the underlying DOM node         |
 
 ### RiverBreakout
 

package/docs/components/Token/index.md

@@ -1,6 +1,6 @@
 ---
 title: Token
-description: Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+description: Use Token to display compact metadata that describes or supports adjacent content.
 keywords: ['tag', 'metadata', 'category', 'chip', 'link']
 ready: true
 source: https://github.com/primer/brand/blob/main/packages/react/src/Token/Token.tsx
@@ -12,7 +12,9 @@ a11yReviewed: false
 import {Avatar, Stack, Token} from '@primer/react-brand'
 ```
 
-`Token` is a compact representation of an object, and is typically used to show a collection of related metadata.
+Use Token to display compact metadata that describes or supports adjacent content, such as a category, status, date,
+author, or related topic. Keep it visually attached to the content it describes, and follow each compound component's
+documented child API rather than inserting Token directly.
 
 Keep `Token` content short and easy to scan. A single word is ideal. Two short words are acceptable when the category or type needs more context.
 
@@ -81,6 +83,5 @@ Use a leading visual when it helps users scan the Token more quickly. Octicons,
 
 ## Related components
 
-- [Label](../Label/index.md): For larger non-interactive status and metadata treatments.
 - Link: For inline navigational text.
 - [Button](../Button/index.md): For higher-emphasis actions.

package/docs/components/index.md

@@ -24,10 +24,11 @@ description: Primer Brand UI components
 - [Icon](Icon/index.md): Use the icon component to display Octicons with an optional background
 - [IDE](IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](Image/react.md): Use the image component to display a graphical representation.
-- [Label](Label/react.md): Use the label component to add metadata or indicate the status of items.
+- [Inline code](InlineCode/index.md): Use InlineCode to render a short inline code fragment.
+- [Label](Label/react.md): Use label to display short status or metadata attached to an object in product-like UI.
 - [Logo suite](LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
-- [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 - [Minimal video player](MinimalVideoPlayer/index.md): Use MinimalVideoPlayer for muted, looping product demonstrations with a single play and pause control
 - [NavList](NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
 - [Ordered list](OrderedList/react.md): Use the ordered list component to display a list of numbered items.
@@ -48,7 +49,7 @@ description: Primer Brand UI components
 - [Testimonial](Testimonial/react.md): Use testimonial to display a quote from a customer or user.
 - [Tiles](Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
 - [Timeline](Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
-- [Token](Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+- [Token](Token/index.md): Use Token to display compact metadata that describes or supports adjacent content.
 - [Tooltip](Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
 - [Unordered list](UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering.
 - [Video player](VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.74.0-rc.ffd69649)
+# Primer Brand docs (v0.74.0)
 
-These docs are bundled with `@primer/react-brand@0.74.0-rc.ffd69649` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.74.0` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.
@@ -58,10 +58,11 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Icon](components/Icon/index.md): Use the icon component to display Octicons with an optional background
 - [IDE](components/IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
 - [Image](components/Image/react.md): Use the image component to display a graphical representation.
-- [Label](components/Label/react.md): Use the label component to add metadata or indicate the status of items.
+- [Inline code](components/InlineCode/index.md): Use InlineCode to render a short inline code fragment.
+- [Label](components/Label/react.md): Use label to display short status or metadata attached to an object in product-like UI.
 - [Logo suite](components/LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
 - [Media playlist](components/MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
-- [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
+- [Minimal footer](components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes.
 - [Minimal video player](components/MinimalVideoPlayer/index.md): Use MinimalVideoPlayer for muted, looping product demonstrations with a single play and pause control
 - [NavList](components/NavList/index.md): Use NavList to render vertical navigation with optional expandable groups.
 - [Ordered list](components/OrderedList/react.md): Use the ordered list component to display a list of numbered items.
@@ -82,7 +83,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [Testimonial](components/Testimonial/react.md): Use testimonial to display a quote from a customer or user.
 - [Tiles](components/Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
 - [Timeline](components/Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
-- [Token](components/Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata.
+- [Token](components/Token/index.md): Use Token to display compact metadata that describes or supports adjacent content.
 - [Tooltip](components/Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
 - [Unordered list](components/UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering.
 - [Video player](components/VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos

package/docs/introduction/mcp.md

@@ -14,16 +14,16 @@ It is a version-aware, local (`stdio`) server that reads the docs and metadata o
 
 The server exposes a set of tools that AI agents can call:
 
-| Tool                       | What it does                                                                                                                                         |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `primer_brand_setup`       | Configures Primer Brand first-time and maintains a Primer Brand pointer beside the declaring `package.json`.                                         |
-| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, labels) and the current-brand reference templates to start from. |
-| `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                 |
-| `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                         |
-| `primer_brand_tokens`      | Resolve design tokens by intent (color, space, typography) to CSS variables and values.                                                              |
-| `primer_brand_asset`       | Find Octicons (`@primer/octicons-react`) and Octovisuals (`@primer/octovisuals-react`) more easily                                                   |
-| `primer_brand_docs`        | Search and read Primer Brand guidance, including principles, accessibility and getting started.                                                      |
-| `primer_brand_review`      | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values                                        |
+| Tool                       | What it does                                                                                                                                                    |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `primer_brand_setup`       | Configures Primer Brand first-time and maintains a Primer Brand pointer beside the declaring `package.json`.                                                    |
+| `primer_brand_page_design` | Page-design conventions (header/footer, hero media, gridline aesthetic, card grids, metadata patterns) and the current-brand reference templates to start from. |
+| `primer_brand_component`   | Get a component API information like props, allowed values and named sub-components.                                                                            |
+| `primer_brand_examples`    | Reference examples taken from our Storybook.                                                                                                                    |
+| `primer_brand_tokens`      | Resolve design tokens by intent (color, space, typography) to CSS variables and values.                                                                         |
+| `primer_brand_asset`       | Find Octicons (`@primer/octicons-react`) and Octovisuals (`@primer/octovisuals-react`) more easily                                                              |
+| `primer_brand_docs`        | Search and read Primer Brand guidance, including principles, accessibility and getting started.                                                                 |
+| `primer_brand_review`      | Check generated JSX and CSS against the design system for unknown components, invalid props, hardcoded values                                                   |
 
 ## Set up in VS Code
 

package/esm/Bento/Bento.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Bento.d.ts","sourceRoot":"","sources":["../../src/Bento/Bento.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Bento.d.ts","sourceRoot":"","sources":["../../src/Bento/Bento.tsx"],"names":[],"mappings":"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"}