@primer/brand-mcp 0.77.0-rc.d45b2bb1 → 0.77.0

package/dist/catalog.json

@@ -1,7 +1,7 @@
 {
   "brandPackage": "@primer/react-brand",
-  "generatedFromVersion": "0.77.0-rc.d45b2bb1",
-  "generatedAt": "2026-09-21T10:00:53.501Z",
+  "generatedFromVersion": "0.77.0",
+  "generatedAt": "2026-09-28T08:36:54.282Z",
   "components": [
     {
       "name": "Hero",
@@ -394,7 +394,7 @@
       "examples": [
         {
           "title": "River example",
-          "code": "<>\n  <River align=\"start\">\n    <River.Visual>\n      <PlaceholderImage />\n    </River.Visual>\n    <River.Content>\n      <Heading>\n        Work directly with your GitHub Issues via <InlineCode wrap={false}>/mcp</InlineCode> support\n      </Heading>\n      <Text>\n        Built on GitHub&apos;s native <InlineCode wrap={false}>/mcp</InlineCode> integration, Copilot can search\n        issues, analyze labels and activity, and summarize scope so you can move from backlog to implementation\n        without context hunting.\n      </Text>\n      <Link href=\"#\">Call to action</Link>\n    </River.Content>\n  </River>\n  <River align=\"end\">\n    <River.Visual>\n      <PlaceholderImage />\n    </River.Visual>\n    <River.Content>\n      <Heading>\n        Use any <InlineCode wrap={false}>/model</InlineCode> parallelize with{' '}\n        <InlineCode wrap={false}>/fleet</InlineCode>\n      </Heading>\n      <Text>\n        Use <InlineCode wrap={false}>/model</InlineCode> to switch, then <InlineCode wrap={false}>/fleet</InlineCode>{' '}\n        to execute in parallel or run multiple models at once.\n      </Text>\n      <Link href=\"#\">Call to action</Link>\n    </River.Content>\n  </River>\n  <River align=\"center\">\n    <River.Visual>\n      <PlaceholderImage />\n    </River.Visual>\n    <River.Content>\n      <Heading>\n        Use any <InlineCode wrap={false}>/model</InlineCode> parallelize with{' '}\n        <InlineCode wrap={false}>/fleet</InlineCode>\n      </Heading>\n      <Text>\n        Use <InlineCode wrap={false}>/model</InlineCode> to switch, then <InlineCode wrap={false}>/fleet</InlineCode>{' '}\n        to execute in parallel or run multiple models at once.\n      </Text>\n      <Link href=\"#\">Call to action</Link>\n    </River.Content>\n  </River>\n  <ThemeProvider colorMode=\"dark\">\n    <Box backgroundColor=\"default\">\n      <River align=\"start\">\n        <River.Visual>\n          <PlaceholderImage />\n        </River.Visual>\n        <River.Content>\n          <Heading>\n            Work directly with your GitHub Issues via <InlineCode wrap={false}>/mcp</InlineCode> support\n          </Heading>\n          <Text>\n            Built on GitHub&apos;s native <InlineCode wrap={false}>/mcp</InlineCode> integration, Copilot can search\n            issues, analyze labels and activity, and summarize scope.\n          </Text>\n          <Link href=\"#\">Call to action</Link>\n        </River.Content>\n      </River>\n    </Box>\n  </ThemeProvider>\n</>",
+          "code": "<Section>\n  <Stack padding=\"none\">\n    <River variant=\"gridline\" align=\"start\">\n      <River.Visual\n        style={{\n          backgroundImage: `url(${placeholderBg})`,\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n      >\n        <picture>\n          <source srcSet={placeholderImageCropped} media=\"(max-width: 47.99rem)\" />\n          <img src={placeholderImage} alt=\"GitHub Copilot agent mode in VS Code\" />\n        </picture>\n      </River.Visual>\n      <River.Content>\n        <EyebrowText>Feature</EyebrowText>\n        <Heading>GridLine with custom background</Heading>\n        <Text>\n          The gridline variant creates a full-bleed visual container that can be enhanced with a custom animated\n          background using the ref prop on River.Visual.\n        </Text>\n        <Link href=\"#\">Learn more</Link>\n      </River.Content>\n    </River>\n    <River variant=\"gridline\" align=\"start\">\n      <River.Visual\n        style={{\n          backgroundImage: `url(${placeholderBg})`,\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n      >\n        <picture>\n          <source srcSet={placeholderImageCropped} media=\"(max-width: 47.99rem)\" />\n          <img src={placeholderImage} alt=\"GitHub Copilot agent mode in VS Code\" />\n        </picture>\n      </River.Visual>\n      <River.Content>\n        <EyebrowText>Feature</EyebrowText>\n        <Heading>GridLine with custom background</Heading>\n        <Text>\n          The gridline variant creates a full-bleed visual container that can be enhanced with a custom animated\n          background using the ref prop on River.Visual.\n        </Text>\n        <Link href=\"#\">Learn more</Link>\n      </River.Content>\n    </River>\n  </Stack>\n</Section>",
           "source": "story"
         }
       ],
@@ -2996,6 +2996,12 @@
           "description": "The HTML element used to render the section.",
           "required": false
         },
+        {
+          "name": "variant",
+          "type": "SectionVariant",
+          "description": "The visual variant of the section.",
+          "required": false
+        },
         {
           "name": "paddingBlockStart",
           "type": "PaddingVariants | ResponsivePaddingVariantsMap",
@@ -3041,7 +3047,7 @@
         {
           "name": "rounded",
           "type": "boolean",
-          "description": "Adds rounded corners to the top of the section.",
+          "description": "Adds rounded corners to the top of the section. Not supported with the `gridline` variant.",
           "required": false
         },
         {
@@ -3054,7 +3060,7 @@
       "examples": [
         {
           "title": "Section example",
-          "code": "<>\n  <Section backgroundColor=\"subtle\">\n    <SectionIntro align=\"center\">\n      <SectionIntro.Heading size=\"2\">A section with a predefined background color</SectionIntro.Heading>\n    </SectionIntro>\n  </Section>\n</>",
+          "code": "<Stack direction=\"vertical\" padding=\"none\">\n  <Section variant=\"gridline\">\n    <SectionIntro>\n      <SectionIntro.Heading>Gridline section</SectionIntro.Heading>\n      <SectionIntro.Description>\n        Gridlines span the section and the content area gains responsive lateral padding.\n      </SectionIntro.Description>\n    </SectionIntro>\n  </Section>\n  <Section variant=\"gridline\">\n    <SectionIntro>\n      <SectionIntro.Heading>Another gridline section</SectionIntro.Heading>\n    </SectionIntro>\n  </Section>\n</Stack>",
           "source": "story"
         }
       ],
@@ -8589,6 +8595,11 @@
       "value": "var(--brand-color-canvas-default)",
       "group": "functional"
     },
+    {
+      "name": "--brand-Section-variant-gridline-paddingInline",
+      "value": "var(--base-size-20)",
+      "group": "functional"
+    },
     {
       "name": "--brand-Section-container-maxWidth",
       "value": "80rem",

package/package.json

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