@primer/brand-mcp 0.72.0-rc.f8b72452 → 0.72.1-rc.8a8dc720

package/content/page-design.md

@@ -36,12 +36,17 @@ Every full page should be framed top and bottom, unless the user has requested a
 
 ### Contain content within the grid
 
-Body content must sit in one centered, max-width grid framed by the brand's gridlines — it should rarely stretch edge-to-edge.
+Body content must sit in one centered, max-width grid framed by the brand's gridlines — it should rarely stretch edge-to-edge. Treat gridlines as one continuous page structure: every line endpoint must reach the viewport or shared page-grid boundary, or intersect another gridline. Never let a border stop in empty space.
 
 Examples of this are in the Flexsuite recipes.
 
 - **Do** — keep heroes, `River`s, `ComparisonTable` / `PricingOptions`, connected Card or Pillar groups, forms, `CTABanner`s, and prose on the same `Grid` / `Section` column. Draw thin side rules on the column and full-bleed horizontal rules between major sections.
-- **Don't** — give each section a different width, stretch content edge-to-edge, or let a section bleed full-width unless it is a deliberate background band behind the shared grid.
+- **Do** — for connected panels, put block rules on the outer frame, outer inline rules on the centered content container, and internal dividers on zero-gap cell wrappers. Preserve these intersections when max-width or column count changes at responsive breakpoints.
+- **Do** — give a panel frame's block-start and block-end rules the same extent. They may differ only when one rule is also a page-wide section boundary that intersects the frame's inline rules.
+
+- **Don't** — give sections different widths, add gaps between borders that should connect, or put borders on inset wrappers where their endpoints stop in empty space.
+- **Don't** — stretch content edge-to-edge or let a section bleed full-width unless it is a deliberate background band behind the shared grid.
+
 - **Mobile** — use a modest, consistent side inset and make sure nothing overflows the viewport.
 
 Resolve gutter, inset, and gridline (border) values with `primer_brand_tokens`; don't hardcode hex or pixel values.
@@ -121,12 +126,14 @@ Resolve exact sizes and weights with `primer_brand_tokens`.
 
 **Do**
 
-- Place `Card`, `Pillar`, `Box`, or custom items in a square frame using `<Grid columnGap="none" rowGap="none" enableGutters={false}>`.
+- Default to placing `Card`, `Pillar`, `Box`, or custom items in a square frame using `<Grid columnGap="none" rowGap="none" enableGutters={false}>`.
+- When Card images need to stretch to fill the Card width, set `padding="none"` on every `Card.Image` and `hasBorder` on every `Card` to provide visual containment. Place these full-bleed Cards in a regular `Grid` with a clear gap between them; this is a separate visual treatment from gridline Cards. Keep image position and aspect ratio consistent across the group, and retrieve Card examples with `primer_brand_examples` for reference.
 - Draw shared dividers on custom frame/cell wrappers and use `border-radius: 0` there.
 
 **Don't**
 
-- Render repeated panels as separate rounded cards, double their shared borders, or override `Card` / `Pillar` internals.
+- Put native-bordered, full-bleed Cards inside a shared gridline frame, or mix gridline and native-border treatments within one group.
+- Render other repeated panels as separate rounded cards, double their shared borders, or override `Card` / `Pillar` internals.
 - `Pillar` has no grid variant; don't invent one.
 
 ### CTABanner

package/dist/catalog/types.d.ts

