@primer/react-brand 0.70.0-rc.4599efb5 → 0.70.0-rc.9ef718be

package/docs/components/NavList/index.md

@@ -0,0 +1,210 @@
+---
+title: NavList
+description: Use NavList to render vertical navigation with optional expandable groups.
+keywords: ['navigation', 'vertical navigation', 'sidebar', 'nested navigation']
+ready: true
+source: https://github.com/primer/brand/tree/main/packages/react/src/NavList/NavList.tsx
+storybook: '/brand/storybook/?path=/story/components-navlist--playground'
+---
+
+```js
+import {NavList} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<NavList aria-label="Docs navigation">
+  <NavList.Item href="#" aria-current="page">
+    Overview
+  </NavList.Item>
+  <NavList.Item href="#">Quickstart</NavList.Item>
+  <NavList.Item href="#">Install GitHub Copilot</NavList.Item>
+  <NavList.Item href="#">Configure your editor</NavList.Item>
+  <NavList.Item href="#">Manage policies</NavList.Item>
+  <NavList.Item href="#">Troubleshooting</NavList.Item>
+</NavList>
+```
+
+### Groups
+
+Use `NavList.Group` to organize related navigation items into labelled groups.
+
+```jsx
+<NavList aria-label="Section navigation">
+  <NavList.Group title="Products">
+    <NavList.Item href="#" aria-current="page">
+      Copilot
+    </NavList.Item>
+    <NavList.Item href="#">Codespaces</NavList.Item>
+    <NavList.Item href="#">Actions</NavList.Item>
+    <NavList.Item href="#">Packages</NavList.Item>
+  </NavList.Group>
+  <NavList.Group title="Collaboration">
+    <NavList.Item href="#">Pull requests</NavList.Item>
+    <NavList.Item href="#">Issues</NavList.Item>
+    <NavList.Item href="#">Discussions</NavList.Item>
+  </NavList.Group>
+  <NavList.Group title="Security">
+    <NavList.Item href="#">Overview</NavList.Item>
+    <NavList.Item href="#">Secret scanning</NavList.Item>
+    <NavList.Item href="#">Code scanning</NavList.Item>
+  </NavList.Group>
+</NavList>
+```
+
+### Nested disclosure
+
+Add `NavList.SubNav` to a `NavList.Item` when an item needs to expand and collapse nested navigation links.
+
+```jsx
+<NavList aria-label="Nested navigation">
+  <NavList.Group title="Collaboration">
+    <NavList.Item defaultExpanded>
+      Pull requests
+      <NavList.SubNav>
+        <NavList.Item href="#" aria-current="page">
+          Review pull requests
+        </NavList.Item>
+        <NavList.Item href="#">Use suggested changes</NavList.Item>
+        <NavList.Item href="#">Configure rulesets</NavList.Item>
+      </NavList.SubNav>
+    </NavList.Item>
+    <NavList.Item>
+      Branches
+      <NavList.SubNav>
+        <NavList.Item href="#">Overview</NavList.Item>
+        <NavList.Item href="#">Protection rules</NavList.Item>
+      </NavList.SubNav>
+    </NavList.Item>
+  </NavList.Group>
+</NavList>
+```
+
+### Up to five navigation levels
+
+`NavList` can include up to five levels when a page hierarchy requires it. Use the fewest levels needed; levels one through four can optionally expand or collapse, and level five is reserved for leaf article links.
+
+```jsx
+<NavList aria-label="Five-level navigation">
+  <NavList.Item defaultExpanded>
+    GitHub Copilot
+    <NavList.SubNav>
+      <NavList.Item defaultExpanded>
+        Guides
+        <NavList.SubNav>
+          <NavList.Item defaultExpanded>
+            Agents
+            <NavList.SubNav>
+              <NavList.Item defaultExpanded>
+                Build an agent
+                <NavList.SubNav>
+                  <NavList.Item href="#" aria-current="page">
+                    Create a tool
+                  </NavList.Item>
+                  <NavList.Item href="#">Add memory</NavList.Item>
+                  <NavList.Item href="#">Debug prompts</NavList.Item>
+                  <NavList.Item href="#">Deploy safely</NavList.Item>
+                </NavList.SubNav>
+              </NavList.Item>
+              <NavList.Item href="#">Customize an agent</NavList.Item>
+              <NavList.Item href="#">Debug an agent</NavList.Item>
+            </NavList.SubNav>
+          </NavList.Item>
+          <NavList.Item>
+            Extensions
+            <NavList.SubNav>
+              <NavList.Item href="#">Install an extension</NavList.Item>
+              <NavList.Item href="#">Publish an extension</NavList.Item>
+              <NavList.Item href="#">Manage permissions</NavList.Item>
+            </NavList.SubNav>
+          </NavList.Item>
+        </NavList.SubNav>
+      </NavList.Item>
+      <NavList.Item>
+        Administration
+        <NavList.SubNav>
+          <NavList.Item href="#">Overview</NavList.Item>
+          <NavList.Item href="#">Policies</NavList.Item>
+          <NavList.Item href="#">Audit log</NavList.Item>
+        </NavList.SubNav>
+      </NavList.Item>
+    </NavList.SubNav>
+  </NavList.Item>
+  <NavList.Item>
+    Code review
+    <NavList.SubNav>
+      <NavList.Item href="#">Overview</NavList.Item>
+      <NavList.Item href="#">Review pull requests</NavList.Item>
+      <NavList.Item href="#">Use suggested changes</NavList.Item>
+    </NavList.SubNav>
+  </NavList.Item>
+</NavList>
+```
+
+### With visuals
+
+Use `leadingVisual` and `trailingVisual` to add icons to the label area. Visuals are additive: they do not replace disclosure triangles, change item sizing, or move the active and inactive row alignment.
+
+```jsx
+<NavList aria-label="Visual navigation">
+  <NavList.Item href="#" aria-current="page" leadingVisual={BookIcon} trailingVisual={<KebabHorizontalIcon />}>
+    GitHub Copilot
+  </NavList.Item>
+</NavList>
+```
+
+## Accessibility
+
+Give each `NavList` a clear `aria-label`, especially when the page includes more than one navigation landmark.
+
+Use `aria-current="page"` on the link for the current page. Only apply `aria-current` to leaf items that navigate somewhere, not to disclosure rows with nested items.
+
+Keep group titles and disclosure labels short and descriptive. Items with `NavList.SubNav` must include visible label text so people can understand what will expand.
+
+## Component props
+
+### NavList `Required`
+
+| name              | type        | default | required | description                                           |
+| ----------------- | ----------- | ------- | -------- | ----------------------------------------------------- |
+| `children`        | `ReactNode` |         | `true`   | `NavList.Item` and `NavList.Group` nodes              |
+| `aria-label`      | `string`    |         | `true`   | Accessible label for the navigation landmark          |
+| `aria-labelledby` | `string`    |         | `false`  | ID of the element that labels the navigation landmark |
+| `className`       | `string`    |         | `false`  | Sets a custom class on the `nav` element              |
+
+Forwards all standard HTML attributes for `<nav>` elements.
+
+### NavList.Item `Required`
+
+| name               | type                                                                      | default | required | description                                                                                |
+| ------------------ | ------------------------------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------ |
+| `as`               | `'a' \| 'button'`                                                         | `'a'`   | `false`  | Element used for leaf items                                                                |
+| `children`         | `ReactNode`                                                               |         | `true`   | Item label and optional `NavList.SubNav` for nested disclosure                             |
+| `href`             | `string`                                                                  |         | `false`  | URL for leaf items when rendering as an anchor                                             |
+| `aria-current`     | `'page' \| 'step' \| 'location' \| 'date' \| 'time' \| 'true' \| 'false'` |         | `false`  | Marks a leaf item as current                                                               |
+| `defaultExpanded`  | `boolean`                                                                 | `false` | `false`  | Opens nested `NavList.SubNav` by default                                                   |
+| `expanded`         | `boolean`                                                                 |         | `false`  | Controls the nested `NavList.SubNav` expanded state                                        |
+| `onExpandedChange` | `(expanded) => void`                                                      |         | `false`  | Called when the nested `NavList.SubNav` expanded state changes                             |
+| `leadingVisual`    | `ReactElement \| Icon`                                                    |         | `false`  | Visual rendered before the label                                                           |
+| `trailingVisual`   | `ReactElement \| Icon`                                                    |         | `false`  | Visual rendered after the label                                                            |
+| `disabled`         | `boolean`                                                                 | `false` | `false`  | Disables the item. Leaf links receive `aria-disabled`; disclosure buttons receive disabled |
+
+Forwards props to the rendered leaf link or disclosure button.
+
+### NavList.Group
+
+| name        | type        | default | required | description                                |
+| ----------- | ----------- | ------- | -------- | ------------------------------------------ |
+| `title`     | `ReactNode` |         | `false`  | Heading text for the group                 |
+| `children`  | `ReactNode` |         | `true`   | `NavList.Item` nodes                       |
+| `className` | `string`    |         | `false`  | Sets a custom class on the group list item |
+
+### NavList.SubNav
+
+| name        | type        | default | required | description                            |
+| ----------- | ----------- | ------- | -------- | -------------------------------------- |
+| `children`  | `ReactNode` |         | `true`   | Nested `NavList.Item` nodes            |
+| `className` | `string`    |         | `false`  | Sets a custom class on the nested `ul` |

