@primer/brand-mcp 0.74.0 → 0.75.0-rc.a3f7dbd6

package/dist/catalog.json

@@ -1,7 +1,7 @@
 {
   "brandPackage": "@primer/react-brand",
-  "generatedFromVersion": "0.74.0",
-  "generatedAt": "2026-08-26T14:41:49.838Z",
+  "generatedFromVersion": "0.75.0-rc.a3f7dbd6",
+  "generatedAt": "2026-09-02T13:29:39.528Z",
   "components": [
     {
       "name": "Hero",
@@ -66,7 +66,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.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>",
+          "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 animate initialText=\"Your AI assistant\">\n    Your AI accelerator\n  </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"
         }
       ],
@@ -3373,7 +3373,13 @@
         {
           "name": "animate",
           "type": "boolean",
-          "description": "Whether to animate the text reveal with a sliding wipe animation and a cursor that transitions from grey to green.",
+          "description": "Whether to animate the text with a typing effect.",
+          "required": false
+        },
+        {
+          "name": "initialText",
+          "type": "string",
+          "description": "Optional text to type before transitioning to the final text",
           "required": false
         },
         {
@@ -8892,8 +8898,23 @@
       "value": "var(--base-color-scale-green-7)",
       "group": "functional"
     },
+    {
+      "name": "--brand-TextCursorAnimation-cursor-animationDuration",
+      "value": "833ms",
+      "group": "functional"
+    },
     {
       "name": "--brand-TextCursorAnimation-cursor-color",
+      "value": "var(--base-color-scale-purple-5)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-TextCursorAnimation-cursor-deleteColor",
+      "value": "var(--base-color-scale-blue-4)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-TextCursorAnimation-cursor-finalColor",
       "value": "var(--base-color-scale-green-6)",
       "group": "functional"
     },
@@ -10203,7 +10224,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  Button,\n  Card,\n  ColorModesEnum,\n  CTABanner,\n  FAQ,\n  FAQGroup,\n  Grid,\n  Hero,\n  Heading,\n  InlineLink,\n  LogoSuite,\n  MinimalVideoPlayer,\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 heroAnimation from '../../../fixtures/videos/copilot-agent-mode-hero.mp4'\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            {process.env.NODE_ENV === 'test' ? (\n              <Hero.Image\n                enableBorder={false}\n                position=\"block-end\"\n                src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                alt={content.hero.imageAlt}\n              />\n            ) : (\n              <Hero.Video enableBorder={false} position=\"block-end\">\n                <MinimalVideoPlayer\n                  internalAccessibleLabels={content.hero.videoControls}\n                  poster={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                  src={heroAnimation}\n                  title={content.hero.imageAlt}\n                />\n              </Hero.Video>\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}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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  MinimalVideoPlayer,\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 heroAnimation from '../../../fixtures/videos/copilot-agent-mode-hero.mp4'\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 animate initialText={content.hero.initialLabel}>\n              {content.hero.label}\n            </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            {process.env.NODE_ENV === 'test' ? (\n              <Hero.Image\n                enableBorder={false}\n                position=\"block-end\"\n                src={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                alt={content.hero.imageAlt}\n              />\n            ) : (\n              <Hero.Video enableBorder={false} position=\"block-end\">\n                <MinimalVideoPlayer\n                  internalAccessibleLabels={content.hero.videoControls}\n                  poster={colorMode === ColorModesEnum.DARK ? renderUI3Dark : renderUI3}\n                  src={heroAnimation}\n                  title={content.hero.imageAlt}\n                />\n              </Hero.Video>\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}>\n                    <Card\n                      href=\"#\"\n                      fullWidth\n                      ctaVariant=\"arrow\"\n                      ctaText={content.common.learnMore}\n                      className={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\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",
@@ -10220,7 +10241,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.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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\n                  >\n                    <Card.Icon\n                      icon={cardIcons[index]}\n                      color=\"green\"\n                      hasBackground\n                      size=\"medium\"\n                      className={styles.resourceCardIcon}\n                    />\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      <Section className={styles.testimonialSection} paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\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\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: 20, 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 animate initialText={content.hero.initialLabel}>\n            {content.hero.label}\n          </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={clsx(styles.resourceCard, styles.resourceCardWithIcon)}\n                  >\n                    <Card.Icon\n                      icon={cardIcons[index]}\n                      color=\"green\"\n                      hasBackground\n                      size=\"medium\"\n                      className={styles.resourceCardIcon}\n                    />\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      <Section className={styles.testimonialSection} paddingBlockStart=\"none\" paddingBlockEnd=\"none\">\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\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: 20, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-mcp",
-  "version": "0.74.0",
+  "version": "0.75.0-rc.a3f7dbd6",
   "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",