@primer/brand-mcp 0.72.0-rc.f8b72452 → 0.72.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/catalog.json +15 -9
  2. package/package.json +2 -1
package/dist/catalog.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "brandPackage": "@primer/react-brand",
3
- "generatedFromVersion": "0.72.0-rc.f8b72452",
4
- "generatedAt": "2026-07-27T13:43:02.039Z",
3
+ "generatedFromVersion": "0.72.0",
4
+ "generatedAt": "2026-07-28T20:19:12.832Z",
5
5
  "components": [
6
6
  {
7
7
  "name": "Hero",
@@ -9,6 +9,7 @@
9
9
  "subcomponents": [
10
10
  "Hero.Heading",
11
11
  "Hero.Description",
12
+ "Hero.ButtonGroup",
12
13
  "Hero.PrimaryAction",
13
14
  "Hero.SecondaryAction",
14
15
  "Hero.Image",
@@ -67,7 +68,7 @@
67
68
  "examples": [
68
69
  {
69
70
  "title": "Hero example",
70
- "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>",
71
+ "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>",
71
72
  "source": "story"
72
73
  }
73
74
  ],
@@ -282,7 +283,7 @@
282
283
  "props": [
283
284
  {
284
285
  "name": "children",
285
- "type": "PrimerBrandButtonType[] | PrimerBrandButtonType",
286
+ "type": "Array<PrimerBrandButtonType | PrimerBrandActionMenuType> | PrimerBrandButtonType | PrimerBrandActionMenuType",
286
287
  "required": true
287
288
  },
288
289
  {
@@ -6581,7 +6582,7 @@
6581
6582
  },
6582
6583
  {
6583
6584
  "name": "--brand-color-text-link-rest",
6584
- "value": "#005dd5",
6585
+ "value": "var(--base-color-scale-blue-6)",
6585
6586
  "group": "functional"
6586
6587
  },
6587
6588
  {
@@ -6646,7 +6647,7 @@
6646
6647
  },
6647
6648
  {
6648
6649
  "name": "--brand-color-canvas-muted",
6649
- "value": "#fafafa",
6650
+ "value": "#f9fbf9",
6650
6651
  "group": "functional"
6651
6652
  },
6652
6653
  {
@@ -8309,6 +8310,11 @@
8309
8310
  "value": "var(--base-size-40)",
8310
8311
  "group": "functional"
8311
8312
  },
8313
+ {
8314
+ "name": "--brand-River-variant-gridline-visual-padding",
8315
+ "value": "var(--base-size-32)",
8316
+ "group": "functional"
8317
+ },
8312
8318
  {
8313
8319
  "name": "--brand-River-spacing-outerBlock",
8314
8320
  "value": "var(--base-size-36)",
@@ -10032,7 +10038,7 @@
10032
10038
  "full page",
10033
10039
  "template"
10034
10040
  ],
10035
- "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}"
10041
+ "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}"
10036
10042
  },
10037
10043
  {
10038
10044
  "name": "FlexSuiteAIOverview",
@@ -10050,7 +10056,7 @@
10050
10056
  "full page",
10051
10057
  "template"
10052
10058
  ],
10053
- "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}"
10059
+ "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}"
10054
10060
  },
10055
10061
  {
10056
10062
  "name": "FlexSuiteSecurityCategory",
@@ -10067,7 +10073,7 @@
10067
10073
  "full page",
10068
10074
  "template"
10069
10075
  ],
10070
- "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}"
10076
+ "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}"
10071
10077
  }
10072
10078
  ]
10073
10079
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/brand-mcp",
3
- "version": "0.72.0-rc.f8b72452",
3
+ "version": "0.72.0",
4
4
  "description": "MCP (Model Context Protocol) server that helps AI agents use Primer Brand (@primer/react-brand) correctly when building GitHub marketing and landing pages.",
5
5
  "keywords": [
6
6
  "primer",
@@ -46,6 +46,7 @@
46
46
  "format:fix": "prettier --write '**/*.{js,mjs,ts,json,md}'",
47
47
  "lint": "eslint '**/*.ts' --max-warnings=0",
48
48
  "lint:fix": "npm run lint -- --fix",
49
+ "pretest": "npm run generate:catalog",
49
50
  "test": "NODE_OPTIONS=--experimental-vm-modules jest",
50
51
  "inspect": "npm run build && npx @modelcontextprotocol/inspector node dist/index.js",
51
52
  "smoke": "npm run build && node scripts/smoke.mjs",