@@ -15,6 +15,8 @@ export type CatalogExample = {
     title: string;
     /** Source snippet (JSX), when one could be extracted. */
     code?: string;
+    /** CSS modules referenced by the source snippet, when available. */
+    styles?: string;
     /** Where the snippet came from: an authored JSDoc `@example`, a tested Storybook story, or a docs page. */
     source: 'jsdoc' | 'story' | 'docs';
     /** Storybook story id, when the example comes from a story. */

package/dist/catalog/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/catalog/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AA4EH,MAAM,UAAU,YAAY;IAC1B,OAAO;QACL,YAAY,EAAE,qBAAqB;QACnC,oBAAoB,EAAE,SAAS;QAC/B,WAAW,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;QACtC,UAAU,EAAE,EAAE;QACd,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;KACZ,CAAA;AACH,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/catalog/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AA8EH,MAAM,UAAU,YAAY;IAC1B,OAAO;QACL,YAAY,EAAE,qBAAqB;QACnC,oBAAoB,EAAE,SAAS;QAC/B,WAAW,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;QACtC,UAAU,EAAE,EAAE;QACd,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;KACZ,CAAA;AACH,CAAC"}

package/dist/catalog.json

@@ -1,7 +1,7 @@
 {
   "brandPackage": "@primer/react-brand",
-  "generatedFromVersion": "0.72.0-rc.f8b72452",
-  "generatedAt": "2026-07-27T13:43:02.039Z",
+  "generatedFromVersion": "0.72.1-rc.8a8dc720",
+  "generatedAt": "2026-08-10T14:56:05.571Z",
   "components": [
     {
       "name": "Hero",
@@ -9,6 +9,7 @@
       "subcomponents": [
         "Hero.Heading",
         "Hero.Description",
+        "Hero.ButtonGroup",
         "Hero.PrimaryAction",
         "Hero.SecondaryAction",
         "Hero.Image",
@@ -67,7 +68,7 @@
       "examples": [
         {
           "title": "Hero example",
-          "code": "<Hero\n  imageContainerRef={imageRef}\n  enableAnimation\n  variant=\"gridline-expressive\"\n  trailingComponent={() => (\n    <Text variant=\"muted\">\n      Already have Visual Studio Code? <InlineLink href=\"#\">Open now</InlineLink>\n    </Text>\n  )}\n>\n  <Hero.Label>GitHub Copilot</Hero.Label>\n  <Hero.Heading>Command your craft</Hero.Heading>\n  <Hero.Description>Your AI accelerator for every workflow, from the editor to the enterprise.</Hero.Description>\n  <Hero.PrimaryAction href=\"#\">Try Copilot now</Hero.PrimaryAction>\n  <Hero.SecondaryAction href=\"#\">See plans & pricing</Hero.SecondaryAction>\n  <Hero.Image\n    enableBorder={false}\n    position=\"block-end\"\n    src={renderUI3}\n    alt=\"placeholder image, blank with gray solid fill\"\n  />\n</Hero>",
+          "code": "<Hero\n  imageContainerRef={imageRef}\n  enableAnimation\n  variant=\"gridline-expressive\"\n  trailingComponent={() => (\n    <Text variant=\"muted\">\n      Already have Visual Studio Code? <InlineLink href=\"#\">Open now</InlineLink>\n    </Text>\n  )}\n>\n  <Hero.Label>GitHub Copilot</Hero.Label>\n  <Hero.Heading>Command your craft</Hero.Heading>\n  <Hero.Description>Your AI accelerator for every workflow, from the editor to the enterprise.</Hero.Description>\n  <Hero.ButtonGroup>\n    <Button as=\"a\" href=\"#\">\n      Try Copilot now\n    </Button>\n    <Button as=\"a\" href=\"#\">\n      See plans & pricing\n    </Button>\n  </Hero.ButtonGroup>\n  <Hero.Image\n    enableBorder={false}\n    position=\"block-end\"\n    src={renderUI3}\n    alt=\"placeholder image, blank with gray solid fill\"\n  />\n</Hero>",
           "source": "story"
         }
       ],
@@ -282,7 +283,7 @@
       "props": [
         {
           "name": "children",
-          "type": "PrimerBrandButtonType[] | PrimerBrandButtonType",
+          "type": "ButtonGroupChild | ButtonGroupChild[]",
           "required": true
         },
         {
@@ -567,6 +568,7 @@
         {
           "title": "MediaPlaylist example",
           "code": "<MediaPlaylist>\n  <MediaPlaylist.Heading>Latest videos</MediaPlaylist.Heading>\n\n  {youtubeVideos.slice(0, 1).map(video => (\n    <MediaPlaylist.Item\n      key={video.id}\n      thumbnail={\n        <Image\n          src={`https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`}\n          alt=\"\"\n          aspectRatio=\"16:9\"\n          loading=\"lazy\"\n        />\n      }\n    >\n      <MediaPlaylist.ItemHeading title={video.title} description={video.duration} />\n      <MediaPlaylist.ItemContent>\n        <Prose\n          enableFullWidth\n          html={`\n            <h3>${video.title}</h3>\n            <p>${video.summary}</p>\n          `}\n        />\n      </MediaPlaylist.ItemContent>\n      <MediaPlaylist.ItemMedia>\n        <iframe\n          className={styles.youtubeEmbed}\n          src={`https://www.youtube-nocookie.com/embed/${video.id}`}\n          title={video.title}\n          loading=\"lazy\"\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n          allowFullScreen\n          referrerPolicy=\"strict-origin-when-cross-origin\"\n        />\n      </MediaPlaylist.ItemMedia>\n    </MediaPlaylist.Item>\n  ))}\n</MediaPlaylist>",
+          "styles": "/* MediaPlaylist/MediaPlaylist.stories.module.css */\n.youtubeEmbed {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  border: 0;\n}",
           "source": "story"
         }
       ],
@@ -1768,7 +1770,8 @@
       "examples": [
         {
           "title": "Pillar example",
-          "code": "<Grid.Column key={pillar.heading} span={{xsmall: 12, large: 4}} className={gridStyles.gridColumn}>\n  <Box\n    className={gridStyles.gridItem}\n    paddingBlockStart={{narrow: 48, regular: 64}}\n    paddingBlockEnd={{narrow: 48, regular: 64}}\n    paddingInlineStart={{narrow: 32, regular: 64}}\n    paddingInlineEnd={{narrow: 32, regular: 64}}\n  >\n    <Pillar>\n      <Pillar.Icon icon={pillar.icon} />\n      <Pillar.Heading>{pillar.heading}</Pillar.Heading>\n      <Pillar.Description>{pillar.description}</Pillar.Description>\n    </Pillar>\n  </Box>\n</Grid.Column>",
+          "code": "<Section fullWidth paddingBlockStart=\"condensed\" paddingBlockEnd=\"normal\">\n  <Stack direction=\"vertical\" padding=\"none\" gap=\"spacious\">\n    <SectionIntro align=\"center\" fullWidth>\n      <SectionIntro.Heading as=\"h2\" size=\"3\">\n        Empower your whole school to build and learn with GitHub\n      </SectionIntro.Heading>\n    </SectionIntro>\n\n    <Box className={gridStyles.gridFrame}>\n      <Box className={clsx(gridStyles.gridContent, gridStyles.gridContentWide)}>\n        <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n          {educationPillars.map(pillar => {\n            return (\n              <Grid.Column key={pillar.heading} span={{xsmall: 12, large: 4}} className={gridStyles.gridColumn}>\n                <Box\n                  className={gridStyles.gridItem}\n                  paddingBlockStart={{narrow: 48, regular: 64}}\n                  paddingBlockEnd={{narrow: 48, regular: 64}}\n                  paddingInlineStart={{narrow: 32, regular: 64}}\n                  paddingInlineEnd={{narrow: 32, regular: 64}}\n                >\n                  <Pillar>\n                    <Pillar.Icon icon={pillar.icon} />\n                    <Pillar.Heading>{pillar.heading}</Pillar.Heading>\n                    <Pillar.Description>{pillar.description}</Pillar.Description>\n                  </Pillar>\n                </Box>\n              </Grid.Column>\n            )\n          })}\n        </Grid>\n      </Box>\n    </Box>\n  </Stack>\n</Section>",
+          "styles": "/* Card/Card.stories.shared.module.css */\n.gridFrame {\n  width: 100%;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.gridContent {\n  width: 100%;\n  max-width: 789px;\n  margin-inline: auto;\n}\n\n.gridContentWide {\n  width: 100%;\n}\n\n.gridColumn {\n  display: flex;\n}\n\n.gridItem {\n  width: 100%;\n  height: 100%;\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.gridColumnArrowHover .gridItem {\n  transition: background var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.gridColumnArrowHover .gridItem:is(:hover, :focus-within) {\n  background: linear-gradient(180deg, rgba(242, 245, 243, 0.5) 0%, rgba(242, 245, 243, 0) 100%),\n    var(--brand-color-canvas-default);\n}\n\n[data-color-mode='dark'] .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {\n  background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),\n    var(--brand-color-canvas-default);\n}\n\n.gridColumn:first-child .gridItem {\n  border-block-start: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .gridContent {\n    max-width: none;\n  }\n\n  .gridContentWide {\n    max-width: 81rem;\n  }\n\n  .gridItem {\n    border-block-start: 0;\n    border-inline-end: 0;\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  }\n\n  .gridColumn:nth-child(n + 4) .gridItem {\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  }\n\n  .gridColumn:nth-child(3n) .gridItem,\n  .gridColumn:last-child .gridItem {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  }\n}",
           "source": "story"
         }
       ],
@@ -1800,7 +1803,7 @@
         {
           "name": "disableAnimation",
           "type": "boolean",
-          "description": "Disable the default hover animation",
+          "description": "Disable transitions and animations within the Card",
           "required": false
         },
         {
@@ -1859,7 +1862,8 @@
       "examples": [
         {
           "title": "Card example",
-          "code": "<>\n  <Section backgroundColor=\"default\">\n    <Grid>\n      <Grid.Column span={{xsmall: 12, medium: 6}}>\n        <Card\n          hasBorder\n          fullWidth\n          align=\"center\"\n          href=\"https://github.com\"\n          ctaText={t('read_the_quick_start_guide')}\n        >\n          <Card.Icon icon={GitBranchIcon} color=\"purple\" hasBackground />\n          <Card.Heading>{t('code_search_heading')}</Card.Heading>\n          <Card.Description>{t('techtarget_devops_description')}</Card.Description>\n        </Card>\n      </Grid.Column>\n      <Grid.Column span={{xsmall: 12, medium: 6}}>\n        <Card\n          hasBorder\n          fullWidth\n          align=\"center\"\n          href=\"https://github.com\"\n          ctaText={t('get_the_most_out_of_github_copilot_in_your_ide')}\n        >\n          <Card.Icon icon={GitBranchIcon} color=\"purple\" hasBackground />\n          <Card.Heading>{t('code_search_heading')}</Card.Heading>\n          <Card.Description>{t('techtarget_devops_description')}</Card.Description>\n        </Card>\n      </Grid.Column>\n    </Grid>\n  </Section>\n  <Section backgroundColor=\"subtle\">\n    <Grid>\n      <Grid.Column span={{xsmall: 12, medium: 4}}>\n        <Card\n          hasBorder\n          fullWidth\n          align=\"center\"\n          href=\"https://github.com\"\n          ctaText={t('read_the_quick_start_guide')}\n        >\n          <Card.Icon icon={GitBranchIcon} color=\"purple\" hasBackground />\n          <Card.Heading>{t('code_search_heading')}</Card.Heading>\n          <Card.Description>{t('techtarget_devops_description')}</Card.Description>\n        </Card>\n      </Grid.Column>\n      <Grid.Column span={{xsmall: 12, medium: 4}}>\n        <Card\n          hasBorder\n          fullWidth\n          align=\"center\"\n          href=\"https://github.com\"\n          ctaText={t('get_the_most_out_of_github_copilot_in_your_ide')}\n        >\n          <Card.Icon icon={GitBranchIcon} color=\"purple\" hasBackground />\n          <Card.Heading>{t('code_search_heading')}</Card.Heading>\n          <Card.Description>{t('techtarget_devops_description')}</Card.Description>\n        </Card>\n      </Grid.Column>\n      <Grid.Column span={{xsmall: 12, medium: 4}}>\n        <Card\n          hasBorder\n          fullWidth\n          align=\"center\"\n          href=\"https://github.com\"\n          ctaText={t('read_the_quick_start_guide')}\n        >\n          <Card.Icon icon={GitBranchIcon} color=\"purple\" hasBackground />\n          <Card.Heading>{t('code_search_heading')}</Card.Heading>\n          <Card.Description>{t('techtarget_devops_description')}</Card.Description>\n        </Card>\n      </Grid.Column>\n    </Grid>\n  </Section>\n</>",
+          "code": "<Section fullWidth paddingBlockStart=\"condensed\" paddingBlockEnd=\"normal\">\n  <Stack direction=\"vertical\" padding=\"none\" gap=\"spacious\">\n    <SectionIntro align=\"center\" fullWidth>\n      <SectionIntro.Heading as=\"h2\" size=\"3\">\n        {t('explore_ai_at_github')}\n      </SectionIntro.Heading>\n    </SectionIntro>\n\n    <Box className={styles.gridFrame}>\n      <Box className={clsx(styles.gridContent, styles.gridContentWide)}>\n        <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n          {editorialCards.map((card, index) => {\n            return (\n              <Grid.Column\n                key={`${card.headingKey}-${index}`}\n                span={{xsmall: 12, large: 4}}\n                className={styles.gridColumn}\n              >\n                <Box className={styles.gridItem}>\n                  <Card\n                    href=\"https://github.com/resources/articles\"\n                    fullWidth\n                    ctaVariant=\"none\"\n                    backgroundColor=\"none\"\n                  >\n                    <Card.Image\n                      src={darkHorizontalBannerAlt}\n                      alt={t('abstract_blue_green_gradient_illustration')}\n                      aspectRatio=\"16:10\"\n                    />\n                    <Card.Heading>{t(card.headingKey)}</Card.Heading>\n                    <Card.Description>{t(card.descriptionKey)}</Card.Description>\n                    <Card.Tokens position=\"block-end\">\n                      <Token leadingVisual={<Avatar src={avatarMona} alt={t('mona_lisa')} size={32} />}>\n                        {t('mona_lisa')}\n                      </Token>\n                      <Token variant=\"outline\">{t('dec_25')}</Token>\n                    </Card.Tokens>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            )\n          })}\n        </Grid>\n      </Box>\n    </Box>\n  </Stack>\n</Section>",
+          "styles": "/* Card/Card.stories.shared.module.css */\n.gridFrame {\n  width: 100%;\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.gridContent {\n  width: 100%;\n  max-width: 789px;\n  margin-inline: auto;\n}\n\n.gridContentWide {\n  width: 100%;\n}\n\n.gridColumn {\n  display: flex;\n}\n\n.gridItem {\n  width: 100%;\n  height: 100%;\n  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n}\n\n.gridColumnArrowHover .gridItem {\n  transition: background var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.gridColumnArrowHover .gridItem:is(:hover, :focus-within) {\n  background: linear-gradient(180deg, rgba(242, 245, 243, 0.5) 0%, rgba(242, 245, 243, 0) 100%),\n    var(--brand-color-canvas-default);\n}\n\n[data-color-mode='dark'] .gridColumnArrowHover .gridItem:is(:hover, :focus-within) {\n  background: linear-gradient(180deg, rgba(242, 245, 243, 0.1) 0%, rgba(242, 245, 243, 0) 100%),\n    var(--brand-color-canvas-default);\n}\n\n.gridColumn:first-child .gridItem {\n  border-block-start: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .gridContent {\n    max-width: none;\n  }\n\n  .gridContentWide {\n    max-width: 81rem;\n  }\n\n  .gridItem {\n    border-block-start: 0;\n    border-inline-end: 0;\n    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  }\n\n  .gridColumn:nth-child(n + 4) .gridItem {\n    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  }\n\n  .gridColumn:nth-child(3n) .gridItem,\n  .gridColumn:last-child .gridItem {\n    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);\n  }\n}",
           "source": "story"
         }
       ],
@@ -3005,7 +3009,7 @@
       "examples": [
         {
           "title": "Statistic example",
-          "code": "<Stack direction=\"vertical\" gap=\"spacious\" padding=\"none\">\n  <Statistic padding=\"none\">\n    <Statistic.Heading>100M+</Statistic.Heading>\n    <Statistic.Description>padding: none</Statistic.Description>\n  </Statistic>\n  <Statistic padding=\"condensed\">\n    <Statistic.Heading>100M+</Statistic.Heading>\n    <Statistic.Description>padding: condensed</Statistic.Description>\n  </Statistic>\n  <Statistic padding=\"normal\">\n    <Statistic.Heading>100M+</Statistic.Heading>\n    <Statistic.Description>padding: normal</Statistic.Description>\n  </Statistic>\n  <Statistic padding=\"spacious\">\n    <Statistic.Heading>100M+</Statistic.Heading>\n    <Statistic.Description>padding: spacious</Statistic.Description>\n  </Statistic>\n  <Statistic\n    padding={{\n      narrow: 'condensed',\n      regular: 'normal',\n      wide: 'spacious',\n    }}\n  >\n    <Statistic.Heading>100M+</Statistic.Heading>\n    <Statistic.Description>padding: responsive</Statistic.Description>\n  </Statistic>\n</Stack>",
+          "code": "<>\n  <Box\n    marginBlockStart=\"normal\" /* This is for demo purposes only to reveal the initial gridline */\n    borderBlockEndWidth=\"thin\"\n    borderBlockStartWidth=\"thin\"\n    borderColor=\"muted\"\n    borderStyle=\"solid\"\n  >\n    <Grid enableGutters={false} columnGap=\"none\" rowGap=\"none\">\n      <Grid.Column span={{large: 8}}>\n        <Box\n          padding={{\n            narrow: 32,\n            regular: 32,\n            wide: 64,\n          }}\n          backgroundColor=\"subtle\"\n          borderInlineStartWidth={{\n            wide: 'thin',\n          }}\n          borderInlineEndWidth={{\n            wide: 'thin',\n          }}\n          borderColor=\"muted\"\n          borderStyle=\"solid\"\n          style={{height: '100%'}}\n        >\n          <Card href=\"https://github.com\" fullWidth variant=\"minimal\" disableAnimation>\n            <Card.Label>Resources</Card.Label>\n            <Card.Heading size=\"5\">\n              How Thomson Reuters successfully adopted AI —and how your organization can, too\n            </Card.Heading>\n            <Card.Image\n              position=\"block-end\"\n              aspectRatio=\"16:10\"\n              src={placeholderImage}\n              alt=\"placeholder, blank area with a gray background color\"\n            />\n          </Card>\n        </Box>\n      </Grid.Column>\n      <Grid.Column span={{large: 4}}>\n        <Box\n          borderInlineEndWidth={{\n            wide: 'thin',\n          }}\n          borderColor=\"muted\"\n          borderStyle=\"solid\"\n          style={{height: '100%'}}\n        >\n          <Stack direction=\"vertical\" padding=\"none\" gap=\"none\" style={{height: '100%'}}>\n            <Box\n              padding={{\n                narrow: 32,\n                wide: 64,\n              }}\n              borderBlockStartWidth={{\n                narrow: 'thin',\n                wide: 'none',\n              }}\n              borderColor=\"muted\"\n              borderStyle=\"solid\"\n              style={{flex: 1, display: 'flex', alignItems: 'center'}}\n            >\n              <Statistic>\n                <Statistic.Heading weight=\"normal\" size=\"800\" style={{color: 'var(--brand-color-text-emphasized)'}}>\n                  55%\n                </Statistic.Heading>\n                <Statistic.Description font=\"monospace\" size=\"100\">\n                  At vero eos et accusamus et iusto odio dignissimos\n                </Statistic.Description>\n              </Statistic>\n            </Box>\n            <Box\n              padding={{\n                narrow: 'normal',\n                wide: 64,\n              }}\n              borderBlockStartWidth=\"thin\"\n              borderColor=\"muted\"\n              borderStyle=\"solid\"\n              style={{flex: 1, display: 'flex', alignItems: 'center'}}\n            >\n              <Statistic>\n                <Statistic.Heading weight=\"normal\" size=\"800\" style={{color: 'var(--brand-color-text-emphasized)'}}>\n                  39%\n                </Statistic.Heading>\n                <Statistic.Description font=\"monospace\" size=\"100\">\n                  Sed ut perspiciatis unde omnis iste natus voluptatem\n                </Statistic.Description>\n              </Statistic>\n            </Box>\n            <Box\n              padding={{\n                narrow: 'normal',\n                wide: 64,\n              }}\n              borderBlockStartWidth=\"thin\"\n              borderColor=\"muted\"\n              borderStyle=\"solid\"\n              style={{flex: 1, display: 'flex', alignItems: 'center'}}\n            >\n              <Statistic>\n                <Statistic.Heading weight=\"normal\" size=\"800\" style={{color: 'var(--brand-color-text-emphasized)'}}>\n                  39%\n                </Statistic.Heading>\n                <Statistic.Description font=\"monospace\" size=\"100\">\n                  Sed ut perspiciatis unde omnis iste natus error sit\n                </Statistic.Description>\n              </Statistic>\n            </Box>\n          </Stack>\n        </Box>\n      </Grid.Column>\n    </Grid>\n  </Box>\n</>",
           "source": "story"
         }
       ],
@@ -6581,7 +6585,7 @@
     },
     {
       "name": "--brand-color-text-link-rest",
-      "value": "#005dd5",
+      "value": "var(--base-color-scale-blue-6)",
       "group": "functional"
     },
     {
@@ -6646,7 +6650,7 @@
     },
     {
       "name": "--brand-color-canvas-muted",
-      "value": "#fafafa",
+      "value": "#f9fbf9",
       "group": "functional"
     },
     {
@@ -7039,6 +7043,16 @@
       "value": "400ms",
       "group": "functional"
     },
+    {
+      "name": "--brand-Card-padding-inline",
+      "value": "var(--base-size-20)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-Card-padding-block",
+      "value": "var(--base-size-32)",
+      "group": "functional"
+    },
     {
       "name": "--brand-Card-maxWidth",
       "value": "26.25rem",
@@ -8309,6 +8323,11 @@
       "value": "var(--base-size-40)",
       "group": "functional"
     },
+    {
+      "name": "--brand-River-variant-gridline-visual-padding",
+      "value": "var(--base-size-32)",
+      "group": "functional"
+    },
     {
       "name": "--brand-River-spacing-outerBlock",
       "value": "var(--base-size-36)",
@@ -10032,7 +10051,7 @@
         "full page",
         "template"
       ],
-      "source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon, LogoGithubIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport type {CSSProperties} from 'react'\n\nimport {\n  Box,\n  Button,\n  Card,\n  CTABanner,\n  Grid,\n  Heading,\n  Hero,\n  Image,\n  InlineLink,\n  MediaPlaylist,\n  Section,\n  SectionIntro,\n  SubNav,\n  Text,\n  Token,\n} from '../../../..'\nimport {RedlineBackground} from '../../../../component-helpers'\n\nimport {\n  defaultFlexSuiteAIDetailsPlaylistContent,\n  type FlexSuiteAIDetailsPlaylistContent,\n} from './FlexSuiteAIDetailsPlaylist.content'\nimport placeholderImage from '../../../../fixtures/images/placeholder.png'\nimport overviewStyles from '../../Overview/FlexSuiteAIOverview.module.css'\n\nexport type FlexSuiteAIDetailsPlaylistTemplateProps = {\n  content: FlexSuiteAIDetailsPlaylistContent\n}\n\nconst cardIcons = [CpuIcon, CodeOfConductIcon, LightBulbIcon] as const\nconst videoEmbedStyles: CSSProperties = {\n  aspectRatio: '16 / 9',\n  border: 0,\n  display: 'block',\n  width: '100%',\n}\n\nexport function FlexSuiteAIDetailsPlaylist() {\n  return <FlexSuiteAIDetailsPlaylistTemplate content={defaultFlexSuiteAIDetailsPlaylistContent} />\n}\n\nexport function FlexSuiteAIDetailsPlaylistTemplate({content}: FlexSuiteAIDetailsPlaylistTemplateProps) {\n  return (\n    <Box className={overviewStyles.page} backgroundColor=\"default\">\n      <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n      <Box style={{minHeight: '56px', position: 'relative'}}>\n        <SubNav>\n          <SubNav.Heading href=\"#\">{content.subNav.heading}</SubNav.Heading>\n\n          {content.subNav.links.map((link, index) => (\n            <SubNav.Link key={link} href=\"#\" aria-current={index === 4 ? 'page' : undefined}>\n              {link}\n            </SubNav.Link>\n          ))}\n        </SubNav>\n      </Box>\n\n      <Box\n        backgroundColor=\"subtle\"\n        borderInlineStartWidth=\"thin\"\n        borderInlineEndWidth=\"thin\"\n        borderColor=\"muted\"\n        borderStyle=\"solid\"\n        style={{maxInlineSize: 'var(--brand-breakpoint-xlarge)', marginInline: 'auto'}}\n      >\n        <Hero\n          align=\"center\"\n          trailingComponent={() => (\n            <Box marginBlockStart={12}>\n              <Text size=\"100\">\n                {content.hero.secondaryText} <InlineLink href=\"#\">{content.hero.secondaryLinkText}</InlineLink>\n              </Text>\n            </Box>\n          )}\n        >\n          <Hero.Heading>\n            {content.hero.headingPrefix}\n            <br /> <b>{content.hero.headingEmphasis}</b>\n          </Hero.Heading>\n          <Hero.Description>{content.hero.description}</Hero.Description>\n          <Hero.PrimaryAction href=\"#\">{content.hero.primaryAction}</Hero.PrimaryAction>\n        </Hero>\n      </Box>\n\n      {content.playlists.map((playlist, index) => (\n        <Box\n          key={playlist.heading}\n          borderColor=\"muted\"\n          borderStyle=\"solid\"\n          borderBlockStartWidth={index === 0 ? 'thin' : 'none'}\n        >\n          <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\" fullWidth>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Heading size=\"3\">{playlist.heading}</SectionIntro.Heading>\n            </SectionIntro>\n          </Section>\n          <MediaPlaylist>\n            <MediaPlaylist.Heading>{playlist.playlistHeading}</MediaPlaylist.Heading>\n\n            {playlist.videos.map(video => (\n              <MediaPlaylist.Item\n                key={video.id}\n                thumbnail={\n                  <Image\n                    src={\n                      process.env.NODE_ENV === 'test'\n                        ? placeholderImage\n                        : `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`\n                    }\n                    alt=\"\"\n                    aspectRatio=\"16:9\"\n                    loading=\"lazy\"\n                  />\n                }\n              >\n                <MediaPlaylist.ItemHeading title={video.title} description={video.duration} />\n                <MediaPlaylist.ItemContent>\n                  <Heading as=\"h3\" size=\"subhead-large\">\n                    {video.title}\n                  </Heading>\n                  <Text variant=\"muted\">{video.summary}</Text>\n                </MediaPlaylist.ItemContent>\n                <MediaPlaylist.ItemMedia>\n                  <iframe\n                    style={videoEmbedStyles}\n                    src={`https://www.youtube-nocookie.com/embed/${video.id}`}\n                    title={video.title}\n                    loading=\"lazy\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                    allowFullScreen\n                    referrerPolicy=\"strict-origin-when-cross-origin\"\n                  />\n                </MediaPlaylist.ItemMedia>\n              </MediaPlaylist.Item>\n            ))}\n          </MediaPlaylist>\n        </Box>\n      ))}\n\n      <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\" fullWidth>\n        <SectionIntro align=\"center\" fullWidth>\n          <SectionIntro.Heading size=\"3\">{content.resources.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={overviewStyles.cardGridFrame}>\n        <Box className={overviewStyles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.resources.cards.map((card, index) => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(overviewStyles.cardGridColumn, overviewStyles.cardGridColumnArrowHover)}\n              >\n                <Box className={overviewStyles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={overviewStyles.resourceCard}\n                  >\n                    <Card.Icon icon={cardIcons[index]} color=\"green\" hasBackground size=\"medium\" />\n                    <Card.Tokens>\n                      <Token>{card.tag}</Token>\n                    </Card.Tokens>\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box paddingBlockStart={80} paddingBlockEnd={80}>\n        <CTABanner align=\"center\" hasGridLines>\n          <CTABanner.Logo>\n            <LogoGithubIcon size={64} />\n          </CTABanner.Logo>\n          <CTABanner.Heading>\n            {content.cta.headingPrefix} <br /> <b>{content.cta.headingEmphasis}</b>\n          </CTABanner.Heading>\n          <CTABanner.Description>{content.cta.description}</CTABanner.Description>\n          <CTABanner.ButtonGroup>\n            <Button>{content.cta.primaryAction}</Button>\n          </CTABanner.ButtonGroup>\n        </CTABanner>\n      </Box>\n\n      <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n        <RedlineBackground\n          style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n        />\n      </RedlineBackground>\n    </Box>\n  )\n}"
+      "source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon, LogoGithubIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport type {CSSProperties} from 'react'\n\nimport {\n  Box,\n  Button,\n  Card,\n  CTABanner,\n  Grid,\n  Heading,\n  Hero,\n  Image,\n  InlineLink,\n  MediaPlaylist,\n  Section,\n  SectionIntro,\n  SubNav,\n  Text,\n  Token,\n} from '../../../..'\nimport {RedlineBackground} from '../../../../component-helpers'\n\nimport {\n  defaultFlexSuiteAIDetailsPlaylistContent,\n  type FlexSuiteAIDetailsPlaylistContent,\n} from './FlexSuiteAIDetailsPlaylist.content'\nimport placeholderImage from '../../../../fixtures/images/placeholder.png'\nimport overviewStyles from '../../Overview/FlexSuiteAIOverview.module.css'\n\nexport type FlexSuiteAIDetailsPlaylistTemplateProps = {\n  content: FlexSuiteAIDetailsPlaylistContent\n}\n\nconst cardIcons = [CpuIcon, CodeOfConductIcon, LightBulbIcon] as const\nconst videoEmbedStyles: CSSProperties = {\n  aspectRatio: '16 / 9',\n  border: 0,\n  display: 'block',\n  width: '100%',\n}\n\nexport function FlexSuiteAIDetailsPlaylist() {\n  return <FlexSuiteAIDetailsPlaylistTemplate content={defaultFlexSuiteAIDetailsPlaylistContent} />\n}\n\nexport function FlexSuiteAIDetailsPlaylistTemplate({content}: FlexSuiteAIDetailsPlaylistTemplateProps) {\n  return (\n    <Box className={overviewStyles.page} backgroundColor=\"default\">\n      <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n      <Box style={{minHeight: '56px', position: 'relative'}}>\n        <SubNav>\n          <SubNav.Heading href=\"#\">{content.subNav.heading}</SubNav.Heading>\n\n          {content.subNav.links.map((link, index) => (\n            <SubNav.Link key={link} href=\"#\" aria-current={index === 4 ? 'page' : undefined}>\n              {link}\n            </SubNav.Link>\n          ))}\n        </SubNav>\n      </Box>\n\n      <Box\n        backgroundColor=\"subtle\"\n        borderInlineStartWidth=\"thin\"\n        borderInlineEndWidth=\"thin\"\n        borderColor=\"muted\"\n        borderStyle=\"solid\"\n        style={{maxInlineSize: 'var(--brand-breakpoint-xlarge)', marginInline: 'auto'}}\n      >\n        <Hero\n          align=\"center\"\n          trailingComponent={() => (\n            <Box marginBlockStart={12}>\n              <Text size=\"100\">\n                {content.hero.secondaryText} <InlineLink href=\"#\">{content.hero.secondaryLinkText}</InlineLink>\n              </Text>\n            </Box>\n          )}\n        >\n          <Hero.Heading>\n            {content.hero.headingPrefix}\n            <br /> <b>{content.hero.headingEmphasis}</b>\n          </Hero.Heading>\n          <Hero.Description>{content.hero.description}</Hero.Description>\n          <Hero.ButtonGroup>\n            <Button as=\"a\" href=\"#\" variant=\"primary\">\n              {content.hero.primaryAction}\n            </Button>\n          </Hero.ButtonGroup>\n        </Hero>\n      </Box>\n\n      {content.playlists.map((playlist, index) => (\n        <Box\n          key={playlist.heading}\n          borderColor=\"muted\"\n          borderStyle=\"solid\"\n          borderBlockStartWidth={index === 0 ? 'thin' : 'none'}\n        >\n          <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\" fullWidth>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Heading size=\"3\">{playlist.heading}</SectionIntro.Heading>\n            </SectionIntro>\n          </Section>\n          <MediaPlaylist>\n            <MediaPlaylist.Heading>{playlist.playlistHeading}</MediaPlaylist.Heading>\n\n            {playlist.videos.map(video => (\n              <MediaPlaylist.Item\n                key={video.id}\n                thumbnail={\n                  <Image\n                    src={\n                      process.env.NODE_ENV === 'test'\n                        ? placeholderImage\n                        : `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`\n                    }\n                    alt=\"\"\n                    aspectRatio=\"16:9\"\n                    loading=\"lazy\"\n                  />\n                }\n              >\n                <MediaPlaylist.ItemHeading title={video.title} description={video.duration} />\n                <MediaPlaylist.ItemContent>\n                  <Heading as=\"h3\" size=\"subhead-large\">\n                    {video.title}\n                  </Heading>\n                  <Text variant=\"muted\">{video.summary}</Text>\n                </MediaPlaylist.ItemContent>\n                <MediaPlaylist.ItemMedia>\n                  <iframe\n                    style={videoEmbedStyles}\n                    src={`https://www.youtube-nocookie.com/embed/${video.id}`}\n                    title={video.title}\n                    loading=\"lazy\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                    allowFullScreen\n                    referrerPolicy=\"strict-origin-when-cross-origin\"\n                  />\n                </MediaPlaylist.ItemMedia>\n              </MediaPlaylist.Item>\n            ))}\n          </MediaPlaylist>\n        </Box>\n      ))}\n\n      <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\" fullWidth>\n        <SectionIntro align=\"center\" fullWidth>\n          <SectionIntro.Heading size=\"3\">{content.resources.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={overviewStyles.cardGridFrame}>\n        <Box className={overviewStyles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.resources.cards.map((card, index) => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(overviewStyles.cardGridColumn, overviewStyles.cardGridColumnArrowHover)}\n              >\n                <Box className={overviewStyles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={overviewStyles.resourceCard}\n                  >\n                    <Card.Icon icon={cardIcons[index]} color=\"green\" hasBackground size=\"medium\" />\n                    <Card.Tokens>\n                      <Token>{card.tag}</Token>\n                    </Card.Tokens>\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box paddingBlockStart={80} paddingBlockEnd={80}>\n        <CTABanner align=\"center\" hasGridLines>\n          <CTABanner.Logo>\n            <LogoGithubIcon size={64} />\n          </CTABanner.Logo>\n          <CTABanner.Heading>\n            {content.cta.headingPrefix} <br /> <b>{content.cta.headingEmphasis}</b>\n          </CTABanner.Heading>\n          <CTABanner.Description>{content.cta.description}</CTABanner.Description>\n          <CTABanner.ButtonGroup>\n            <Button>{content.cta.primaryAction}</Button>\n          </CTABanner.ButtonGroup>\n        </CTABanner>\n      </Box>\n\n      <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n        <RedlineBackground\n          style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n        />\n      </RedlineBackground>\n    </Box>\n  )\n}"
     },
     {
       "name": "FlexSuiteAIOverview",
@@ -10050,7 +10069,7 @@
         "full page",
         "template"
       ],
-      "source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon, LogoGithubIcon, SparkleFillIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {useEffect} from 'react'\n\nimport {\n  Box,\n  Card,\n  ColorModesEnum,\n  CTABanner,\n  FAQ,\n  FAQGroup,\n  Grid,\n  Hero,\n  Heading,\n  InlineLink,\n  LogoSuite,\n  Section,\n  SectionIntro,\n  SubNav,\n  Text,\n  River,\n  EyebrowText,\n  Link,\n  Stack,\n  Token,\n  PricingOptions,\n  Tabs,\n  Tiles,\n  Image,\n  useTheme,\n  Footnotes,\n} from '../../..'\nimport {RedlineBackground} from '../../../component-helpers'\nimport placeholderBg from '../../../fixtures/images/dither-bg-landscape-purple.png'\nimport brandDividerWide from '../../../fixtures/images/brand-divider-copilot-wide.png'\nimport mercardo from '../../../fixtures/images/bento/mercado.png'\nimport copilotHeroHead from '../../../fixtures/images/copilot-mascot-head-peeking.png'\nimport renderUI3 from '../../../fixtures/images/copilot-vscode-agent-mode-3.png'\nimport renderUI3Dark from '../../../fixtures/images/copilot-vscode-agent-mode-3-dark.png'\nimport {logos} from '../../../LogoSuite/LogoSuite.fixtures'\nimport {tileItems} from '../../../Tiles/Tiles.fixtures'\n\nimport {defaultFlexSuiteAIOverviewContent, type FlexSuiteAIOverviewContent} from './FlexSuiteAIOverview.content'\nimport styles from './FlexSuiteAIOverview.module.css'\n\nexport type FlexSuiteAIOverviewTemplateProps = {\n  content: FlexSuiteAIOverviewContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\n\nexport function FlexSuiteAIOverview() {\n  return <FlexSuiteAIOverviewTemplate content={defaultFlexSuiteAIOverviewContent} />\n}\n\nexport function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTemplateProps) {\n  const heroImageRef = React.useRef<HTMLDivElement>(null)\n  const riverImageRefs = React.useRef<Array<HTMLDivElement | null>>([])\n  const {colorMode} = useTheme()\n\n  useEffect(() => {\n    const cleanups: Array<() => void> = []\n\n    if (heroImageRef.current) {\n      cleanups.push(TempFadeInBackgroundEffect(heroImageRef.current, placeholderBg, 500))\n    }\n\n    for (const element of riverImageRefs.current) {\n      if (element) {\n        cleanups.push(TempFadeInBackgroundEffect(element, placeholderBg, 500))\n      }\n    }\n\n    return () => {\n      for (const cleanup of cleanups) {\n        cleanup()\n      }\n    }\n  }, [])\n\n  return (\n    <>\n      <Box className={styles.page} backgroundColor=\"default\">\n        <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n        <SubNav>\n          <SubNav.Heading href=\"#\">{content.subNav.heading}</SubNav.Heading>\n\n          {content.subNav.links.map(link => (\n            <SubNav.Link key={link} href=\"#\">\n              {link}\n            </SubNav.Link>\n          ))}\n        </SubNav>\n        <Box paddingBlockStart={64}></Box>\n\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\" fullWidth>\n          <Hero\n            imageContainerRef={heroImageRef}\n            enableAnimation\n            variant=\"gridline-expressive\"\n            trailingComponent={() => (\n              <Box className={styles.heroTrailingPeek}>\n                <Text variant=\"muted\">\n                  {content.hero.trailingText} <InlineLink href=\"#\">{content.hero.trailingLinkText}</InlineLink>\n                </Text>\n                <Image\n                  className={styles.heroTrailingPeekImage}\n                  style={\n                    {\n                      ['--hero-peek-left' as string]: '-310px',\n                      ['--hero-peek-bottom' as string]: '-65px',\n                      ['--hero-peek-width' as string]: '190px',\n                    } as React.CSSProperties\n                  }\n                  src={copilotHeroHead}\n                  alt={content.hero.peekAlt}\n                />\n              </Box>\n            )}\n          >\n            <Hero.Label>{content.hero.label}</Hero.Label>\n            <Hero.Heading>\n              {content.hero.headingLine1} <br /> {content.hero.headingLine2}\n            </Hero.Heading>\n            <Hero.Description>{content.hero.description}</Hero.Description>\n            <Hero.PrimaryAction href=\"#\">{content.hero.primaryAction}</Hero.PrimaryAction>\n            <Hero.SecondaryAction href=\"#\">{content.hero.secondaryAction}</Hero.SecondaryAction>\n            <Hero.Image\n              enableBorder={false}\n              position=\"block-end\"\n              src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n              alt={content.hero.imageAlt}\n            />\n          </Hero>\n        </Section>\n\n        <LogoSuite variant=\"gridline-expressive\">\n          <LogoSuite.Heading visuallyHidden>{content.logoSuiteHeading}</LogoSuite.Heading>\n          <LogoSuite.Logobar marquee={process.env.NODE_ENV !== 'test'}>{logos.slice(0, 8)}</LogoSuite.Logobar>\n        </LogoSuite>\n\n        <Box className={clsx(styles.cardGridFrame, styles.cardGridFrameNoTopBorder)}>\n          <Box className={styles.cardGridContent}>\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              {content.resourceCards.map((card, index) => (\n                <Grid.Column\n                  key={card.heading}\n                  span={{xsmall: 12, large: 4}}\n                  className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n                >\n                  <Box className={styles.cardGridItem} padding={24}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={styles.resourceCard}\n                    >\n                      <Card.Icon\n                        icon={cardIcons[index]}\n                        color=\"green\"\n                        hasBackground\n                        size=\"medium\"\n                        className={styles.resourceCardIcon}\n                      />\n                      <Card.Heading>{card.heading}</Card.Heading>\n                      <Card.Description>{card.description}</Card.Description>\n                    </Card>\n                  </Box>\n                </Grid.Column>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n\n        <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n          <SectionIntro align=\"center\" fullWidth>\n            <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n            <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n            <SectionIntro.Description>{content.workflow.description}</SectionIntro.Description>\n          </SectionIntro>\n        </Section>\n        <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n          <Stack direction=\"vertical\" padding=\"none\" gap=\"spacious\">\n            <River variant=\"gridline\">\n              <River.Visual\n                ref={element => {\n                  riverImageRefs.current[0] = element\n                }}\n              >\n                <picture>\n                  <source\n                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    media=\"(max-width: 47.99rem)\"\n                  />\n                  <img\n                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    alt={content.rivers[0].imageAlt}\n                  />\n                </picture>\n              </River.Visual>\n              <River.Content>\n                <EyebrowText>{content.rivers[0].eyebrow}</EyebrowText>\n                <Heading>{content.rivers[0].heading}</Heading>\n                <Text>{content.rivers[0].description}</Text>\n                <Link href=\"#\">{content.rivers[0].linkText}</Link>\n              </River.Content>\n            </River>\n            <River variant=\"gridline\">\n              <River.Visual\n                ref={element => {\n                  riverImageRefs.current[1] = element\n                }}\n              >\n                <picture>\n                  <source\n                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    media=\"(max-width: 47.99rem)\"\n                  />\n                  <img\n                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    alt={content.rivers[1].imageAlt}\n                  />\n                </picture>\n              </River.Visual>\n              <River.Content>\n                <EyebrowText>{content.rivers[1].eyebrow}</EyebrowText>\n                <Heading>{content.rivers[1].heading}</Heading>\n                <Text>{content.rivers[1].description}</Text>\n                <Link href=\"#\">{content.rivers[1].linkText}</Link>\n              </River.Content>\n            </River>\n            <River variant=\"gridline\">\n              <River.Visual\n                ref={element => {\n                  riverImageRefs.current[2] = element\n                }}\n              >\n                <picture>\n                  <source\n                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    media=\"(max-width: 47.99rem)\"\n                  />\n                  <img\n                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    alt={content.rivers[2].imageAlt}\n                  />\n                </picture>\n              </River.Visual>\n              <River.Content>\n                <EyebrowText>{content.rivers[2].eyebrow}</EyebrowText>\n                <Heading>{content.rivers[2].heading}</Heading>\n                <Text>{content.rivers[2].description}</Text>\n                <Link href=\"#\">{content.rivers[2].linkText}</Link>\n              </River.Content>\n            </River>\n          </Stack>\n        </Section>\n        <Box marginBlockStart={48}>\n          <CTABanner variant=\"balanced\" hasGridLines>\n            <CTABanner.Logo>{<LogoGithubIcon size={64} />}</CTABanner.Logo>\n            <CTABanner.Heading size=\"5\">\n              {content.bento.headingPrefix} <b>{content.bento.headingEmphasis}</b>\n            </CTABanner.Heading>\n            <CTABanner.Link href=\"#\">{content.bento.linkText}</CTABanner.Link>\n            <CTABanner.Image src={mercardo} alt={content.bento.imageAlt} />\n          </CTABanner>\n        </Box>\n        <Stack justifyContent=\"center\" padding=\"none\">\n          <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n            <Image src={brandDividerWide} alt={content.common.brandDividerAlt} style={{display: 'block'}} />\n          </Box>\n        </Stack>\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n          <Box paddingBlockEnd={48} paddingBlockStart={48}>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Heading>{content.organization.heading}</SectionIntro.Heading>\n              <SectionIntro.Description>{content.organization.description}</SectionIntro.Description>\n            </SectionIntro>\n          </Box>\n        </Section>\n\n        <Box className={styles.cardGridFrame}>\n          <Box className={styles.cardGridContent}>\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              {content.organization.cards.map((card, index) => (\n                <Grid.Column\n                  key={card.heading}\n                  span={{xsmall: 12, large: 4}}\n                  className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n                >\n                  <Box className={styles.cardGridItem}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={styles.resourceCard}\n                    >\n                      <Card.Icon\n                        icon={cardIcons[index]}\n                        color=\"green\"\n                        hasBackground\n                        size=\"medium\"\n                        className={styles.resourceCardIcon}\n                      />\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                      <Card.Heading>{card.heading}</Card.Heading>\n                      <Card.Description>{card.description}</Card.Description>\n                    </Card>\n                  </Box>\n                </Grid.Column>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n          <Box paddingBlockEnd={4} paddingBlockStart={60}>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Label>{content.plans.label}</SectionIntro.Label>\n              <SectionIntro.Heading>{content.plans.heading}</SectionIntro.Heading>\n            </SectionIntro>\n          </Box>\n        </Section>\n        <Tabs aria-label={content.plans.tabsAriaLabel} variant=\"accent\" className={styles.fullWidthTabsPanel}>\n          {content.plans.tabs.map(tab => (\n            <Tabs.Item key={tab}>{tab}</Tabs.Item>\n          ))}\n          {content.plans.tabs.map(tab => (\n            <Tabs.Panel key={tab}>\n              <Box className={styles.cardGridFrame} backgroundColor=\"default\">\n                <Grid>\n                  <Grid.Column span={12}>\n                    <PricingOptions\n                      style={{marginBlock: 'calc(var(--brand-borderWidth-thin) * -1)'}}\n                      variant=\"default-gradient\"\n                    >\n                      <PricingOptions.Item>\n                        <PricingOptions.Heading>{content.pricing.free.heading}</PricingOptions.Heading>\n                        <PricingOptions.Description>{content.pricing.free.description}</PricingOptions.Description>\n                        <PricingOptions.Price>{content.pricing.free.price}</PricingOptions.Price>\n                        <PricingOptions.FeatureList>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.free.features[0]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.free.features[1]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem\n                            leadingVisual={SparkleFillIcon}\n                            leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n                          >\n                            {content.pricing.free.features[2]}\n                          </PricingOptions.FeatureListItem>\n                        </PricingOptions.FeatureList>\n                        <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n                          {content.pricing.free.primaryAction}\n                        </PricingOptions.PrimaryAction>\n                        {content.pricing.free.secondaryAction ? (\n                          <PricingOptions.SecondaryAction as=\"a\" href=\"#\" variant=\"subtle\">\n                            {content.pricing.free.secondaryAction}\n                          </PricingOptions.SecondaryAction>\n                        ) : null}\n                      </PricingOptions.Item>\n                      <PricingOptions.Item>\n                        <PricingOptions.Heading>{content.pricing.pro.heading}</PricingOptions.Heading>\n                        {content.pricing.pro.label ? (\n                          <PricingOptions.Label>{content.pricing.pro.label}</PricingOptions.Label>\n                        ) : null}\n                        <PricingOptions.Description>{content.pricing.pro.description}</PricingOptions.Description>\n                        <PricingOptions.Price trailingText={content.pricing.pro.trailingText}>\n                          {content.pricing.pro.price}\n                        </PricingOptions.Price>\n                        <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n                          {content.pricing.pro.primaryAction}\n                        </PricingOptions.PrimaryAction>\n                        <PricingOptions.FeatureList>\n                          <PricingOptions.FeatureListHeading>\n                            {content.pricing.pro.featureListHeading}\n                          </PricingOptions.FeatureListHeading>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[0]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[1]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[2]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[3]}\n                          </PricingOptions.FeatureListItem>\n                        </PricingOptions.FeatureList>\n                        {content.pricing.pro.footnote ? (\n                          <PricingOptions.Footnote>\n                            {content.pricing.pro.footnote}{' '}\n                            {content.pricing.pro.footnoteLinkText ? (\n                              <InlineLink href=\"#\">{content.pricing.pro.footnoteLinkText}</InlineLink>\n                            ) : null}\n                          </PricingOptions.Footnote>\n                        ) : null}\n                      </PricingOptions.Item>\n\n                      <PricingOptions.Item>\n                        <PricingOptions.Heading>{content.pricing.proPlus.heading}</PricingOptions.Heading>\n                        <PricingOptions.Description>{content.pricing.proPlus.description}</PricingOptions.Description>\n                        <PricingOptions.Price trailingText={content.pricing.proPlus.trailingText}>\n                          {content.pricing.proPlus.price}\n                        </PricingOptions.Price>\n                        <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n                          {content.pricing.proPlus.primaryAction}\n                        </PricingOptions.PrimaryAction>\n                        <PricingOptions.FeatureList>\n                          <PricingOptions.FeatureListHeading>\n                            {content.pricing.proPlus.featureListHeading}\n                          </PricingOptions.FeatureListHeading>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.proPlus.features[0]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.proPlus.features[1]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem\n                            leadingVisual={SparkleFillIcon}\n                            leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n                          >\n                            {content.pricing.proPlus.features[2]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.proPlus.features[3]}\n                          </PricingOptions.FeatureListItem>\n                        </PricingOptions.FeatureList>\n                      </PricingOptions.Item>\n                    </PricingOptions>\n                  </Grid.Column>\n                </Grid>\n              </Box>\n            </Tabs.Panel>\n          ))}\n        </Tabs>\n\n        <Section paddingBlockEnd=\"none\">\n          <Tiles variant=\"gridlines\" layout=\"compact\">\n            {tileItems.slice(0, 6).map(item => (\n              <Tiles.Item key={item.name} name={item.name} href={item.href}>\n                {item.icon}\n              </Tiles.Item>\n            ))}\n          </Tiles>\n        </Section>\n\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n          <Box paddingBlockEnd={32} paddingBlockStart={80}>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n            </SectionIntro>\n          </Box>\n        </Section>\n\n        <Box className={styles.cardGridFrame} marginBlockEnd={80}>\n          <Box className={styles.cardGridContent}>\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              {content.resources.cards.map((card, index) => (\n                <Grid.Column\n                  key={card.heading}\n                  span={{xsmall: 12, large: 4}}\n                  className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n                >\n                  <Box className={styles.cardGridItem}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={styles.resourceCard}\n                    >\n                      <Card.Icon\n                        icon={cardIcons[index]}\n                        color=\"green\"\n                        hasBackground\n                        size=\"medium\"\n                        className={styles.resourceCardIcon}\n                      />\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                      <Card.Heading>{card.heading}</Card.Heading>\n                      <Card.Description>{card.description}</Card.Description>\n                    </Card>\n                  </Box>\n                </Grid.Column>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n        <Box paddingBlockEnd={64}>\n          <FAQGroup variant=\"gridline\" defaultSelectedIndex={1}>\n            <FAQGroup.Heading>\n              <Box paddingInlineStart=\"spacious\">\n                {content.faq.headingLine1}\n                <br />\n                {content.faq.headingLine2}\n              </Box>\n            </FAQGroup.Heading>\n            {content.faq.groups.map(group => (\n              <FAQ key={group.heading} variant=\"gridline\">\n                <FAQ.Heading>{group.heading}</FAQ.Heading>\n                {group.items.map((item, index) => (\n                  <FAQ.Item key={item.question} name={`faq-${group.heading}`} open={index === 0}>\n                    <FAQ.Question>{item.question}</FAQ.Question>\n                    <FAQ.Answer>\n                      <Text as=\"p\" variant=\"muted\">\n                        {item.answer}\n                      </Text>\n                    </FAQ.Answer>\n                  </FAQ.Item>\n                ))}\n              </FAQ>\n            ))}\n          </FAQGroup>\n        </Box>\n        <footer>\n          <Section as=\"div\" paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n            <Grid>\n              <Grid.Column>\n                <Box paddingInlineStart={32}>\n                  <Footnotes>\n                    <Footnotes.Item id=\"economic-impact\" href=\"#economic-impact-ref\">\n                      Code review will incur Actions usage.{' '}\n                    </Footnotes.Item>\n                    <Footnotes.Item id=\"third-party\" href=\"#third-party-ref\">\n                      Response times may vary during periods of high usage. Requests may be subject to rate limiting.\n                    </Footnotes.Item>\n                    <Footnotes.Item id=\"ai\" href=\"#ai-ref\">\n                      Flex allotments will vary over time.\n                    </Footnotes.Item>\n                  </Footnotes>\n                </Box>\n              </Grid.Column>\n            </Grid>\n          </Section>\n        </footer>\n\n        <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n          <RedlineBackground\n            style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n          />\n        </RedlineBackground>\n      </Box>\n    </>\n  )\n}\n\nfunction TempFadeInBackgroundEffect(element: HTMLDivElement, backgroundImageUrl: string, delay = 100) {\n  element.style.position = 'relative'\n\n  const bgDiv = document.createElement('div')\n  bgDiv.style.cssText = `\n    position: absolute;\n    inset: 0;\n    background-image: url(${backgroundImageUrl});\n    background-size: cover;\n    background-position: center;\n    opacity: 0;\n    transition: opacity 1.5s ease-out;\n    z-index: 0;\n  `\n  element.insertBefore(bgDiv, element.firstChild)\n\n  const children = element.children\n  for (let index = 1; index < children.length; index += 1) {\n    ;(children[index] as HTMLElement).style.position = 'relative'\n    ;(children[index] as HTMLElement).style.zIndex = '1'\n  }\n\n  const timer = setTimeout(() => {\n    bgDiv.style.opacity = '1'\n  }, delay)\n\n  return () => {\n    clearTimeout(timer)\n    bgDiv.remove()\n  }\n}"
+      "source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon, LogoGithubIcon, SparkleFillIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\nimport React, {useEffect} from 'react'\n\nimport {\n  Box,\n  Button,\n  Card,\n  ColorModesEnum,\n  CTABanner,\n  FAQ,\n  FAQGroup,\n  Grid,\n  Hero,\n  Heading,\n  InlineLink,\n  LogoSuite,\n  Section,\n  SectionIntro,\n  SubNav,\n  Text,\n  River,\n  EyebrowText,\n  Link,\n  Stack,\n  Token,\n  PricingOptions,\n  Tabs,\n  Tiles,\n  Image,\n  useTheme,\n  Footnotes,\n} from '../../..'\nimport {RedlineBackground} from '../../../component-helpers'\nimport placeholderBg from '../../../fixtures/images/dither-bg-landscape-purple.png'\nimport brandDividerWide from '../../../fixtures/images/brand-divider-copilot-wide.png'\nimport mercardo from '../../../fixtures/images/bento/mercado.png'\nimport copilotHeroHead from '../../../fixtures/images/copilot-mascot-head-peeking.png'\nimport renderUI3 from '../../../fixtures/images/copilot-vscode-agent-mode-3.png'\nimport renderUI3Dark from '../../../fixtures/images/copilot-vscode-agent-mode-3-dark.png'\nimport {logos} from '../../../LogoSuite/LogoSuite.fixtures'\nimport {tileItems} from '../../../Tiles/Tiles.fixtures'\n\nimport {defaultFlexSuiteAIOverviewContent, type FlexSuiteAIOverviewContent} from './FlexSuiteAIOverview.content'\nimport styles from './FlexSuiteAIOverview.module.css'\n\nexport type FlexSuiteAIOverviewTemplateProps = {\n  content: FlexSuiteAIOverviewContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\n\nexport function FlexSuiteAIOverview() {\n  return <FlexSuiteAIOverviewTemplate content={defaultFlexSuiteAIOverviewContent} />\n}\n\nexport function FlexSuiteAIOverviewTemplate({content}: FlexSuiteAIOverviewTemplateProps) {\n  const heroImageRef = React.useRef<HTMLDivElement>(null)\n  const riverImageRefs = React.useRef<Array<HTMLDivElement | null>>([])\n  const {colorMode} = useTheme()\n\n  useEffect(() => {\n    const cleanups: Array<() => void> = []\n\n    if (heroImageRef.current) {\n      cleanups.push(TempFadeInBackgroundEffect(heroImageRef.current, placeholderBg, 500))\n    }\n\n    for (const element of riverImageRefs.current) {\n      if (element) {\n        cleanups.push(TempFadeInBackgroundEffect(element, placeholderBg, 500))\n      }\n    }\n\n    return () => {\n      for (const cleanup of cleanups) {\n        cleanup()\n      }\n    }\n  }, [])\n\n  return (\n    <>\n      <Box className={styles.page} backgroundColor=\"default\">\n        <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n        <SubNav>\n          <SubNav.Heading href=\"#\">{content.subNav.heading}</SubNav.Heading>\n\n          {content.subNav.links.map(link => (\n            <SubNav.Link key={link} href=\"#\">\n              {link}\n            </SubNav.Link>\n          ))}\n        </SubNav>\n        <Box paddingBlockStart={64}></Box>\n\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\" fullWidth>\n          <Hero\n            imageContainerRef={heroImageRef}\n            enableAnimation\n            variant=\"gridline-expressive\"\n            trailingComponent={() => (\n              <Box className={styles.heroTrailingPeek}>\n                <Text variant=\"muted\">\n                  {content.hero.trailingText} <InlineLink href=\"#\">{content.hero.trailingLinkText}</InlineLink>\n                </Text>\n                <Image\n                  className={styles.heroTrailingPeekImage}\n                  style={\n                    {\n                      ['--hero-peek-left' as string]: '-310px',\n                      ['--hero-peek-bottom' as string]: '-65px',\n                      ['--hero-peek-width' as string]: '190px',\n                    } as React.CSSProperties\n                  }\n                  src={copilotHeroHead}\n                  alt={content.hero.peekAlt}\n                />\n              </Box>\n            )}\n          >\n            <Hero.Label>{content.hero.label}</Hero.Label>\n            <Hero.Heading>\n              {content.hero.headingLine1} <br /> {content.hero.headingLine2}\n            </Hero.Heading>\n            <Hero.Description>{content.hero.description}</Hero.Description>\n            <Hero.ButtonGroup>\n              <Button as=\"a\" href=\"#\" variant=\"primary\">\n                {content.hero.primaryAction}\n              </Button>\n              <Button as=\"a\" href=\"#\" variant=\"secondary\">\n                {content.hero.secondaryAction}\n              </Button>\n            </Hero.ButtonGroup>\n            <Hero.Image\n              enableBorder={false}\n              position=\"block-end\"\n              src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n              alt={content.hero.imageAlt}\n            />\n          </Hero>\n        </Section>\n\n        <LogoSuite variant=\"gridline-expressive\">\n          <LogoSuite.Heading visuallyHidden>{content.logoSuiteHeading}</LogoSuite.Heading>\n          <LogoSuite.Logobar marquee={process.env.NODE_ENV !== 'test'}>{logos.slice(0, 8)}</LogoSuite.Logobar>\n        </LogoSuite>\n\n        <Box className={clsx(styles.cardGridFrame, styles.cardGridFrameNoTopBorder)}>\n          <Box className={styles.cardGridContent}>\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              {content.resourceCards.map((card, index) => (\n                <Grid.Column\n                  key={card.heading}\n                  span={{xsmall: 12, large: 4}}\n                  className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n                >\n                  <Box className={styles.cardGridItem} padding={24}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={styles.resourceCard}\n                    >\n                      <Card.Icon\n                        icon={cardIcons[index]}\n                        color=\"green\"\n                        hasBackground\n                        size=\"medium\"\n                        className={styles.resourceCardIcon}\n                      />\n                      <Card.Heading>{card.heading}</Card.Heading>\n                      <Card.Description>{card.description}</Card.Description>\n                    </Card>\n                  </Box>\n                </Grid.Column>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n\n        <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n          <SectionIntro align=\"center\" fullWidth>\n            <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n            <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n            <SectionIntro.Description>{content.workflow.description}</SectionIntro.Description>\n          </SectionIntro>\n        </Section>\n        <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n          <Stack direction=\"vertical\" padding=\"none\" gap=\"spacious\">\n            <River variant=\"gridline\">\n              <River.Visual\n                ref={element => {\n                  riverImageRefs.current[0] = element\n                }}\n              >\n                <picture>\n                  <source\n                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    media=\"(max-width: 47.99rem)\"\n                  />\n                  <img\n                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    alt={content.rivers[0].imageAlt}\n                  />\n                </picture>\n              </River.Visual>\n              <River.Content>\n                <EyebrowText>{content.rivers[0].eyebrow}</EyebrowText>\n                <Heading>{content.rivers[0].heading}</Heading>\n                <Text>{content.rivers[0].description}</Text>\n                <Link href=\"#\">{content.rivers[0].linkText}</Link>\n              </River.Content>\n            </River>\n            <River variant=\"gridline\">\n              <River.Visual\n                ref={element => {\n                  riverImageRefs.current[1] = element\n                }}\n              >\n                <picture>\n                  <source\n                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    media=\"(max-width: 47.99rem)\"\n                  />\n                  <img\n                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    alt={content.rivers[1].imageAlt}\n                  />\n                </picture>\n              </River.Visual>\n              <River.Content>\n                <EyebrowText>{content.rivers[1].eyebrow}</EyebrowText>\n                <Heading>{content.rivers[1].heading}</Heading>\n                <Text>{content.rivers[1].description}</Text>\n                <Link href=\"#\">{content.rivers[1].linkText}</Link>\n              </River.Content>\n            </River>\n            <River variant=\"gridline\">\n              <River.Visual\n                ref={element => {\n                  riverImageRefs.current[2] = element\n                }}\n              >\n                <picture>\n                  <source\n                    srcSet={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    media=\"(max-width: 47.99rem)\"\n                  />\n                  <img\n                    src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                    alt={content.rivers[2].imageAlt}\n                  />\n                </picture>\n              </River.Visual>\n              <River.Content>\n                <EyebrowText>{content.rivers[2].eyebrow}</EyebrowText>\n                <Heading>{content.rivers[2].heading}</Heading>\n                <Text>{content.rivers[2].description}</Text>\n                <Link href=\"#\">{content.rivers[2].linkText}</Link>\n              </River.Content>\n            </River>\n          </Stack>\n        </Section>\n        <Box marginBlockStart={48}>\n          <CTABanner variant=\"balanced\" hasGridLines>\n            <CTABanner.Logo>{<LogoGithubIcon size={64} />}</CTABanner.Logo>\n            <CTABanner.Heading size=\"5\">\n              {content.bento.headingPrefix} <b>{content.bento.headingEmphasis}</b>\n            </CTABanner.Heading>\n            <CTABanner.Link href=\"#\">{content.bento.linkText}</CTABanner.Link>\n            <CTABanner.Image src={mercardo} alt={content.bento.imageAlt} />\n          </CTABanner>\n        </Box>\n        <Stack justifyContent=\"center\" padding=\"none\">\n          <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n            <Image src={brandDividerWide} alt={content.common.brandDividerAlt} style={{display: 'block'}} />\n          </Box>\n        </Stack>\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n          <Box paddingBlockEnd={48} paddingBlockStart={48}>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Heading>{content.organization.heading}</SectionIntro.Heading>\n              <SectionIntro.Description>{content.organization.description}</SectionIntro.Description>\n            </SectionIntro>\n          </Box>\n        </Section>\n\n        <Box className={styles.cardGridFrame}>\n          <Box className={styles.cardGridContent}>\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              {content.organization.cards.map((card, index) => (\n                <Grid.Column\n                  key={card.heading}\n                  span={{xsmall: 12, large: 4}}\n                  className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n                >\n                  <Box className={styles.cardGridItem}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={styles.resourceCard}\n                    >\n                      <Card.Icon\n                        icon={cardIcons[index]}\n                        color=\"green\"\n                        hasBackground\n                        size=\"medium\"\n                        className={styles.resourceCardIcon}\n                      />\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                      <Card.Heading>{card.heading}</Card.Heading>\n                      <Card.Description>{card.description}</Card.Description>\n                    </Card>\n                  </Box>\n                </Grid.Column>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n          <Box paddingBlockEnd={4} paddingBlockStart={60}>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Label>{content.plans.label}</SectionIntro.Label>\n              <SectionIntro.Heading>{content.plans.heading}</SectionIntro.Heading>\n            </SectionIntro>\n          </Box>\n        </Section>\n        <Tabs aria-label={content.plans.tabsAriaLabel} variant=\"accent\" className={styles.fullWidthTabsPanel}>\n          {content.plans.tabs.map(tab => (\n            <Tabs.Item key={tab}>{tab}</Tabs.Item>\n          ))}\n          {content.plans.tabs.map(tab => (\n            <Tabs.Panel key={tab}>\n              <Box className={styles.cardGridFrame} backgroundColor=\"default\">\n                <Grid>\n                  <Grid.Column span={12}>\n                    <PricingOptions\n                      style={{marginBlock: 'calc(var(--brand-borderWidth-thin) * -1)'}}\n                      variant=\"default-gradient\"\n                    >\n                      <PricingOptions.Item>\n                        <PricingOptions.Heading>{content.pricing.free.heading}</PricingOptions.Heading>\n                        <PricingOptions.Description>{content.pricing.free.description}</PricingOptions.Description>\n                        <PricingOptions.Price>{content.pricing.free.price}</PricingOptions.Price>\n                        <PricingOptions.FeatureList>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.free.features[0]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.free.features[1]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem\n                            leadingVisual={SparkleFillIcon}\n                            leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n                          >\n                            {content.pricing.free.features[2]}\n                          </PricingOptions.FeatureListItem>\n                        </PricingOptions.FeatureList>\n                        <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n                          {content.pricing.free.primaryAction}\n                        </PricingOptions.PrimaryAction>\n                        {content.pricing.free.secondaryAction ? (\n                          <PricingOptions.SecondaryAction as=\"a\" href=\"#\" variant=\"subtle\">\n                            {content.pricing.free.secondaryAction}\n                          </PricingOptions.SecondaryAction>\n                        ) : null}\n                      </PricingOptions.Item>\n                      <PricingOptions.Item>\n                        <PricingOptions.Heading>{content.pricing.pro.heading}</PricingOptions.Heading>\n                        {content.pricing.pro.label ? (\n                          <PricingOptions.Label>{content.pricing.pro.label}</PricingOptions.Label>\n                        ) : null}\n                        <PricingOptions.Description>{content.pricing.pro.description}</PricingOptions.Description>\n                        <PricingOptions.Price trailingText={content.pricing.pro.trailingText}>\n                          {content.pricing.pro.price}\n                        </PricingOptions.Price>\n                        <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n                          {content.pricing.pro.primaryAction}\n                        </PricingOptions.PrimaryAction>\n                        <PricingOptions.FeatureList>\n                          <PricingOptions.FeatureListHeading>\n                            {content.pricing.pro.featureListHeading}\n                          </PricingOptions.FeatureListHeading>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[0]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[1]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[2]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.pro.features[3]}\n                          </PricingOptions.FeatureListItem>\n                        </PricingOptions.FeatureList>\n                        {content.pricing.pro.footnote ? (\n                          <PricingOptions.Footnote>\n                            {content.pricing.pro.footnote}{' '}\n                            {content.pricing.pro.footnoteLinkText ? (\n                              <InlineLink href=\"#\">{content.pricing.pro.footnoteLinkText}</InlineLink>\n                            ) : null}\n                          </PricingOptions.Footnote>\n                        ) : null}\n                      </PricingOptions.Item>\n\n                      <PricingOptions.Item>\n                        <PricingOptions.Heading>{content.pricing.proPlus.heading}</PricingOptions.Heading>\n                        <PricingOptions.Description>{content.pricing.proPlus.description}</PricingOptions.Description>\n                        <PricingOptions.Price trailingText={content.pricing.proPlus.trailingText}>\n                          {content.pricing.proPlus.price}\n                        </PricingOptions.Price>\n                        <PricingOptions.PrimaryAction as=\"a\" href=\"#\" variant=\"primary\">\n                          {content.pricing.proPlus.primaryAction}\n                        </PricingOptions.PrimaryAction>\n                        <PricingOptions.FeatureList>\n                          <PricingOptions.FeatureListHeading>\n                            {content.pricing.proPlus.featureListHeading}\n                          </PricingOptions.FeatureListHeading>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.proPlus.features[0]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.proPlus.features[1]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem\n                            leadingVisual={SparkleFillIcon}\n                            leadingVisualFill=\"var(--base-color-scale-purple-5)\"\n                          >\n                            {content.pricing.proPlus.features[2]}\n                          </PricingOptions.FeatureListItem>\n                          <PricingOptions.FeatureListItem>\n                            {content.pricing.proPlus.features[3]}\n                          </PricingOptions.FeatureListItem>\n                        </PricingOptions.FeatureList>\n                      </PricingOptions.Item>\n                    </PricingOptions>\n                  </Grid.Column>\n                </Grid>\n              </Box>\n            </Tabs.Panel>\n          ))}\n        </Tabs>\n\n        <Section paddingBlockEnd=\"none\">\n          <Tiles variant=\"gridlines\" layout=\"compact\">\n            {tileItems.slice(0, 6).map(item => (\n              <Tiles.Item key={item.name} name={item.name} href={item.href}>\n                {item.icon}\n              </Tiles.Item>\n            ))}\n          </Tiles>\n        </Section>\n\n        <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n          <Box paddingBlockEnd={32} paddingBlockStart={80}>\n            <SectionIntro align=\"center\" fullWidth>\n              <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n            </SectionIntro>\n          </Box>\n        </Section>\n\n        <Box className={styles.cardGridFrame} marginBlockEnd={80}>\n          <Box className={styles.cardGridContent}>\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              {content.resources.cards.map((card, index) => (\n                <Grid.Column\n                  key={card.heading}\n                  span={{xsmall: 12, large: 4}}\n                  className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n                >\n                  <Box className={styles.cardGridItem}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={styles.resourceCard}\n                    >\n                      <Card.Icon\n                        icon={cardIcons[index]}\n                        color=\"green\"\n                        hasBackground\n                        size=\"medium\"\n                        className={styles.resourceCardIcon}\n                      />\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                      <Card.Heading>{card.heading}</Card.Heading>\n                      <Card.Description>{card.description}</Card.Description>\n                    </Card>\n                  </Box>\n                </Grid.Column>\n              ))}\n            </Grid>\n          </Box>\n        </Box>\n        <Box paddingBlockEnd={64}>\n          <FAQGroup variant=\"gridline\" defaultSelectedIndex={1}>\n            <FAQGroup.Heading>\n              <Box paddingInlineStart=\"spacious\">\n                {content.faq.headingLine1}\n                <br />\n                {content.faq.headingLine2}\n              </Box>\n            </FAQGroup.Heading>\n            {content.faq.groups.map(group => (\n              <FAQ key={group.heading} variant=\"gridline\">\n                <FAQ.Heading>{group.heading}</FAQ.Heading>\n                {group.items.map((item, index) => (\n                  <FAQ.Item key={item.question} name={`faq-${group.heading}`} open={index === 0}>\n                    <FAQ.Question>{item.question}</FAQ.Question>\n                    <FAQ.Answer>\n                      <Text as=\"p\" variant=\"muted\">\n                        {item.answer}\n                      </Text>\n                    </FAQ.Answer>\n                  </FAQ.Item>\n                ))}\n              </FAQ>\n            ))}\n          </FAQGroup>\n        </Box>\n        <footer>\n          <Section as=\"div\" paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n            <Grid>\n              <Grid.Column>\n                <Box paddingInlineStart={32}>\n                  <Footnotes>\n                    <Footnotes.Item id=\"economic-impact\" href=\"#economic-impact-ref\">\n                      Code review will incur Actions usage.{' '}\n                    </Footnotes.Item>\n                    <Footnotes.Item id=\"third-party\" href=\"#third-party-ref\">\n                      Response times may vary during periods of high usage. Requests may be subject to rate limiting.\n                    </Footnotes.Item>\n                    <Footnotes.Item id=\"ai\" href=\"#ai-ref\">\n                      Flex allotments will vary over time.\n                    </Footnotes.Item>\n                  </Footnotes>\n                </Box>\n              </Grid.Column>\n            </Grid>\n          </Section>\n        </footer>\n\n        <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n          <RedlineBackground\n            style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n          />\n        </RedlineBackground>\n      </Box>\n    </>\n  )\n}\n\nfunction TempFadeInBackgroundEffect(element: HTMLDivElement, backgroundImageUrl: string, delay = 100) {\n  element.style.position = 'relative'\n\n  const bgDiv = document.createElement('div')\n  bgDiv.style.cssText = `\n    position: absolute;\n    inset: 0;\n    background-image: url(${backgroundImageUrl});\n    background-size: cover;\n    background-position: center;\n    opacity: 0;\n    transition: opacity 1.5s ease-out;\n    z-index: 0;\n  `\n  element.insertBefore(bgDiv, element.firstChild)\n\n  const children = element.children\n  for (let index = 1; index < children.length; index += 1) {\n    ;(children[index] as HTMLElement).style.position = 'relative'\n    ;(children[index] as HTMLElement).style.zIndex = '1'\n  }\n\n  const timer = setTimeout(() => {\n    bgDiv.style.opacity = '1'\n  }, delay)\n\n  return () => {\n    clearTimeout(timer)\n    bgDiv.remove()\n  }\n}"
     },
     {
       "name": "FlexSuiteSecurityCategory",
@@ -10067,7 +10086,7 @@
         "full page",
         "template"
       ],
-      "source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {\n  Box,\n  Card,\n  Grid,\n  Hero,\n  Pillar,\n  LogoSuite,\n  Section,\n  SectionIntro,\n  Stack,\n  SubNav,\n  Image,\n  Token,\n  Testimonial,\n  CTABanner,\n  Button,\n  Text,\n} from '../../../..'\nimport {logos} from '../../../../LogoSuite/LogoSuite.fixtures'\nimport placeholderBg from '../../../../fixtures/images/security-banner-wide.png'\nimport placeholderImage from '../../../../fixtures/images/placeholder.png'\nimport monaAvatar from '../../../../fixtures/images/avatar-mona.png'\nimport brandDividerWide from '../../../../fixtures/images/brand-divider-security-wide.png'\nimport riverFootstepsChat from './fixtures/images/river-footsteps-chat.png'\nimport riverFootstepsChatMobile from './fixtures/images/river-footsteps-chat-mobile.png'\nimport riverFootstepsReview from './fixtures/images/river-footsteps-review.png'\nimport riverFootstepsReviewMobile from './fixtures/images/river-footsteps-review-mobile.png'\nimport riverFootstepsWorkflow from './fixtures/images/river-footsteps-workflow.png'\nimport riverFootstepsWorkflowMobile from './fixtures/images/river-footsteps-workflow-mobile.png'\n\nimport {\n  defaultFlexSuiteSecurityCategoryContent,\n  type FlexSuiteSecurityCategoryContent,\n} from './FlexSuiteSecurityCategory.content'\nimport styles from '../../Overview/FlexSuiteAIOverview.module.css'\nimport {RedlineBackground} from '../../../../component-helpers'\nimport {LockIcon} from '@primer/octovisuals-react'\n\nexport type FlexSuiteSecurityCategoryTemplateProps = {\n  content: FlexSuiteSecurityCategoryContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\nconst riverFootstepsImages = [riverFootstepsWorkflow, riverFootstepsReview, riverFootstepsChat] as const\nconst riverFootstepsMobileImages = [\n  riverFootstepsWorkflowMobile,\n  riverFootstepsReviewMobile,\n  riverFootstepsChatMobile,\n] as const\n\nexport function FlexSuiteSecurityCategory() {\n  return <FlexSuiteSecurityCategoryTemplate content={defaultFlexSuiteSecurityCategoryContent} />\n}\n\nexport function FlexSuiteSecurityCategoryTemplate({content}: FlexSuiteSecurityCategoryTemplateProps) {\n  return (\n    <Box className={styles.page} backgroundColor=\"default\">\n      <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n      <SubNav>\n        <SubNav.Heading href=\"#\" aria-current=\"page\">\n          {content.subNav.heading}\n        </SubNav.Heading>\n\n        {content.subNav.links.map(link => (\n          <SubNav.Link key={link} href=\"#\">\n            {link}\n          </SubNav.Link>\n        ))}\n      </SubNav>\n\n      <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n        <Hero align=\"center\">\n          <Hero.Label>{content.hero.label}</Hero.Label>\n          <Hero.Heading>{content.hero.heading}</Hero.Heading>\n          <Hero.PrimaryAction href=\"#\">{content.hero.primaryAction}</Hero.PrimaryAction>\n          <Hero.SecondaryAction href=\"#\">{content.hero.secondaryAction}</Hero.SecondaryAction>\n        </Hero>\n      </Section>\n      <Stack justifyContent=\"center\" padding=\"none\" style={{marginTop: 'calc(var(--base-size-64) * -1)'}}>\n        <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n          <Image src={placeholderBg} alt={content.common.heroImageAlt} style={{display: 'block', width: '100%'}} />\n        </Box>\n      </Stack>\n      <Box\n        className={clsx(styles.cardGridFrame)}\n        marginBlockStart={{narrow: 24, wide: 80}}\n        marginBlockEnd={{narrow: 24, wide: 64}}\n      >\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.highlights.map((card, index) => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={styles.resourceCard}\n                  >\n                    <Card.Icon icon={cardIcons[index]} color=\"green\" hasBackground size=\"medium\" />\n                    {card.tag ? (\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                    ) : null}\n                    <Card.Heading as=\"h2\">{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box borderBlockStartWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n        <LogoSuite variant=\"gridline-expressive\">\n          <LogoSuite.Heading visuallyHidden>{content.logoSuiteHeading}</LogoSuite.Heading>\n          <LogoSuite.Logobar marquee={process.env.NODE_ENV !== 'test'}>{logos.slice(0, 8)}</LogoSuite.Logobar>\n        </LogoSuite>\n      </Box>\n\n      <Section paddingBlockEnd=\"none\" paddingBlockStart=\"condensed\">\n        <SectionIntro align=\"center\">\n          <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n          <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={styles.cardGridFrame} marginBlockStart={48}>\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.capabilities.map(card => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 6}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={styles.resourceCard}\n                  >\n                    <Card.Image aspectRatio=\"16:10\" src={placeholderImage} alt=\"\" />\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n        <SectionIntro align=\"center\" fullWidth>\n          <SectionIntro.Label>{content.customerStories.label}</SectionIntro.Label>\n          <SectionIntro.Heading>{content.customerStories.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={styles.cardGridFrame} marginBlockStart={48}>\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.customerStories.cards.map(card => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card href=\"#\" fullWidth ctaVariant=\"arrow\" className={styles.resourceCard}>\n                    {card.tag ? (\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                    ) : null}\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box\n        paddingInlineStart={48}\n        paddingInlineEnd={48}\n        borderBlockEndWidth=\"thin\"\n        borderColor=\"muted\"\n        borderStyle=\"solid\"\n      >\n        <Section>\n          <Testimonial variant=\"expressive\" size=\"large\">\n            <Testimonial.Quote>\n              {content.testimonial.quoteLead} <em>{content.testimonial.quoteEmphasis}</em>{' '}\n              {content.testimonial.quoteTrailing}\n            </Testimonial.Quote>\n            <Testimonial.Link href=\"#\">{content.testimonial.linkText}</Testimonial.Link>\n            <Testimonial.Avatar src={monaAvatar} alt={content.testimonial.avatarAlt} />\n            <Testimonial.Name position={content.testimonial.position}>{content.testimonial.name}</Testimonial.Name>\n          </Testimonial>\n        </Section>\n      </Box>\n\n      <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n        <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n          <Box\n            borderInlineStartWidth=\"thin\"\n            borderInlineEndWidth=\"thin\"\n            borderColor=\"muted\"\n            borderStyle=\"solid\"\n            padding={{narrow: 24, regular: 48, wide: 64}}\n          >\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              <Grid.Column span={{xsmall: 12, large: 5}}>\n                <SectionIntro>\n                  <SectionIntro.Heading>{content.riverFootstepsSection.heading}</SectionIntro.Heading>\n                  <SectionIntro.Link href=\"#\">{content.riverFootstepsSection.linkText}</SectionIntro.Link>\n                </SectionIntro>\n              </Grid.Column>\n              <Grid.Column span={{xsmall: 12, large: 7}}>\n                <Grid className={styles.riverFootstepsGrid}>\n                  {content.riverFootstepsSection.pillars.map((pillar, index) => (\n                    <Grid.Column key={pillar.heading} span={{xsmall: 12, medium: 6}}>\n                      <Pillar fullWidth>\n                        <Pillar.Image\n                          as=\"picture\"\n                          src={riverFootstepsMobileImages[index]}\n                          alt={pillar.imageAlt}\n                          sources={[{srcset: riverFootstepsImages[index], media: '(min-width: 48rem)'}]}\n                          className={styles.riverFootstepsImage}\n                        />\n                        <Pillar.Heading>{pillar.heading}</Pillar.Heading>\n                        <Pillar.Link href=\"#\">{pillar.linkText}</Pillar.Link>\n                      </Pillar>\n                    </Grid.Column>\n                  ))}\n                </Grid>\n              </Grid.Column>\n            </Grid>\n          </Box>\n        </Section>\n      </Box>\n\n      <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\">\n        <SectionIntro align=\"center\" fullWidth>\n          <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={styles.cardGridFrame} marginBlockEnd={80}>\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.resources.cards.map(card => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={styles.resourceCard}\n                  >\n                    {card.tag ? (\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                    ) : null}\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box\n        borderBlockStartWidth=\"thin\"\n        borderBlockEndWidth=\"thin\"\n        borderColor=\"muted\"\n        borderStyle=\"solid\"\n        marginBlockEnd=\"spacious\"\n      >\n        <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n          <CTABanner\n            leadingComponent={() => (\n              <Text>\n                <LockIcon size={64} />\n              </Text>\n            )}\n          >\n            <CTABanner.Heading>{content.cta.heading}</CTABanner.Heading>\n\n            <CTABanner.ButtonGroup>\n              <Button>{content.cta.primaryAction}</Button>\n              <Button>{content.cta.secondaryAction}</Button>\n            </CTABanner.ButtonGroup>\n          </CTABanner>\n        </Section>\n      </Box>\n      <Stack justifyContent=\"center\" padding=\"none\">\n        <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n          <Image src={brandDividerWide} alt=\"\" style={{display: 'block'}} />\n        </Box>\n      </Stack>\n      <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n        <RedlineBackground\n          style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n        />\n      </RedlineBackground>\n    </Box>\n  )\n}"
+      "source": "import {CodeOfConductIcon, CpuIcon, LightBulbIcon} from '@primer/octicons-react'\nimport {clsx} from 'clsx'\n\nimport {\n  Box,\n  Card,\n  Grid,\n  Hero,\n  Pillar,\n  LogoSuite,\n  Section,\n  SectionIntro,\n  Stack,\n  SubNav,\n  Image,\n  Token,\n  Testimonial,\n  CTABanner,\n  Button,\n  Text,\n} from '../../../..'\nimport {logos} from '../../../../LogoSuite/LogoSuite.fixtures'\nimport placeholderBg from '../../../../fixtures/images/security-banner-wide.png'\nimport placeholderImage from '../../../../fixtures/images/placeholder.png'\nimport monaAvatar from '../../../../fixtures/images/avatar-mona.png'\nimport brandDividerWide from '../../../../fixtures/images/brand-divider-security-wide.png'\nimport riverFootstepsChat from './fixtures/images/river-footsteps-chat.png'\nimport riverFootstepsChatMobile from './fixtures/images/river-footsteps-chat-mobile.png'\nimport riverFootstepsReview from './fixtures/images/river-footsteps-review.png'\nimport riverFootstepsReviewMobile from './fixtures/images/river-footsteps-review-mobile.png'\nimport riverFootstepsWorkflow from './fixtures/images/river-footsteps-workflow.png'\nimport riverFootstepsWorkflowMobile from './fixtures/images/river-footsteps-workflow-mobile.png'\n\nimport {\n  defaultFlexSuiteSecurityCategoryContent,\n  type FlexSuiteSecurityCategoryContent,\n} from './FlexSuiteSecurityCategory.content'\nimport styles from '../../Overview/FlexSuiteAIOverview.module.css'\nimport {RedlineBackground} from '../../../../component-helpers'\nimport {LockIcon} from '@primer/octovisuals-react'\n\nexport type FlexSuiteSecurityCategoryTemplateProps = {\n  content: FlexSuiteSecurityCategoryContent\n}\n\nconst cardIcons = [CpuIcon, LightBulbIcon, CodeOfConductIcon] as const\nconst riverFootstepsImages = [riverFootstepsWorkflow, riverFootstepsReview, riverFootstepsChat] as const\nconst riverFootstepsMobileImages = [\n  riverFootstepsWorkflowMobile,\n  riverFootstepsReviewMobile,\n  riverFootstepsChatMobile,\n] as const\n\nexport function FlexSuiteSecurityCategory() {\n  return <FlexSuiteSecurityCategoryTemplate content={defaultFlexSuiteSecurityCategoryContent} />\n}\n\nexport function FlexSuiteSecurityCategoryTemplate({content}: FlexSuiteSecurityCategoryTemplateProps) {\n  return (\n    <Box className={styles.page} backgroundColor=\"default\">\n      <Box backgroundColor=\"subtle\" style={{height: 72}} />\n\n      <SubNav>\n        <SubNav.Heading href=\"#\" aria-current=\"page\">\n          {content.subNav.heading}\n        </SubNav.Heading>\n\n        {content.subNav.links.map(link => (\n          <SubNav.Link key={link} href=\"#\">\n            {link}\n          </SubNav.Link>\n        ))}\n      </SubNav>\n\n      <Section paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\n        <Hero align=\"center\">\n          <Hero.Label>{content.hero.label}</Hero.Label>\n          <Hero.Heading>{content.hero.heading}</Hero.Heading>\n          <Hero.ButtonGroup>\n            <Button as=\"a\" href=\"#\" variant=\"primary\">\n              {content.hero.primaryAction}\n            </Button>\n            <Button as=\"a\" href=\"#\" variant=\"secondary\">\n              {content.hero.secondaryAction}\n            </Button>\n          </Hero.ButtonGroup>\n        </Hero>\n      </Section>\n      <Stack justifyContent=\"center\" padding=\"none\" style={{marginTop: 'calc(var(--base-size-64) * -1)'}}>\n        <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n          <Image src={placeholderBg} alt={content.common.heroImageAlt} style={{display: 'block', width: '100%'}} />\n        </Box>\n      </Stack>\n      <Box\n        className={clsx(styles.cardGridFrame)}\n        marginBlockStart={{narrow: 24, wide: 80}}\n        marginBlockEnd={{narrow: 24, wide: 64}}\n      >\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.highlights.map((card, index) => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={styles.resourceCard}\n                  >\n                    <Card.Icon icon={cardIcons[index]} color=\"green\" hasBackground size=\"medium\" />\n                    {card.tag ? (\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                    ) : null}\n                    <Card.Heading as=\"h2\">{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box borderBlockStartWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n        <LogoSuite variant=\"gridline-expressive\">\n          <LogoSuite.Heading visuallyHidden>{content.logoSuiteHeading}</LogoSuite.Heading>\n          <LogoSuite.Logobar marquee={process.env.NODE_ENV !== 'test'}>{logos.slice(0, 8)}</LogoSuite.Logobar>\n        </LogoSuite>\n      </Box>\n\n      <Section paddingBlockEnd=\"none\" paddingBlockStart=\"condensed\">\n        <SectionIntro align=\"center\">\n          <SectionIntro.Label>{content.workflow.label}</SectionIntro.Label>\n          <SectionIntro.Heading>{content.workflow.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={styles.cardGridFrame} marginBlockStart={48}>\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.capabilities.map(card => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 6}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={styles.resourceCard}\n                  >\n                    <Card.Image aspectRatio=\"16:10\" src={placeholderImage} alt=\"\" />\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"none\">\n        <SectionIntro align=\"center\" fullWidth>\n          <SectionIntro.Label>{content.customerStories.label}</SectionIntro.Label>\n          <SectionIntro.Heading>{content.customerStories.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={styles.cardGridFrame} marginBlockStart={48}>\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.customerStories.cards.map(card => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card href=\"#\" fullWidth ctaVariant=\"arrow\" className={styles.resourceCard}>\n                    {card.tag ? (\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                    ) : null}\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box\n        paddingInlineStart={48}\n        paddingInlineEnd={48}\n        borderBlockEndWidth=\"thin\"\n        borderColor=\"muted\"\n        borderStyle=\"solid\"\n      >\n        <Section>\n          <Testimonial variant=\"expressive\" size=\"large\">\n            <Testimonial.Quote>\n              {content.testimonial.quoteLead} <em>{content.testimonial.quoteEmphasis}</em>{' '}\n              {content.testimonial.quoteTrailing}\n            </Testimonial.Quote>\n            <Testimonial.Link href=\"#\">{content.testimonial.linkText}</Testimonial.Link>\n            <Testimonial.Avatar src={monaAvatar} alt={content.testimonial.avatarAlt} />\n            <Testimonial.Name position={content.testimonial.position}>{content.testimonial.name}</Testimonial.Name>\n          </Testimonial>\n        </Section>\n      </Box>\n\n      <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n        <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n          <Box\n            borderInlineStartWidth=\"thin\"\n            borderInlineEndWidth=\"thin\"\n            borderColor=\"muted\"\n            borderStyle=\"solid\"\n            padding={{narrow: 24, regular: 48, wide: 64}}\n          >\n            <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n              <Grid.Column span={{xsmall: 12, large: 5}}>\n                <SectionIntro>\n                  <SectionIntro.Heading>{content.riverFootstepsSection.heading}</SectionIntro.Heading>\n                  <SectionIntro.Link href=\"#\">{content.riverFootstepsSection.linkText}</SectionIntro.Link>\n                </SectionIntro>\n              </Grid.Column>\n              <Grid.Column span={{xsmall: 12, large: 7}}>\n                <Grid className={styles.riverFootstepsGrid}>\n                  {content.riverFootstepsSection.pillars.map((pillar, index) => (\n                    <Grid.Column key={pillar.heading} span={{xsmall: 12, medium: 6}}>\n                      <Pillar fullWidth>\n                        <Pillar.Image\n                          as=\"picture\"\n                          src={riverFootstepsMobileImages[index]}\n                          alt={pillar.imageAlt}\n                          sources={[{srcset: riverFootstepsImages[index], media: '(min-width: 48rem)'}]}\n                          className={styles.riverFootstepsImage}\n                        />\n                        <Pillar.Heading>{pillar.heading}</Pillar.Heading>\n                        <Pillar.Link href=\"#\">{pillar.linkText}</Pillar.Link>\n                      </Pillar>\n                    </Grid.Column>\n                  ))}\n                </Grid>\n              </Grid.Column>\n            </Grid>\n          </Box>\n        </Section>\n      </Box>\n\n      <Section paddingBlockStart=\"condensed\" paddingBlockEnd=\"condensed\">\n        <SectionIntro align=\"center\" fullWidth>\n          <SectionIntro.Heading>{content.resources.heading}</SectionIntro.Heading>\n        </SectionIntro>\n      </Section>\n\n      <Box className={styles.cardGridFrame} marginBlockEnd={80}>\n        <Box className={styles.cardGridContent}>\n          <Grid columnGap=\"none\" rowGap=\"none\" enableGutters={false}>\n            {content.resources.cards.map(card => (\n              <Grid.Column\n                key={card.heading}\n                span={{xsmall: 12, large: 4}}\n                className={clsx(styles.cardGridColumn, styles.cardGridColumnArrowHover)}\n              >\n                <Box className={styles.cardGridItem}>\n                  <Card\n                    href=\"#\"\n                    fullWidth\n                    ctaVariant=\"arrow\"\n                    ctaText={content.common.learnMore}\n                    className={styles.resourceCard}\n                  >\n                    {card.tag ? (\n                      <Card.Tokens>\n                        <Token>{card.tag}</Token>\n                      </Card.Tokens>\n                    ) : null}\n                    <Card.Heading>{card.heading}</Card.Heading>\n                    <Card.Description>{card.description}</Card.Description>\n                  </Card>\n                </Box>\n              </Grid.Column>\n            ))}\n          </Grid>\n        </Box>\n      </Box>\n\n      <Box\n        borderBlockStartWidth=\"thin\"\n        borderBlockEndWidth=\"thin\"\n        borderColor=\"muted\"\n        borderStyle=\"solid\"\n        marginBlockEnd=\"spacious\"\n      >\n        <Section paddingBlockEnd=\"none\" paddingBlockStart=\"none\">\n          <CTABanner\n            leadingComponent={() => (\n              <Text>\n                <LockIcon size={64} />\n              </Text>\n            )}\n          >\n            <CTABanner.Heading>{content.cta.heading}</CTABanner.Heading>\n\n            <CTABanner.ButtonGroup>\n              <Button>{content.cta.primaryAction}</Button>\n              <Button>{content.cta.secondaryAction}</Button>\n            </CTABanner.ButtonGroup>\n          </CTABanner>\n        </Section>\n      </Box>\n      <Stack justifyContent=\"center\" padding=\"none\">\n        <Box borderBlockEndWidth=\"thin\" borderColor=\"muted\" borderStyle=\"solid\">\n          <Image src={brandDividerWide} alt=\"\" style={{display: 'block'}} />\n        </Box>\n      </Stack>\n      <RedlineBackground style={{height: 600, display: 'flex', flexDirection: 'column', gap: 'var(--base-size-32)'}}>\n        <RedlineBackground\n          style={{height: 84, marginTop: 'auto', backgroundColor: 'var(--brand-color-border-default)'}}\n        />\n      </RedlineBackground>\n    </Box>\n  )\n}"
     }
   ]
 }

package/dist/tools/primer-brand-component/primer-brand-component.js

@@ -39,6 +39,8 @@ function describeComponent(component, ctx) {
     const example = component.examples.find(entry => entry.code);
     if (example?.code) {
         sections.push(`## Example\n\`\`\`tsx\n${example.code.trim()}\n\`\`\``);
+        if (example.styles)
+            sections.push(`## Example styles\n\`\`\`css\n${example.styles.trim()}\n\`\`\``);
     }
     sections.push(versionNote(ctx));
     return { text: sections.join('\n\n') };

package/dist/tools/primer-brand-component/primer-brand-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"primer-brand-component.js","sourceRoot":"","sources":["../../../src/tools/primer-brand-component/primer-brand-component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primer-brand-component.js","sourceRoot":"","sources":["../../../src/tools/primer-brand-component/primer-brand-component.ts"],"names":[],"mappings":"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"}

package/dist/tools/primer-brand-examples/primer-brand-examples.js

@@ -9,12 +9,21 @@ const inputSchema = z.object({
 });
 const description = `Get ranked, copy-and-adapt examples of correct Primer Brand usage for a goal. Page goals include a current-brand full-page recipe for overall composition, while independently ranked component examples provide goal-specific detail.
 Pass a target use-case like "pricing section", "category page", or "education landing page"; unmatched page types use the general overview recipe, while unmatched component goals use a foundational set.
-Examples are real source, so they may carry demo scaffolding (a \`content\` object, internal fixture imports, CSS-module class names, repo-relative imports, \`{...args}\` spreads) — mirror the composition and props, then rebuild with your own content and \`@primer/react-brand\` imports. Don't paste verbatim.`;
+Examples are real source, so they may carry demo scaffolding (a \`content\` object, internal fixture imports, CSS-module class names, repo-relative imports, \`{...args}\` spreads). Preserve the composition and gridline geometry; adapt the content, assets, and imports. When companion CSS is included, carry its frame and cell rules with the JSX.`;
 /** Foundational sections that anchor almost every GitHub landing page, in composition order. */
 const DEFAULT_COMPONENTS = ['Hero', 'SectionIntro', 'River', 'Pillar', 'CTABanner'];
 function exampleCode(component) {
     return component.examples.find(entry => entry.code)?.code?.trim();
 }
+function formatComponentExample(component) {
+    const example = component.examples.find(entry => entry.code);
+    if (!example?.code)
+        return '';
+    const sections = [`### ${component.name}\n\`\`\`tsx\n${example.code.trim()}\n\`\`\``];
+    if (example.styles)
+        sections.push(`\`\`\`css\n${example.styles.trim()}\n\`\`\``);
+    return sections.join('\n\n');
+}
 export const primerBrandExamplesTool = {
     name: 'primer_brand_examples',
     title: 'Primer Brand usage examples',
@@ -64,9 +73,7 @@ export const primerBrandExamplesTool = {
         const note = useDefault
             ? `No example matched "${goal}", so here is the default foundational set — compose these in order and adapt the copy and props to your theme.`
             : `Closest tested component examples for "${goal}". Adapt the copy and props to your theme; don't paste verbatim.`;
-        const componentExamples = shown
-            .map(component => `### ${component.name}\n\`\`\`tsx\n${exampleCode(component)}\n\`\`\``)
-            .join('\n\n');
+        const componentExamples = shown.map(formatComponentExample).join('\n\n');
         // For page-level goals, lead with the closest full-page recipe. It's the real source (single
         // source of truth in @primer/react-brand), so tell the agent to look past its demo scaffolding.
         const recipeSearchFields = (recipe) => [

package/dist/tools/primer-brand-examples/primer-brand-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"primer-brand-examples.js","sourceRoot":"","sources":["../../../src/tools/primer-brand-examples/primer-brand-examples.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primer-brand-examples.js","sourceRoot":"","sources":["../../../src/tools/primer-brand-examples/primer-brand-examples.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,CAAC,EAAC,MAAM,KAAK,CAAA;AAGrB,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAC,qBAAqB,EAAE,WAAW,EAAC,MAAM,cAAc,CAAA;AAG/D,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,CAAC;SACJ,MAAM,EAAE;SACR,QAAQ,EAAE;SACV,QAAQ,CACP,iHAAiH,CAClH;CACJ,CAAC,CAAA;AAIF,MAAM,WAAW,GAAG;;0VAEsU,CAAA;AAE1V,gGAAgG;AAChG,MAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAA;AAEnF,SAAS,WAAW,CAAC,SAA2B;IAC9C,OAAO,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AACnE,CAAC;AAED,SAAS,sBAAsB,CAAC,SAA2B;IACzD,MAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAC5D,IAAI,CAAC,OAAO,EAAE,IAAI;QAAE,OAAO,EAAE,CAAA;IAC7B,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,IAAI,gBAAgB,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;IACrF,IAAI,OAAO,CAAC,MAAM;QAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;IAChF,OAAO,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAsB;IACxD,IAAI,EAAE,uBAAuB;IAC7B,KAAK,EAAE,6BAA6B;IACpC,WAAW;IACX,UAAU,EAAE,WAAW,CAAC,KAAK;IAC7B,WAAW,EAAE,EAAC,YAAY,EAAE,IAAI,EAAC;IACjC,GAAG,CAAC,KAAK,EAAE,GAAG;QACZ,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,cAAc,CAAA;QACjD,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC;YAC/B,SAAS;YACT,UAAU;YACV,MAAM;YACN,SAAS;YACT,IAAI;YACJ,WAAW;YACX,MAAM;YACN,OAAO;YACP,SAAS;YACT,MAAM;YACN,UAAU;YACV,WAAW;YACX,SAAS;SACV,CAAC,CAAA;QACF,MAAM,cAAc,GAAG,IAAI;aACxB,WAAW,EAAE;aACb,KAAK,CAAC,KAAK,CAAC;aACZ,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,2BAA2B,EAAE,EAAE,CAAC,CAAC;aAC1D,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;aACnD,IAAI,CAAC,GAAG,CAAC,CAAA;QACZ,MAAM,UAAU,GACd,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE;YACnB,6FAA6F,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAE1G,mFAAmF;QACnF,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAA;QACvF,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,OAAO;gBACL,IAAI,EAAE,sGAAsG,WAAW,CACrH,GAAG,CACJ,EAAE;gBACH,OAAO,EAAE,IAAI;aACd,CAAA;QACH,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;aAC9F,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;aACX,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,CAAA;QACvC,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAC/G,CAAC,SAAS,EAAiC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CACjE,CAAA;QACD,gFAAgF;QAChF,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;QAEpG,MAAM,IAAI,GAAG,UAAU;YACrB,CAAC,CAAC,uBAAuB,IAAI,iHAAiH;YAC9I,CAAC,CAAC,0CAA0C,IAAI,kEAAkE,CAAA;QAEpH,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAExE,6FAA6F;QAC7F,gGAAgG;QAChG,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAY,EAAE,CAAC;YAC9D,MAAM,CAAC,IAAI;YACX,MAAM,CAAC,KAAK;YACZ,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;SAC1B,CAAA;QACD,MAAM,eAAe,GACnB,UAAU,IAAI,cAAc;YAC1B,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC;YACxF,CAAC,CAAC,EAAE,CAAA;QACR,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,qBAAqB,CAAC,CAAA;QAC/F,MAAM,gBAAgB,GAAG,UAAU,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO,CAAC,aAAa,CAAC,CAAA;QAC7F,MAAM,cAAc,GAClB,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QACzG,MAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;QAEnC,MAAM,QAAQ,GAAG,CAAC,mBAAmB,IAAI,GAAG,CAAC,CAAA;QAC7C,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;YAC5C,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM;gBAC9B,CAAC,CAAC,6CAA6C,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;gBACrG,CAAC,CAAC,EAAE,CAAA;YACN,QAAQ,CAAC,IAAI,CACX;gBACE,2BACE,gBAAgB,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,CAAC,4BAClE,KAAK,SAAS,CAAC,KAAK,EAAE;gBACtB,gaAAga,IAAI,EAAE;gBACta,cAAc,SAAS,CAAC,MAAM,UAAU;aACzC,CAAC,IAAI,CAAC,MAAM,CAAC,CACf,CAAA;QACH,CAAC;QACD,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,iBAAiB,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,CAAA;QACxD,OAAO,EAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAC,CAAA;IACtC,CAAC;CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-mcp",
-  "version": "0.72.0-rc.f8b72452",
+  "version": "0.72.1-rc.8a8dc720",
   "description": "MCP (Model Context Protocol) server that helps AI agents use Primer Brand (@primer/react-brand) correctly when building GitHub marketing and landing pages.",
   "keywords": [
     "primer",
@@ -46,6 +46,7 @@
     "format:fix": "prettier --write '**/*.{js,mjs,ts,json,md}'",
     "lint": "eslint '**/*.ts' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
+    "pretest": "npm run generate:catalog",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "inspect": "npm run build && npx @modelcontextprotocol/inspector node dist/index.js",
     "smoke": "npm run build && node scripts/smoke.mjs",