@primer/brand-mcp 0.74.0 → 0.75.0-rc.89e3cadf

package/dist/brand/resolve-assets/resolve-assets.js

@@ -33,7 +33,7 @@ export function resolveInstalledAssets(fromDir = process.cwd()) {
     /** Collects exported PascalCase const names from a package's `.d.ts` type declarations. */
     const exportedNames = (packageDir) => {
         const names = new Set();
-        for (const subDir of ['dist', 'lib', '.']) {
+        for (const subDir of ['dist', 'dist/icons', 'lib', '.']) {
             let entries;
             try {
                 entries = readdirSync(join(packageDir, subDir));

package/dist/brand/resolve-assets/resolve-assets.js.map

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

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.89e3cadf",
+  "generatedAt": "2026-09-03T15:37:04.851Z",
   "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"
         }
       ],
@@ -583,6 +583,8 @@
       "name": "SubdomainNavBar",
       "module": "@primer/react-brand",
       "subcomponents": [
+        "SubdomainNavBar.openSearch",
+        "SubdomainNavBar.closeSearch",
         "SubdomainNavBar.Link",
         "SubdomainNavBar.Search",
         "SubdomainNavBar.PrimaryAction",
@@ -590,12 +592,6 @@
         "SubdomainNavBar.testIds"
       ],
       "props": [
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Forward a custom HTML class attribute",
-          "required": false
-        },
         {
           "name": "fixed",
           "type": "boolean",
@@ -608,10 +604,22 @@
           "description": "Fill the maximum width of the parent container. Defaults to `false`.",
           "required": false
         },
+        {
+          "name": "leadingComponent",
+          "type": "React.ReactElement",
+          "description": "Optional React element rendered after the navigation links.",
+          "required": false
+        },
+        {
+          "name": "trailingComponent",
+          "type": "React.ReactElement",
+          "description": "Optional React element rendered after the actions.",
+          "required": false
+        },
         {
           "name": "title",
           "type": "string",
-          "description": "The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.",
+          "description": "The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assistive technologies.",
           "required": true
         },
         {
@@ -625,9 +633,27 @@
           "type": "string",
           "description": "Optionally change the URL of the logo",
           "required": false
+        },
+        {
+          "name": "menuLabels",
+          "type": "Partial<SubdomainNavBarMenuLabels>",
+          "description": "Customizable visible and accessible menu labels.",
+          "required": false
+        },
+        {
+          "name": "skipToContentTargetId",
+          "type": "string",
+          "description": "ID of the element that receives focus when the skip-to-content link is activated. Defaults to the first rendered `main` element that is not hidden from assistive technologies.",
+          "required": false
+        }
+      ],
+      "examples": [
+        {
+          "title": "SubdomainNavBar example",
+          "code": "<SubdomainNavBar\n  title=\"Site title\"\n  titleHref=\"/\"\n  fullWidth\n  fixed={false}\n  leadingComponent={<Token>v1.5.3</Token>}\n  trailingComponent={\n    <ActionMenu size=\"small\" onSelect={setSelectedLanguage} selectionVariant=\"single\">\n      <ActionMenu.Button variant=\"secondary\" leadingVisual={<GlobeIcon />}>\n        {selectedLanguage}\n      </ActionMenu.Button>\n      <ActionMenu.Overlay aria-label=\"Select language\">\n        {['English', 'Deutsch', 'Español', 'Français', '日本語'].map(language => (\n          <ActionMenu.Item key={language} value={language} selected={language === selectedLanguage}>\n            {language}\n          </ActionMenu.Item>\n        ))}\n      </ActionMenu.Overlay>\n    </ActionMenu>\n  }\n>\n  <SubdomainNavBar.Link href=\"#default\">Default</SubdomainNavBar.Link>\n  <SubdomainNavBar.Link href=\"#hover\">Hover</SubdomainNavBar.Link>\n  <SubdomainNavBar.Link href=\"#focus\">Focus</SubdomainNavBar.Link>\n  <SubdomainNavBar.Link href=\"#active\">Active</SubdomainNavBar.Link>\n  <SubdomainNavBar.Link href=\"#current\" aria-current=\"page\">\n    Current\n  </SubdomainNavBar.Link>\n  <SubdomainNavBar.Search\n    placeholder=\"Search ...\"\n    keyboardShortcut=\"/\"\n    searchTerm=\"How do i\"\n    searchResults={groupedSearchResults}\n    onSubmit={event => event.preventDefault()}\n    onChange={() => undefined}\n  />\n  <SubdomainNavBar.SecondaryAction href=\"#\">Contact sales</SubdomainNavBar.SecondaryAction>\n  <SubdomainNavBar.PrimaryAction href=\"#\">Get started</SubdomainNavBar.PrimaryAction>\n</SubdomainNavBar>",
+          "source": "story"
         }
       ],
-      "examples": [],
       "description": "Use the subdomain nav bar component for top level navigation for subdomain sites.",
       "keywords": [
         "navigation",
@@ -3373,7 +3399,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
         },
         {
@@ -3456,12 +3488,12 @@
       "kind": "icon"
     },
     {
-      "name": "AlertIcon",
+      "name": "AlertFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "AlertFillIcon",
+      "name": "AlertIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3531,12 +3563,12 @@
       "kind": "icon"
     },
     {
-      "name": "BellIcon",
+      "name": "BellFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "BellFillIcon",
+      "name": "BellIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3566,27 +3598,27 @@
       "kind": "icon"
     },
     {
-      "name": "BookmarkIcon",
+      "name": "BookmarkFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "BookmarkFillIcon",
+      "name": "BookmarkFilledIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "BookmarkFilledIcon",
+      "name": "BookmarkIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "BookmarkSlashIcon",
+      "name": "BookmarkSlashFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "BookmarkSlashFillIcon",
+      "name": "BookmarkSlashIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3631,7 +3663,7 @@
       "kind": "icon"
     },
     {
-      "name": "CheckIcon",
+      "name": "CheckCircleFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3641,17 +3673,17 @@
       "kind": "icon"
     },
     {
-      "name": "CheckCircleFillIcon",
+      "name": "CheckIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "CheckboxIcon",
+      "name": "CheckboxFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "CheckboxFillIcon",
+      "name": "CheckboxIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3691,12 +3723,12 @@
       "kind": "icon"
     },
     {
-      "name": "ClockIcon",
+      "name": "ClockFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "ClockFillIcon",
+      "name": "ClockIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3731,12 +3763,12 @@
       "kind": "icon"
     },
     {
-      "name": "CodescanIcon",
+      "name": "CodescanCheckmarkIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "CodescanCheckmarkIcon",
+      "name": "CodescanIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3756,17 +3788,17 @@
       "kind": "icon"
     },
     {
-      "name": "CommentIcon",
+      "name": "CommentAiIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "CommentAiIcon",
+      "name": "CommentDiscussionIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "CommentDiscussionIcon",
+      "name": "CommentIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3786,12 +3818,12 @@
       "kind": "icon"
     },
     {
-      "name": "CopilotIcon",
+      "name": "CopilotErrorIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "CopilotErrorIcon",
+      "name": "CopilotIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3881,12 +3913,12 @@
       "kind": "icon"
     },
     {
-      "name": "DiffIcon",
+      "name": "DiffAddedIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "DiffAddedIcon",
+      "name": "DiffIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3926,12 +3958,12 @@
       "kind": "icon"
     },
     {
-      "name": "DotIcon",
+      "name": "DotFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "DotFillIcon",
+      "name": "DotIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -3956,12 +3988,12 @@
       "kind": "icon"
     },
     {
-      "name": "EyeIcon",
+      "name": "EyeClosedIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "EyeClosedIcon",
+      "name": "EyeIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4060,11 +4092,6 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
-    {
-      "name": "FileIcon",
-      "module": "@primer/octicons-react",
-      "kind": "icon"
-    },
     {
       "name": "FileAddedIcon",
       "module": "@primer/octicons-react",
@@ -4096,12 +4123,12 @@
       "kind": "icon"
     },
     {
-      "name": "FileDirectoryIcon",
+      "name": "FileDirectoryFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "FileDirectoryFillIcon",
+      "name": "FileDirectoryIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4115,6 +4142,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "FileIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "FileMediaIcon",
       "module": "@primer/octicons-react",
@@ -4160,6 +4192,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "FlagIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "FlameIcon",
       "module": "@primer/octicons-react",
@@ -4176,12 +4213,12 @@
       "kind": "icon"
     },
     {
-      "name": "FoldIcon",
+      "name": "FoldDownIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "FoldDownIcon",
+      "name": "FoldIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4201,12 +4238,12 @@
       "kind": "icon"
     },
     {
-      "name": "GitBranchIcon",
+      "name": "GitBranchCheckIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "GitBranchCheckIcon",
+      "name": "GitBranchIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4231,17 +4268,17 @@
       "kind": "icon"
     },
     {
-      "name": "GitPullRequestIcon",
+      "name": "GitPullRequestClosedIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "GitPullRequestClosedIcon",
+      "name": "GitPullRequestDraftIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "GitPullRequestDraftIcon",
+      "name": "GitPullRequestIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4266,17 +4303,22 @@
       "kind": "icon"
     },
     {
-      "name": "GraphIcon",
+      "name": "GraphBarHorizontalIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "GraphBarHorizontalIcon",
+      "name": "GraphBarVerticalIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "GraphBarVerticalIcon",
+      "name": "GraphIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
+    {
+      "name": "GraphStackedAreaIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4291,12 +4333,12 @@
       "kind": "icon"
     },
     {
-      "name": "HeartIcon",
+      "name": "HeartFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "HeartFillIcon",
+      "name": "HeartIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4306,12 +4348,12 @@
       "kind": "icon"
     },
     {
-      "name": "HomeIcon",
+      "name": "HomeFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "HomeFillIcon",
+      "name": "HomeIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4341,12 +4383,12 @@
       "kind": "icon"
     },
     {
-      "name": "InboxIcon",
+      "name": "InboxFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "InboxFillIcon",
+      "name": "InboxIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4380,6 +4422,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "IssueRelatesToIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "IssueReopenedIcon",
       "module": "@primer/octicons-react",
@@ -4411,12 +4458,12 @@
       "kind": "icon"
     },
     {
-      "name": "KeyIcon",
+      "name": "KeyAsteriskIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "KeyAsteriskIcon",
+      "name": "KeyIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4431,12 +4478,12 @@
       "kind": "icon"
     },
     {
-      "name": "LinkIcon",
+      "name": "LinkExternalIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "LinkExternalIcon",
+      "name": "LinkIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4581,12 +4628,12 @@
       "kind": "icon"
     },
     {
-      "name": "NoEntryIcon",
+      "name": "NoEntryFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "NoEntryFillIcon",
+      "name": "NoEntryIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4616,17 +4663,17 @@
       "kind": "icon"
     },
     {
-      "name": "PackageIcon",
+      "name": "PackageDependenciesIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "PackageDependenciesIcon",
+      "name": "PackageDependentsIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "PackageDependentsIcon",
+      "name": "PackageIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4661,12 +4708,12 @@
       "kind": "icon"
     },
     {
-      "name": "PencilIcon",
+      "name": "PencilAiIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "PencilAiIcon",
+      "name": "PencilIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4676,17 +4723,17 @@
       "kind": "icon"
     },
     {
-      "name": "PersonIcon",
+      "name": "PersonAddIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "PersonAddIcon",
+      "name": "PersonFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "PersonFillIcon",
+      "name": "PersonIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4715,13 +4762,18 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "PlusCircleIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "PlusIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "PlusCircleIcon",
+      "name": "ProjectCheckIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4750,6 +4802,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "QuestionBubbleIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "QuestionIcon",
       "module": "@primer/octicons-react",
@@ -4780,11 +4837,6 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
-    {
-      "name": "RepoIcon",
-      "module": "@primer/octicons-react",
-      "kind": "icon"
-    },
     {
       "name": "RepoCloneIcon",
       "module": "@primer/octicons-react",
@@ -4805,6 +4857,16 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "RepoForkedLockedIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
+    {
+      "name": "RepoIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "RepoLockedIcon",
       "module": "@primer/octicons-react",
@@ -4850,6 +4912,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "SandboxIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "ScreenFullIcon",
       "module": "@primer/octicons-react",
@@ -4871,22 +4938,22 @@
       "kind": "icon"
     },
     {
-      "name": "ShareIcon",
+      "name": "ShareAndroidIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "ShareAndroidIcon",
+      "name": "ShareIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "ShieldIcon",
+      "name": "ShieldCheckIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "ShieldCheckIcon",
+      "name": "ShieldIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4931,12 +4998,12 @@
       "kind": "icon"
     },
     {
-      "name": "SkipIcon",
+      "name": "SkipFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SkipFillIcon",
+      "name": "SkipIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -4946,22 +5013,22 @@
       "kind": "icon"
     },
     {
-      "name": "SmileyIcon",
+      "name": "SmileyFrownIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SmileyFrownIcon",
+      "name": "SmileyFrustratedIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SmileyFrustratedIcon",
+      "name": "SmileyGrinIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SmileyGrinIcon",
+      "name": "SmileyIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5001,12 +5068,12 @@
       "kind": "icon"
     },
     {
-      "name": "SparkleIcon",
+      "name": "SparkleFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SparkleFillIcon",
+      "name": "SparkleIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5026,17 +5093,17 @@
       "kind": "icon"
     },
     {
-      "name": "SquareIcon",
+      "name": "SquareCircleIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SquareCircleIcon",
+      "name": "SquareFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "SquareFillIcon",
+      "name": "SquareIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5045,13 +5112,23 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "StackAddIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
+    {
+      "name": "StackCheckIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "StackIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "StarIcon",
+      "name": "StackRemoveIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5060,6 +5137,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "StarIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "StopIcon",
       "module": "@primer/octicons-react",
@@ -5086,12 +5168,12 @@
       "kind": "icon"
     },
     {
-      "name": "TabIcon",
+      "name": "TabExternalIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "TabExternalIcon",
+      "name": "TabIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5111,12 +5193,12 @@
       "kind": "icon"
     },
     {
-      "name": "TelescopeIcon",
+      "name": "TelescopeFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
     {
-      "name": "TelescopeFillIcon",
+      "name": "TelescopeIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5250,6 +5332,11 @@
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
+    {
+      "name": "ViewFilesIcon",
+      "module": "@primer/octicons-react",
+      "kind": "icon"
+    },
     {
       "name": "VscodeIcon",
       "module": "@primer/octicons-react",
@@ -5271,7 +5358,7 @@
       "kind": "icon"
     },
     {
-      "name": "XIcon",
+      "name": "XCircleFillIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -5281,7 +5368,7 @@
       "kind": "icon"
     },
     {
-      "name": "XCircleFillIcon",
+      "name": "XIcon",
       "module": "@primer/octicons-react",
       "kind": "icon"
     },
@@ -8577,6 +8664,21 @@
       "value": "var(--brand-color-text-default)",
       "group": "functional"
     },
+    {
+      "name": "--brand-SubdomainNavBar-color-link-bgColor",
+      "value": "var(--base-color-scale-gray-1)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-SubdomainNavBar-searchDialog-shadowColor",
+      "value": "rgba(0, 0, 0, 0.1)",
+      "group": "functional"
+    },
+    {
+      "name": "--brand-SubdomainNavBar-searchDialog-backdropColor",
+      "value": "rgba(0, 0, 0, 0.2)",
+      "group": "functional"
+    },
     {
       "name": "--brand-SubdomainNavBar-border-nav-default",
       "value": "var(--base-color-scale-gray-9)",
@@ -8892,8 +8994,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 +10320,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 +10337,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.89e3cadf",
   "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",
@@ -54,12 +54,12 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.24.0",
-    "zod": "3.25.58"
+    "@modelcontextprotocol/sdk": "^1.30.0",
+    "zod": "3.25.76"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.16.6",
-    "@types/node": "24.12.0"
+    "@modelcontextprotocol/inspector": "^0.22.0",
+    "@types/node": "24.13.3"
   },
   "engines": {
     "node": ">=24.0.0 <25"