@primer/react-brand 0.70.0-rc.88de47fc → 0.70.0-rc.9ef718be

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.88de47fc)
+# Primer Brand docs (v0.70.0-rc.9ef718be)
 
-These docs are bundled with `@primer/react-brand@0.70.0-rc.88de47fc` 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

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

package/esm/Hero/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, heroMediaInlinePositions} from './HeroContext'\nimport type {HeroMediaInlinePositions, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n  HeroLabel,\n  HeroHeading,\n  HeroDescription,\n  HeroImage,\n  HeroVideo,\n  HeroEyebrow,\n  HeroPrimaryAction,\n  HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Hero.module.css'\n\nconst testIds = {\n  root: 'Hero',\n  get video() {\n    return `${this.root}-video`\n  },\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get imageWrapper() {\n    return `${this.root}-imageWrapper`\n  },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n  align?: HeroAlign\n  imageContainerClassName?: string\n  imageContainerStyle?: React.CSSProperties\n  imageContainerRef?: React.RefObject<HTMLDivElement | null>\n  imageBackgroundColor?: 'default' | 'subtle'\n  variant?: HeroVariant\n  enableAnimation?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n  (\n    {\n      className,\n      align = 'start',\n      children,\n      imageContainerClassName,\n      imageContainerStyle,\n      imageContainerRef,\n      imageBackgroundColor,\n      variant = 'default',\n      trailingComponent: TrailingComponent,\n      enableAnimation = false,\n      'data-testid': testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const {HeroActions, HeroChildren, HeroImageChild, HeroVideoChild, HeroHeaderChildren, HeroDescriptionChild} =\n      useMemo(() => {\n        const result = React.Children.toArray(children).reduce<{\n          HeroActions: React.ReactElement[]\n          HeroImageChild?: React.ReactElement<HeroImageProps>\n          HeroVideoChild?: React.ReactElement<HeroVideoProps>\n          HeroChildren: React.ReactElement[]\n          HeroHeaderChildren: React.ReactElement[]\n          HeroDescriptionChild?: React.ReactElement\n        }>(\n          (acc, child) => {\n            if (React.isValidElement(child)) {\n              if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {\n                acc.HeroActions.push(child)\n              } else if (child.type === HeroImage) {\n                acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n              } else if (child.type === HeroVideo) {\n                acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n              } else {\n                acc.HeroChildren.push(child)\n                if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {\n                  acc.HeroHeaderChildren.push(child)\n                } else if (child.type === HeroDescription) {\n                  acc.HeroDescriptionChild = child\n                }\n              }\n            }\n            return acc\n          },\n          {\n            HeroActions: [],\n            HeroChildren: [],\n            HeroImageChild: undefined,\n            HeroVideoChild: undefined,\n            HeroHeaderChildren: [],\n            HeroDescriptionChild: undefined,\n          },\n        )\n\n        // Prefer Hero.Image - don't show both\n        if (result.HeroImageChild && result.HeroVideoChild) {\n          result.HeroVideoChild = undefined\n        }\n\n        return result\n      }, [children])\n\n    const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position\n\n    const mediaPosition = (() => {\n      if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n        if (process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n          )\n        }\n        return 'block-end'\n      }\n      return mediaPositionProp || 'block-end'\n    })()\n    const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n    const hasInlineMedia = heroMediaInlinePositions.includes(mediaPosition as HeroMediaInlinePositions)\n    const inlineMediaPosition = hasInlineMedia ? mediaPosition : undefined\n    const mediaChild = HeroImageChild || HeroVideoChild\n    const isGridline = variant === 'gridline'\n    const isGridlineExpressive = variant === 'gridline-expressive'\n    const isBlockEndPosition = mediaPosition === 'block-end' || mediaPosition === 'block-end-padded'\n    const isBlockEndPadded = mediaPosition === 'block-end-padded'\n\n    const Tag = (isGridline || isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n    const tagProps =\n      (isGridline || isGridlineExpressive) && enableAnimation\n        ? {\n            autoStaggerChildren: false,\n            animationTrigger: 'immediate' as const,\n          }\n        : {}\n\n    const useContainedLayout = (isGridline || isGridlineExpressive) && isBlockEndPosition\n    const useInlineGridline = isGridline && hasInlineMedia\n\n    const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n    const isInlineStart = mediaPosition === 'inline-start' || mediaPosition === 'inline-start-padded'\n\n    const renderTrailingComponent = (shouldAnimate: boolean) =>\n      TrailingComponent && (\n        <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n          <div className={styles['Hero-trailing']}>\n            <TrailingComponent />\n          </div>\n        </Box>\n      )\n\n    const renderActions = () => HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>\n\n    return (\n      <Tag {...tagProps}>\n        <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n          <section\n            className={clsx(\n              styles.Hero,\n              styles[`Hero--variant-${variant}`],\n              !hasInlineMedia && styles[`Hero--align-${align}`],\n              heroLayoutClass,\n              (HeroImageChild || HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n              (HeroImageChild || HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n              useInlineGridline && styles['Hero--variant-inline-gridline'],\n              className,\n            )}\n            ref={ref}\n            aria-labelledby=\"hero-section-brand-heading\"\n            data-testid={testId || testIds.root}\n            {...rest}\n          >\n            <Grid\n              fullWidth={!useContainedLayout && !useInlineGridline}\n              data-testid={testIds.grid}\n              className={clsx(\n                styles['Hero-grid'],\n                styles[`Hero-grid--${mediaPosition}`],\n                useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n                useInlineGridline && styles['Hero-grid--bordered-inline'],\n                isGridlineExpressive && styles['Hero-grid--expressive'],\n              )}\n            >\n              {isGridlineExpressive ? (\n                <>\n                  {/* Expressive variant: header column (left) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n                    className={styles['Hero-expressive-header-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroHeaderChildren}\n                    </Stack>\n                  </Grid.Column>\n                  {/* Expressive variant: body column (right) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n                    className={styles['Hero-expressive-body-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroDescriptionChild}\n                      {renderActions()}\n                      {renderTrailingComponent(enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                </>\n              ) : (\n                <>\n                  {/* Standard GridLine variant: text column */}\n                  {isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: 6}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                  <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n                    <Stack\n                      className={clsx(\n                        useInlineGridline && styles['Hero-text-column--inline-gridline'],\n                        useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n                      )}\n                      direction=\"vertical\"\n                      gap=\"none\"\n                      padding=\"none\"\n                      alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n                      justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n                    >\n                      {HeroChildren}\n                      {renderActions()}\n                      {renderTrailingComponent(isGridline && enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                  {!isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: hasInlineMedia ? 6 : 12}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                </>\n              )}\n            </Grid>\n            {mediaChild && useContainedLayout && (\n              <div\n                ref={imageContainerRef}\n                data-testid={testIds.imageWrapper}\n                className={clsx(\n                  styles['Hero-imageWrapper'],\n                  isBlockEndPadded && styles['Hero-imageWrapper--block-end-padded'],\n                  imageContainerClassName,\n                  imageBackgroundColor && styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n                )}\n                style={imageContainerStyle}\n              >\n                <div\n                  className={clsx(\n                    styles['Hero-imageWrapper-inner'],\n                    isBlockEndPadded && styles['Hero-imageWrapper-inner--padded'],\n                    mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n                  )}\n                >\n                  {mediaChild}\n                </div>\n              </div>\n            )}\n          </section>\n        </HeroContext.Provider>\n      </Tag>\n    )\n  },\n)\n\nexport const Hero = Object.assign(Root, {\n  Heading: HeroHeading,\n  Description: HeroDescription,\n  PrimaryAction: HeroPrimaryAction,\n  SecondaryAction: HeroSecondaryAction,\n  Image: HeroImage,\n  Video: HeroVideo,\n  Label: HeroLabel,\n  Eyebrow: HeroEyebrow,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"Hero.js","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React, {forwardRef, Fragment, PropsWithChildren, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {Grid} from '../Grid'\nimport {Stack} from '../Stack'\nimport {Box} from '../Box'\nimport type {BaseProps} from '../component-helpers'\nimport {AnimationProvider} from '../animation'\n\nimport {HeroContext, heroMediaInlinePositions} from './HeroContext'\nimport type {HeroMediaInlinePositions, HeroAlign, HeroVariant} from './HeroContext'\nimport {\n  HeroLabel,\n  HeroHeading,\n  HeroDescription,\n  HeroImage,\n  HeroVideo,\n  HeroEyebrow,\n  HeroPrimaryAction,\n  HeroSecondaryAction,\n} from './sub-components'\nimport type {HeroImageProps, HeroVideoProps} from './sub-components'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/hero/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Hero.module.css'\n\nconst testIds = {\n  root: 'Hero',\n  get video() {\n    return `${this.root}-video`\n  },\n  get grid() {\n    return `${this.root}-grid`\n  },\n  get imageWrapper() {\n    return `${this.root}-imageWrapper`\n  },\n}\n\nexport type HeroProps = BaseProps<HTMLElement> & {\n  align?: HeroAlign\n  imageContainerClassName?: string\n  imageContainerStyle?: React.CSSProperties\n  imageContainerRef?: React.RefObject<HTMLDivElement | null>\n  imageBackgroundColor?: 'default' | 'subtle'\n  variant?: HeroVariant\n  enableAnimation?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  'data-testid'?: string\n}\n\nconst Root = forwardRef<HTMLElement, PropsWithChildren<HeroProps>>(\n  (\n    {\n      className,\n      align: alignProp = 'start',\n      children,\n      imageContainerClassName,\n      imageContainerStyle,\n      imageContainerRef,\n      imageBackgroundColor,\n      variant = 'default',\n      trailingComponent: TrailingComponent,\n      enableAnimation = false,\n      'data-testid': testId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const {HeroActions, HeroChildren, HeroImageChild, HeroVideoChild, HeroHeaderChildren, HeroDescriptionChild} =\n      useMemo(() => {\n        const result = React.Children.toArray(children).reduce<{\n          HeroActions: React.ReactElement[]\n          HeroImageChild?: React.ReactElement<HeroImageProps>\n          HeroVideoChild?: React.ReactElement<HeroVideoProps>\n          HeroChildren: React.ReactElement[]\n          HeroHeaderChildren: React.ReactElement[]\n          HeroDescriptionChild?: React.ReactElement\n        }>(\n          (acc, child) => {\n            if (React.isValidElement(child)) {\n              if (child.type === HeroPrimaryAction || child.type === HeroSecondaryAction) {\n                acc.HeroActions.push(child)\n              } else if (child.type === HeroImage) {\n                acc.HeroImageChild = child as React.ReactElement<HeroImageProps>\n              } else if (child.type === HeroVideo) {\n                acc.HeroVideoChild = child as React.ReactElement<HeroVideoProps>\n              } else {\n                acc.HeroChildren.push(child)\n                if (child.type === HeroLabel || child.type === HeroEyebrow || child.type === HeroHeading) {\n                  acc.HeroHeaderChildren.push(child)\n                } else if (child.type === HeroDescription) {\n                  acc.HeroDescriptionChild = child\n                }\n              }\n            }\n            return acc\n          },\n          {\n            HeroActions: [],\n            HeroChildren: [],\n            HeroImageChild: undefined,\n            HeroVideoChild: undefined,\n            HeroHeaderChildren: [],\n            HeroDescriptionChild: undefined,\n          },\n        )\n\n        // Prefer Hero.Image - don't show both\n        if (result.HeroImageChild && result.HeroVideoChild) {\n          result.HeroVideoChild = undefined\n        }\n\n        return result\n      }, [children])\n\n    const mediaPositionProp = HeroImageChild?.props.position || HeroVideoChild?.props.position\n\n    const mediaPosition = (() => {\n      if (variant === 'gridline-expressive' && mediaPositionProp?.startsWith('inline-')) {\n        if (process.env.NODE_ENV !== 'production') {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `Hero: \"gridline-expressive\" variant does not support \"${mediaPositionProp}\" position. Defaulting to \"block-end\".`,\n          )\n        }\n        return 'block-end'\n      }\n      return mediaPositionProp || 'block-end'\n    })()\n    const mediaWrapperHasBorder = HeroImageChild?.props.enableBorder ?? HeroVideoChild?.props.enableBorder ?? true\n    const hasInlineMedia = heroMediaInlinePositions.includes(mediaPosition as HeroMediaInlinePositions)\n    const inlineMediaPosition = hasInlineMedia ? mediaPosition : undefined\n    const mediaChild = HeroImageChild || HeroVideoChild\n    const isGridline = variant === 'gridline'\n    const isGridlineExpressive = variant === 'gridline-expressive'\n    const isBlockEndPosition = mediaPosition === 'block-end' || mediaPosition === 'block-end-padded'\n    const isBlockEndPadded = mediaPosition === 'block-end-padded'\n\n    const isInvalidGridlineAlignment = isGridlineExpressive && alignProp === 'center'\n    const align: HeroAlign = isInvalidGridlineAlignment ? 'start' : alignProp\n\n    if (isInvalidGridlineAlignment && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {\n      // eslint-disable-next-line no-console\n      console.warn('Hero: the \"gridline-expressive\" variant does not support align=\"center\"; using \"start\" instead.')\n    }\n\n    const Tag = (isGridline || isGridlineExpressive) && enableAnimation ? AnimationProvider : Fragment\n    const tagProps =\n      (isGridline || isGridlineExpressive) && enableAnimation\n        ? {\n            autoStaggerChildren: false,\n            animationTrigger: 'immediate' as const,\n          }\n        : {}\n\n    const useContainedLayout = (isGridline || isGridlineExpressive) && isBlockEndPosition\n    const useInlineGridline = isGridline && hasInlineMedia\n\n    const heroLayoutClass = HeroImageChild ? styles['Hero--layout-image'] : styles['Hero--layout-default']\n    const isInlineStart = mediaPosition === 'inline-start' || mediaPosition === 'inline-start-padded'\n\n    const renderTrailingComponent = (shouldAnimate: boolean) =>\n      TrailingComponent && (\n        <Box animate={shouldAnimate ? {variant: 'slide-in-up' as const, delay: 1000, duration: 1000} : undefined}>\n          <div className={styles['Hero-trailing']}>\n            <TrailingComponent />\n          </div>\n        </Box>\n      )\n\n    const renderActions = () => HeroActions.length > 0 && <div className={styles['Hero-actions']}>{HeroActions}</div>\n\n    return (\n      <Tag {...tagProps}>\n        <HeroContext.Provider value={{imagePosition: mediaPosition, variant, align, hasInlineMedia, enableAnimation}}>\n          <section\n            className={clsx(\n              styles.Hero,\n              styles[`Hero--variant-${variant}`],\n              !hasInlineMedia && styles[`Hero--align-${align}`],\n              heroLayoutClass,\n              (HeroImageChild || HeroVideoChild) && styles[`Hero--image-pos-${mediaPosition}`],\n              (HeroImageChild || HeroVideoChild) && hasInlineMedia && styles['Hero--image-pos-inline'],\n              useInlineGridline && styles['Hero--variant-inline-gridline'],\n              className,\n            )}\n            ref={ref}\n            aria-labelledby=\"hero-section-brand-heading\"\n            data-testid={testId || testIds.root}\n            {...rest}\n          >\n            <Grid\n              fullWidth={!useContainedLayout && !useInlineGridline}\n              data-testid={testIds.grid}\n              className={clsx(\n                styles['Hero-grid'],\n                styles[`Hero-grid--${mediaPosition}`],\n                useContainedLayout && !isGridlineExpressive && styles['Hero-grid--contained'],\n                useInlineGridline && styles['Hero-grid--bordered-inline'],\n                isGridlineExpressive && styles['Hero-grid--expressive'],\n              )}\n            >\n              {isGridlineExpressive ? (\n                <>\n                  {/* Expressive variant: header column (left) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 7 : 6}}\n                    className={styles['Hero-expressive-header-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroHeaderChildren}\n                    </Stack>\n                  </Grid.Column>\n                  {/* Expressive variant: body column (right) */}\n                  <Grid.Column\n                    span={{medium: 12, large: HeroDescriptionChild ? 5 : 6}}\n                    className={styles['Hero-expressive-body-column']}\n                  >\n                    <Stack direction=\"vertical\" gap=\"none\" padding=\"none\" alignItems=\"flex-start\">\n                      {HeroDescriptionChild}\n                      {renderActions()}\n                      {renderTrailingComponent(enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                </>\n              ) : (\n                <>\n                  {/* Standard GridLine variant: text column */}\n                  {isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: 6}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                  <Grid.Column span={{large: mediaChild && hasInlineMedia ? 6 : 12}}>\n                    <Stack\n                      className={clsx(\n                        useInlineGridline && styles['Hero-text-column--inline-gridline'],\n                        useInlineGridline && styles['Hero-contentColumn--bordered-inline'],\n                      )}\n                      direction=\"vertical\"\n                      gap=\"none\"\n                      padding=\"none\"\n                      alignItems={hasInlineMedia ? 'flex-start' : align === 'start' ? 'flex-start' : 'center'}\n                      justifyContent={hasInlineMedia ? undefined : align === 'start' ? 'flex-start' : 'center'}\n                    >\n                      {HeroChildren}\n                      {renderActions()}\n                      {renderTrailingComponent(isGridline && enableAnimation)}\n                    </Stack>\n                  </Grid.Column>\n                  {!isInlineStart && mediaChild && !useContainedLayout && (\n                    <Grid.Column\n                      ref={imageContainerRef}\n                      span={{large: hasInlineMedia ? 6 : 12}}\n                      className={clsx(\n                        imageBackgroundColor && styles[`Hero-imageContainer--bg-${imageBackgroundColor}`],\n                        useInlineGridline &&\n                          inlineMediaPosition?.includes('padded') &&\n                          styles['Hero-imageContainer--inline-bg-padded'],\n                        useInlineGridline && styles['Hero-imageContainer--inline-bordered'],\n                      )}\n                    >\n                      <div\n                        className={clsx(styles['Hero-mediaContainer'], imageContainerClassName)}\n                        style={imageContainerStyle}\n                      >\n                        {mediaChild}\n                      </div>\n                    </Grid.Column>\n                  )}\n                </>\n              )}\n            </Grid>\n            {mediaChild && useContainedLayout && (\n              <div\n                ref={imageContainerRef}\n                data-testid={testIds.imageWrapper}\n                className={clsx(\n                  styles['Hero-imageWrapper'],\n                  isBlockEndPadded && styles['Hero-imageWrapper--block-end-padded'],\n                  imageContainerClassName,\n                  imageBackgroundColor && styles[`Hero-imageWrapper--bg-${imageBackgroundColor}`],\n                )}\n                style={imageContainerStyle}\n              >\n                <div\n                  className={clsx(\n                    styles['Hero-imageWrapper-inner'],\n                    isBlockEndPadded && styles['Hero-imageWrapper-inner--padded'],\n                    mediaWrapperHasBorder && styles['Hero-imageWrapper-inner--with-gridline'],\n                  )}\n                >\n                  {mediaChild}\n                </div>\n              </div>\n            )}\n          </section>\n        </HeroContext.Provider>\n      </Tag>\n    )\n  },\n)\n\nexport const Hero = Object.assign(Root, {\n  Heading: HeroHeading,\n  Description: HeroDescription,\n  PrimaryAction: HeroPrimaryAction,\n  SecondaryAction: HeroSecondaryAction,\n  Image: HeroImage,\n  Video: HeroVideo,\n  Label: HeroLabel,\n  Eyebrow: HeroEyebrow,\n  testIds,\n})\n"],"mappings":"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"}

package/lib/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,5 +52,8 @@ 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 {};