package/docs/components/index.md

@@ -28,6 +28,7 @@ description: Primer Brand UI components
 - [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.
+- [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.
 - [Pagination](Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
 - [Pillar](Pillar/react.md): Use the pillar component to group related content together.

package/docs/getting-started/index.md

@@ -93,3 +93,6 @@ import {Hero} from '@primer/react-brand'
   <Hero.SecondaryAction href="#">Secondary action</Hero.SecondaryAction>
 </Hero>
 ```
+
+> Building with an AI agent? Use the [Primer Brand MCP server](../introduction/mcp.md) to automatically use our
+> components, tokens and patterns correctly.

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.70.0-rc.4599efb5)
+# Primer Brand docs (v0.70.0-rc.9ef718be)
 
-These docs are bundled with `@primer/react-brand@0.70.0-rc.4599efb5` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.70.0-rc.9ef718be` 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.
@@ -15,6 +15,7 @@ stylesheet and font setup. Component directories are named after their import (e
 
 - [Animation](introduction/animation.md): Use animations to add visual interest and interactivity to a web page or application.
 - [Guides](introduction/index.md): Get started with Primer Brand
+- [MCP server](introduction/mcp.md): Help AI agents use Primer Brand correctly with our Model Context Protocol server.
 - [Theming](introduction/theming.md)
 
 ## Primitives
@@ -61,6 +62,7 @@ stylesheet and font setup. Component directories are named after their import (e
 - [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.
+- [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.
 - [Pagination](components/Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
 - [Pillar](components/Pillar/react.md): Use the pillar component to group related content together.

package/docs/introduction/index.md

@@ -6,4 +6,5 @@ description: Get started with Primer Brand
 ## In this section
 
 - [Animation](animation.md): Use animations to add visual interest and interactivity to a web page or application.
+- [MCP server](mcp.md): Help AI agents use Primer Brand correctly with our Model Context Protocol server.
 - [Theming](theming.md)

package/docs/introduction/mcp.md

@@ -0,0 +1,52 @@
+---
+title: MCP server
+description: Help AI agents use Primer Brand correctly with our Model Context Protocol server.
+keywords: ['mcp', 'ai', 'agents', 'model context protocol', 'copilot', 'claude code']
+---
+
+The Primer Brand [MCP server](https://www.npmjs.com/package/@primer/brand-mcp) (`@primer/brand-mcp`) helps AI agents understand and use Primer Brand (`@primer/react-brand`) correctly.
+
+It is a version-aware, local (`stdio`) server that reads the docs and metadata of your installed `@primer/react-brand` dependency.
+
+> The MCP server requires [Node.js](https://nodejs.org/) 24 or later.
+
+## What it provides
+
+The server exposes a set of tools that AI agents can call:
+
+| Tool                       | What it does                                                                                                                                         |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `primer_brand_setup`       | Configures Primer Brand first-time. Includes `ThemeProvider`, Mona Sans and RSC-directive configuration among other things                           |
+| `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                                        |
+
+## Set up in VS Code
+
+Add the server to your workspace's `.vscode/mcp.json` (or your user `mcp.json`):
+
+```jsonc
+{
+  "servers": {
+    "Primer Brand": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@primer/brand-mcp@latest"]
+    }
+  }
+}
+```
+
+## Set up in other clients
+
+For GitHub Copilot CLI and other `stdio`-enabled MCP clients, run the server directly:
+
+```shell
+npx @primer/brand-mcp@latest
+```
+
+Refer to the [package README](https://github.com/primer/brand/tree/main/packages/mcp) for the latest configuration details.

package/esm/Heading/Heading.d.ts

@@ -37,7 +37,14 @@ export declare const classMap: {
     h6: "6";
 };
 export type HeadingProps = {
+    /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */
     as?: (typeof HeadingTags)[number];
+    /**
+     * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.
+     *
+     * @example
+     * <Heading as="h2" size="4">This h2 will appear visually identical to an h4</Heading>
+     */
     size?: (typeof HeadingSizes)[number];
     weight?: HeadingWeightVariants | ResponsiveWeightMap;
     stretch?: HeadingStretchVariants | ResponsiveStretchMap;
@@ -45,6 +52,9 @@ export type HeadingProps = {
     font?: HeadingFontVariants;
     textWrap?: HeadingTextWrapVariants;
 } & React.HTMLAttributes<HTMLHeadingElement> & BaseProps<HTMLHeadingElement>;
+/**
+ * Use the heading component to render titles or subtitle text.
+ */
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<HeadingProps>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export {};
 //# sourceMappingURL=Heading.d.ts.map

package/esm/Heading/Heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,eAAO,MAAM,YAAY,uFAAwF,CAAA;AACjH,eAAO,MAAM,WAAW,+CAAgD,CAAA;AAExE,eAAO,MAAM,cAAc,gGASjB,CAAA;AACV,eAAO,MAAM,cAAc,8CAA+C,CAAA;AAC1E,eAAO,MAAM,oBAAoB,0CAA2C,CAAA;AAC5E,eAAO,MAAM,mBAAmB,mDAAoD,CAAA;AAEpF,eAAO,MAAM,iBAAiB,MAAiB,CAAA;AAC/C,eAAO,MAAM,kBAAkB,aAAyB,CAAA;AAExD,KAAK,qBAAqB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,KAAK,sBAAsB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,KAAK,4BAA4B,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,KAAK,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,4BAA4B,CAAA;IACrC,OAAO,CAAC,EAAE,4BAA4B,CAAA;IACtC,IAAI,CAAC,EAAE,4BAA4B,CAAA;CACpC,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,qBAAqB,GAAG,mBAAmB,CAAA;IACpD,OAAO,CAAC,EAAE,sBAAsB,GAAG,oBAAoB,CAAA;IACvD,aAAa,CAAC,EAAE,4BAA4B,GAAG,0BAA0B,CAAA;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,QAAQ,CAAC,EAAE,uBAAuB,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAE/B,eAAO,MAAM,OAAO,+HA4DnB,CAAA"}
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAGnE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD,eAAO,MAAM,YAAY,uFAAwF,CAAA;AACjH,eAAO,MAAM,WAAW,+CAAgD,CAAA;AAExE,eAAO,MAAM,cAAc,gGASjB,CAAA;AACV,eAAO,MAAM,cAAc,8CAA+C,CAAA;AAC1E,eAAO,MAAM,oBAAoB,0CAA2C,CAAA;AAC5E,eAAO,MAAM,mBAAmB,mDAAoD,CAAA;AAEpF,eAAO,MAAM,iBAAiB,MAAiB,CAAA;AAC/C,eAAO,MAAM,kBAAkB,aAAyB,CAAA;AAExD,KAAK,qBAAqB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC5D,KAAK,sBAAsB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,KAAK,4BAA4B,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AACzE,KAAK,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC/D,KAAK,uBAAuB,GAAG,MAAM,GAAG,SAAS,CAAA;AAEjD,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,IAAI,CAAC,EAAE,sBAAsB,CAAA;CAC9B,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,4BAA4B,CAAA;IACrC,OAAO,CAAC,EAAE,4BAA4B,CAAA;IACtC,IAAI,CAAC,EAAE,4BAA4B,CAAA;CACpC,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAA;IAC9B,OAAO,CAAC,EAAE,qBAAqB,CAAA;IAC/B,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,qBAAqB,GAAG,mBAAmB,CAAA;IACpD,OAAO,CAAC,EAAE,sBAAsB,GAAG,oBAAoB,CAAA;IACvD,aAAa,CAAC,EAAE,4BAA4B,GAAG,0BAA0B,CAAA;IACzE,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,QAAQ,CAAC,EAAE,uBAAuB,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC1C,SAAS,CAAC,kBAAkB,CAAC,CAAA;AAE/B;;GAEG;AACH,eAAO,MAAM,OAAO,+HA4DnB,CAAA"}

package/esm/Heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n  'heavy',\n  'extrabold',\n  'bold',\n  'semibold',\n  'medium',\n  'normal',\n  'light',\n  'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' | 'balance'\n\ntype ResponsiveStretchMap = {\n  narrow?: HeadingStretchVariants\n  regular?: HeadingStretchVariants\n  wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n  narrow?: HeadingLetterSpacingVariants\n  regular?: HeadingLetterSpacingVariants\n  wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n  narrow?: HeadingWeightVariants\n  regular?: HeadingWeightVariants\n  wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n  h1: HeadingSizes[1],\n  h2: HeadingSizes[2],\n  h3: HeadingSizes[3],\n  h4: HeadingSizes[4],\n  h5: HeadingSizes[5],\n  h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n  as?: (typeof HeadingTags)[number]\n  size?: (typeof HeadingSizes)[number]\n  weight?: HeadingWeightVariants | ResponsiveWeightMap\n  stretch?: HeadingStretchVariants | ResponsiveStretchMap\n  letterSpacing?: HeadingLetterSpacingVariants | ResponsiveLetterSpacingMap\n  font?: HeadingFontVariants\n  textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n  BaseProps<HTMLHeadingElement>\n\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n  (\n    {\n      animate,\n      className,\n      children,\n      as: HeadingComponent = defaultHeadingTag,\n      size,\n      letterSpacing,\n      weight,\n      stretch,\n      style,\n      font = 'mona-sans',\n      textWrap = 'balance',\n      ...rest\n    },\n    ref,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const buildClass = (type: string, value) => {\n      if (!value) return null\n      return typeof value === 'string'\n        ? styles[`Heading--${type}-${value}`]\n        : Object.keys(value)\n            .map(viewport => {\n              return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n            })\n            .join(' ')\n    }\n\n    const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n    const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n    const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n    const headingClassNames = clsx(\n      animationClasses,\n      styles.Heading,\n      styles[`Heading-font--${font}`],\n      !size && styles[`Heading--${classMap[HeadingComponent]}`],\n      size && styles[`Heading--${size}`],\n      styles[`Heading--textWrap-${textWrap}`],\n      weight && weightClass,\n      stretch && stretchClass,\n      letterSpacingClass && letterSpacingClass,\n      className,\n    )\n\n    if (!HeadingTags.includes(HeadingComponent)) {\n      // eslint-disable-next-line no-console\n      console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n      return null\n    }\n\n    return (\n      <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </HeadingComponent>\n    )\n  },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,EAaY,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}
+{"version":3,"file":"Heading.js","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React, {PropsWithChildren, forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport styles from './Heading.module.css'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\nexport const HeadingSizes = ['display', '1', '2', '3', '4', '5', '6', 'subhead-large', 'subhead-medium'] as const\nexport const HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const\n\nexport const HeadingWeights = [\n  'heavy',\n  'extrabold',\n  'bold',\n  'semibold',\n  'medium',\n  'normal',\n  'light',\n  'extralight',\n] as const\nexport const HeadingStretch = ['condensed', 'normal', 'expanded'] as const\nexport const HeadingLetterSpacing = ['condensed', 'normal', 'none'] as const\nexport const HeadingFontVariants = ['mona-sans', 'hubot-sans', 'monospace'] as const\n\nexport const defaultHeadingTag = HeadingTags[1]\nexport const defaultHeadingFont = HeadingFontVariants[0]\n\ntype HeadingWeightVariants = (typeof HeadingWeights)[number]\ntype HeadingStretchVariants = (typeof HeadingStretch)[number]\ntype HeadingLetterSpacingVariants = (typeof HeadingLetterSpacing)[number]\ntype HeadingFontVariants = (typeof HeadingFontVariants)[number]\ntype HeadingTextWrapVariants = 'wrap' | 'balance'\n\ntype ResponsiveStretchMap = {\n  narrow?: HeadingStretchVariants\n  regular?: HeadingStretchVariants\n  wide?: HeadingStretchVariants\n}\n\ntype ResponsiveLetterSpacingMap = {\n  narrow?: HeadingLetterSpacingVariants\n  regular?: HeadingLetterSpacingVariants\n  wide?: HeadingLetterSpacingVariants\n}\n\ntype ResponsiveWeightMap = {\n  narrow?: HeadingWeightVariants\n  regular?: HeadingWeightVariants\n  wide?: HeadingWeightVariants\n}\n\nexport const classMap = {\n  h1: HeadingSizes[1],\n  h2: HeadingSizes[2],\n  h3: HeadingSizes[3],\n  h4: HeadingSizes[4],\n  h5: HeadingSizes[5],\n  h6: HeadingSizes[6],\n}\n\nexport type HeadingProps = {\n  /** Semantic heading level (`h1`–`h6`) only. Use `size` to apply the correct visual size. */\n  as?: (typeof HeadingTags)[number]\n  /**\n   * Controls the visual size, independent of `as`. Should be used whenever as prop is used, as the defaults may not be ideal for all use-cases.\n   *\n   * @example\n   * <Heading as=\"h2\" size=\"4\">This h2 will appear visually identical to an h4</Heading>\n   */\n  size?: (typeof HeadingSizes)[number]\n  weight?: HeadingWeightVariants | ResponsiveWeightMap\n  stretch?: HeadingStretchVariants | ResponsiveStretchMap\n  letterSpacing?: HeadingLetterSpacingVariants | ResponsiveLetterSpacingMap\n  font?: HeadingFontVariants\n  textWrap?: HeadingTextWrapVariants\n} & React.HTMLAttributes<HTMLHeadingElement> &\n  BaseProps<HTMLHeadingElement>\n\n/**\n * Use the heading component to render titles or subtitle text.\n */\nexport const Heading = forwardRef<HTMLHeadingElement, PropsWithChildren<HeadingProps>>(\n  (\n    {\n      animate,\n      className,\n      children,\n      as: HeadingComponent = defaultHeadingTag,\n      size,\n      letterSpacing,\n      weight,\n      stretch,\n      style,\n      font = 'mona-sans',\n      textWrap = 'balance',\n      ...rest\n    },\n    ref,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const buildClass = (type: string, value) => {\n      if (!value) return null\n      return typeof value === 'string'\n        ? styles[`Heading--${type}-${value}`]\n        : Object.keys(value)\n            .map(viewport => {\n              return styles[`Heading-${viewport}--${type}-${value[viewport]}`]\n            })\n            .join(' ')\n    }\n\n    const weightClass = useMemo(() => buildClass('weight', weight), [weight])\n    const stretchClass = useMemo(() => buildClass('stretch', stretch), [stretch])\n    const letterSpacingClass = useMemo(() => buildClass('letter-spacing', letterSpacing), [letterSpacing])\n\n    const headingClassNames = clsx(\n      animationClasses,\n      styles.Heading,\n      styles[`Heading-font--${font}`],\n      !size && styles[`Heading--${classMap[HeadingComponent]}`],\n      size && styles[`Heading--${size}`],\n      styles[`Heading--textWrap-${textWrap}`],\n      weight && weightClass,\n      stretch && stretchClass,\n      letterSpacingClass && letterSpacingClass,\n      className,\n    )\n\n    if (!HeadingTags.includes(HeadingComponent)) {\n      // eslint-disable-next-line no-console\n      console.error(`Heading: 'as' prop must be one of ${HeadingTags.join(', ')}`)\n      return null\n    }\n\n    return (\n      <HeadingComponent ref={ref} className={headingClassNames} style={{...animationInlineStyles, ...style}} {...rest}>\n        {children}\n      </HeadingComponent>\n    )\n  },\n)\n"],"mappings":";;;;;;AAMA,IAAa,IAAe;CAAC;CAAW;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAiB;CAAiB,EAC3F,IAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAElD,IAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACY,IAAiB;CAAC;CAAa;CAAU;CAAW,EACpD,IAAuB;CAAC;CAAa;CAAU;CAAO,EACtD,IAAsB;CAAC;CAAa;CAAc;CAAY,EAE9D,IAAoB,EAAY,IAChC,IAAqB,EAAoB,IA0BzC,IAAW;CACtB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CACjB,IAAI,EAAa;CAClB,EAuBY,IAAU,GAEnB,EACE,YACA,cACA,aACA,IAAI,IAAmB,GACvB,SACA,kBACA,WACA,YACA,UACA,UAAO,aACP,cAAW,WACX,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,KAAc,GAAc,MAC3B,IACE,OAAO,KAAU,WACpB,EAAO,YAAY,EAAK,GAAG,OAC3B,OAAO,KAAK,EAAM,CACf,KAAI,MACI,EAAO,WAAW,EAAS,IAAI,EAAK,GAAG,EAAM,MACpD,CACD,KAAK,IAAI,GAPG,MAUf,IAAc,QAAc,EAAW,UAAU,EAAO,EAAE,CAAC,EAAO,CAAC,EACnE,IAAe,QAAc,EAAW,WAAW,EAAQ,EAAE,CAAC,EAAQ,CAAC,EACvE,IAAqB,QAAc,EAAW,kBAAkB,EAAc,EAAE,CAAC,EAAc,CAAC,EAEhG,IAAoB,EACxB,GACA,EAAO,SACP,EAAO,iBAAiB,MACxB,CAAC,KAAQ,EAAO,YAAY,EAAS,OACrC,KAAQ,EAAO,YAAY,MAC3B,EAAO,qBAAqB,MAC5B,KAAU,GACV,KAAW,GACX,KAAsB,GACtB,EACD;AAQD,QANK,EAAY,SAAS,EAAiB,GAOzC,kBAAC,GAAD;EAAuB;EAAK,WAAW;EAAmB,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAAE,GAAI;EACxG;EACgB,CAAA,IAPnB,QAAQ,MAAM,qCAAqC,EAAY,KAAK,KAAK,GAAG,EACrE;EASZ"}

package/esm/Hero/Hero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA2B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAanF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAsQD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUf,CAAA"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAInD,OAAO,KAAK,EAA2B,SAAS,EAAE,WAAW,EAAC,MAAM,eAAe,CAAA;AAanF;;GAEG;AACH,OAAO,2FAA2F,CAAA;AAkBlG,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1D,oBAAoB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AA8QD,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUf,CAAA"}

package/esm/Hero/Hero.js

@@ -1,20 +1,20 @@
 import e from "../node_modules/clsx/dist/clsx.js";
 import { Grid as t } from "../Grid/Grid.js";
-import { AnimationProvider as n } from "../animation/AnimationProvider/AnimationProvider.js";
-import { Stack as r } from "../Stack/Stack.js";
-import { Box as ee } from "../Box/Box.js";
-import { HeroContext as i, heroMediaInlinePositions as a } from "./HeroContext.js";
-import o from "./Hero.module.js";
-import { HeroLabel as s } from "./sub-components/HeroLabel.js";
-import { HeroHeading as c } from "./sub-components/HeroHeading.js";
-import { HeroDescription as l } from "./sub-components/HeroDescription.js";
-import { HeroImage as u } from "./sub-components/HeroImage.js";
-import { HeroVideo as d } from "./sub-components/HeroVideo.js";
-import { HeroEyebrow as f } from "./sub-components/HeroEyebrow.js";
-import { HeroPrimaryAction as p } from "./sub-components/HeroPrimaryAction.js";
-import { HeroSecondaryAction as m } from "./sub-components/HeroSecondaryAction.js";
+import { AnimationProvider as ee } from "../animation/AnimationProvider/AnimationProvider.js";
+import { Stack as n } from "../Stack/Stack.js";
+import { Box as te } from "../Box/Box.js";
+import { HeroContext as ne, heroMediaInlinePositions as r } from "./HeroContext.js";
+import i from "./Hero.module.js";
+import { HeroLabel as a } from "./sub-components/HeroLabel.js";
+import { HeroHeading as o } from "./sub-components/HeroHeading.js";
+import { HeroDescription as s } from "./sub-components/HeroDescription.js";
+import { HeroImage as c } from "./sub-components/HeroImage.js";
+import { HeroVideo as l } from "./sub-components/HeroVideo.js";
+import { HeroEyebrow as u } from "./sub-components/HeroEyebrow.js";
+import { HeroPrimaryAction as d } from "./sub-components/HeroPrimaryAction.js";
+import { HeroSecondaryAction as f } from "./sub-components/HeroSecondaryAction.js";
 import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/hero/base-BDi-g8vJ.css';/* empty css                                                                                     */
-import h, { Fragment as te, forwardRef as g, useMemo as ne } from "react";
+import p, { Fragment as m, forwardRef as h, useMemo as g } from "react";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/Hero/Hero.tsx
 var b = {
@@ -28,9 +28,9 @@ var b = {
 	get imageWrapper() {
 		return `${this.root}-imageWrapper`;
 	}
-}, x = g(({ className: g, align: x = "start", children: S, imageContainerClassName: C, imageContainerStyle: w, imageContainerRef: T, imageBackgroundColor: E, variant: D = "default", trailingComponent: O, enableAnimation: k = !1, "data-testid": A, ...j }, re) => {
-	let { HeroActions: M, HeroChildren: N, HeroImageChild: P, HeroVideoChild: F, HeroHeaderChildren: ie, HeroDescriptionChild: I } = ne(() => {
-		let e = h.Children.toArray(S).reduce((e, t) => (h.isValidElement(t) && (t.type === p || t.type === m ? e.HeroActions.push(t) : t.type === u ? e.HeroImageChild = t : t.type === d ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === s || t.type === f || t.type === c ? e.HeroHeaderChildren.push(t) : t.type === l && (e.HeroDescriptionChild = t))), e), {
+}, x = h(({ className: h, align: x = "start", children: S, imageContainerClassName: C, imageContainerStyle: w, imageContainerRef: T, imageBackgroundColor: E, variant: D = "default", trailingComponent: O, enableAnimation: k = !1, "data-testid": A, ...j }, M) => {
+	let { HeroActions: N, HeroChildren: re, HeroImageChild: P, HeroVideoChild: F, HeroHeaderChildren: I, HeroDescriptionChild: L } = g(() => {
+		let e = p.Children.toArray(S).reduce((e, t) => (p.isValidElement(t) && (t.type === d || t.type === f ? e.HeroActions.push(t) : t.type === c ? e.HeroImageChild = t : t.type === l ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === a || t.type === u || t.type === o ? e.HeroHeaderChildren.push(t) : t.type === s && (e.HeroDescriptionChild = t))), e), {
 			HeroActions: [],
 			HeroChildren: [],
 			HeroImageChild: void 0,
@@ -39,69 +39,71 @@ var b = {
 			HeroDescriptionChild: void 0
 		});
 		return e.HeroImageChild && e.HeroVideoChild && (e.HeroVideoChild = void 0), e;
-	}, [S]), L = P?.props.position || F?.props.position, R = D === "gridline-expressive" && L?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${L}" position. Defaulting to "block-end".`), "block-end") : L || "block-end", z = P?.props.enableBorder ?? F?.props.enableBorder ?? !0, B = a.includes(R), V = B ? R : void 0, H = P || F, U = D === "gridline", W = D === "gridline-expressive", G = R === "block-end" || R === "block-end-padded", K = R === "block-end-padded", q = (U || W) && k ? n : te, J = (U || W) && k ? {
+	}, [S]), R = P?.props.position || F?.props.position, z = D === "gridline-expressive" && R?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${R}" position. Defaulting to "block-end".`), "block-end") : R || "block-end", ie = P?.props.enableBorder ?? F?.props.enableBorder ?? !0, B = r.includes(z), V = B ? z : void 0, H = P || F, U = D === "gridline", W = D === "gridline-expressive", G = z === "block-end" || z === "block-end-padded", K = z === "block-end-padded", q = W && x === "center", J = q ? "start" : x;
+	q && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.");
+	let ae = (U || W) && k ? ee : m, oe = (U || W) && k ? {
 		autoStaggerChildren: !1,
 		animationTrigger: "immediate"
-	} : {}, Y = (U || W) && G, X = U && B, ae = P ? o["Hero--layout-image"] : o["Hero--layout-default"], Z = R === "inline-start" || R === "inline-start-padded", Q = (e) => O && /* @__PURE__ */ v(ee, {
+	} : {}, Y = (U || W) && G, X = U && B, se = P ? i["Hero--layout-image"] : i["Hero--layout-default"], Z = z === "inline-start" || z === "inline-start-padded", Q = (e) => O && /* @__PURE__ */ v(te, {
 		animate: e ? {
 			variant: "slide-in-up",
 			delay: 1e3,
 			duration: 1e3
 		} : void 0,
 		children: /* @__PURE__ */ v("div", {
-			className: o["Hero-trailing"],
+			className: i["Hero-trailing"],
 			children: /* @__PURE__ */ v(O, {})
 		})
-	}), $ = () => M.length > 0 && /* @__PURE__ */ v("div", {
-		className: o["Hero-actions"],
-		children: M
+	}), $ = () => N.length > 0 && /* @__PURE__ */ v("div", {
+		className: i["Hero-actions"],
+		children: N
 	});
-	return /* @__PURE__ */ v(q, {
-		...J,
-		children: /* @__PURE__ */ v(i.Provider, {
+	return /* @__PURE__ */ v(ae, {
+		...oe,
+		children: /* @__PURE__ */ v(ne.Provider, {
 			value: {
-				imagePosition: R,
+				imagePosition: z,
 				variant: D,
-				align: x,
+				align: J,
 				hasInlineMedia: B,
 				enableAnimation: k
 			},
 			children: /* @__PURE__ */ y("section", {
-				className: e(o.Hero, o[`Hero--variant-${D}`], !B && o[`Hero--align-${x}`], ae, (P || F) && o[`Hero--image-pos-${R}`], (P || F) && B && o["Hero--image-pos-inline"], X && o["Hero--variant-inline-gridline"], g),
-				ref: re,
+				className: e(i.Hero, i[`Hero--variant-${D}`], !B && i[`Hero--align-${J}`], se, (P || F) && i[`Hero--image-pos-${z}`], (P || F) && B && i["Hero--image-pos-inline"], X && i["Hero--variant-inline-gridline"], h),
+				ref: M,
 				"aria-labelledby": "hero-section-brand-heading",
 				"data-testid": A || b.root,
 				...j,
 				children: [/* @__PURE__ */ v(t, {
 					fullWidth: !Y && !X,
 					"data-testid": b.grid,
-					className: e(o["Hero-grid"], o[`Hero-grid--${R}`], Y && !W && o["Hero-grid--contained"], X && o["Hero-grid--bordered-inline"], W && o["Hero-grid--expressive"]),
+					className: e(i["Hero-grid"], i[`Hero-grid--${z}`], Y && !W && i["Hero-grid--contained"], X && i["Hero-grid--bordered-inline"], W && i["Hero-grid--expressive"]),
 					children: W ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(t.Column, {
 						span: {
 							medium: 12,
-							large: I ? 7 : 6
+							large: L ? 7 : 6
 						},
-						className: o["Hero-expressive-header-column"],
-						children: /* @__PURE__ */ v(r, {
+						className: i["Hero-expressive-header-column"],
+						children: /* @__PURE__ */ v(n, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
-							children: ie
+							children: I
 						})
 					}), /* @__PURE__ */ v(t.Column, {
 						span: {
 							medium: 12,
-							large: I ? 5 : 6
+							large: L ? 5 : 6
 						},
-						className: o["Hero-expressive-body-column"],
-						children: /* @__PURE__ */ y(r, {
+						className: i["Hero-expressive-body-column"],
+						children: /* @__PURE__ */ y(n, {
 							direction: "vertical",
 							gap: "none",
 							padding: "none",
 							alignItems: "flex-start",
 							children: [
-								I,
+								L,
 								$(),
 								Q(k)
 							]
@@ -110,24 +112,24 @@ var b = {
 						Z && H && !Y && /* @__PURE__ */ v(t.Column, {
 							ref: T,
 							span: { large: 6 },
-							className: e(E && o[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && o["Hero-imageContainer--inline-bg-padded"], X && o["Hero-imageContainer--inline-bordered"]),
+							className: e(E && i[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && i["Hero-imageContainer--inline-bg-padded"], X && i["Hero-imageContainer--inline-bordered"]),
 							children: /* @__PURE__ */ v("div", {
-								className: e(o["Hero-mediaContainer"], C),
+								className: e(i["Hero-mediaContainer"], C),
 								style: w,
 								children: H
 							})
 						}),
 						/* @__PURE__ */ v(t.Column, {
 							span: { large: H && B ? 6 : 12 },
-							children: /* @__PURE__ */ y(r, {
-								className: e(X && o["Hero-text-column--inline-gridline"], X && o["Hero-contentColumn--bordered-inline"]),
+							children: /* @__PURE__ */ y(n, {
+								className: e(X && i["Hero-text-column--inline-gridline"], X && i["Hero-contentColumn--bordered-inline"]),
 								direction: "vertical",
 								gap: "none",
 								padding: "none",
-								alignItems: B || x === "start" ? "flex-start" : "center",
-								justifyContent: B ? void 0 : x === "start" ? "flex-start" : "center",
+								alignItems: B || J === "start" ? "flex-start" : "center",
+								justifyContent: B ? void 0 : J === "start" ? "flex-start" : "center",
 								children: [
-									N,
+									re,
 									$(),
 									Q(U && k)
 								]
@@ -136,9 +138,9 @@ var b = {
 						!Z && H && !Y && /* @__PURE__ */ v(t.Column, {
 							ref: T,
 							span: { large: B ? 6 : 12 },
-							className: e(E && o[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && o["Hero-imageContainer--inline-bg-padded"], X && o["Hero-imageContainer--inline-bordered"]),
+							className: e(E && i[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && i["Hero-imageContainer--inline-bg-padded"], X && i["Hero-imageContainer--inline-bordered"]),
 							children: /* @__PURE__ */ v("div", {
-								className: e(o["Hero-mediaContainer"], C),
+								className: e(i["Hero-mediaContainer"], C),
 								style: w,
 								children: H
 							})
@@ -147,10 +149,10 @@ var b = {
 				}), H && Y && /* @__PURE__ */ v("div", {
 					ref: T,
 					"data-testid": b.imageWrapper,
-					className: e(o["Hero-imageWrapper"], K && o["Hero-imageWrapper--block-end-padded"], C, E && o[`Hero-imageWrapper--bg-${E}`]),
+					className: e(i["Hero-imageWrapper"], K && i["Hero-imageWrapper--block-end-padded"], C, E && i[`Hero-imageWrapper--bg-${E}`]),
 					style: w,
 					children: /* @__PURE__ */ v("div", {
-						className: e(o["Hero-imageWrapper-inner"], K && o["Hero-imageWrapper-inner--padded"], z && o["Hero-imageWrapper-inner--with-gridline"]),
+						className: e(i["Hero-imageWrapper-inner"], K && i["Hero-imageWrapper-inner--padded"], ie && i["Hero-imageWrapper-inner--with-gridline"]),
 						children: H
 					})
 				})]
@@ -158,14 +160,14 @@ var b = {
 		})
 	});
 }), S = Object.assign(x, {
-	Heading: c,
-	Description: l,
-	PrimaryAction: p,
-	SecondaryAction: m,
-	Image: u,
-	Video: d,
-	Label: s,
-	Eyebrow: f,
+	Heading: o,
+	Description: s,
+	PrimaryAction: d,
+	SecondaryAction: f,
+	Image: c,
+	Video: l,
+	Label: a,
+	Eyebrow: u,
 	testIds: b
 });
 //#endregion