@nationaldesignstudio/react 0.0.10 → 0.0.12

package/dist/component-registry.md

@@ -0,0 +1,2405 @@
+# Component Registry
+
+> Auto-generated component metadata for AI/agent consumption.
+> Generated: 2026-01-08T20:44:48.781Z
+
+---
+
+## Design Tokens & Styling Guide
+
+> Tokens loaded via `@nds-design-system/react/tokens.css`. The `@theme` directive in Tailwind v4 registers CSS variables as utility classes.
+
+### Colors
+
+Colors are registered directly as utilities (no `color-` prefix needed).
+
+```tsx
+// Background colors
+className="bg-indigo-900"
+className="bg-gray-100"
+
+// Text colors
+className="text-gray-800"
+className="text-indigo-900"
+
+// Border colors
+className="border-indigo-600"
+className="border-b-gray-200"
+
+// Alpha colors for overlays
+className="bg-alpha-black-50"
+className="text-alpha-white-90"
+```
+
+**Available palettes:** `alpha-black`, `alpha-white`, `amber`, `black`, `blue`, `brown`, `cyan`, `ember`, `gray`, `green`, `ice`, `indigo`, `iris`, `lime`, `orange`, `pink`, `purple`, `red`, `sage`, `steel`, `teal`, `white`, `yellow`
+
+### Spacing
+
+Spacing tokens use the `spacing-` prefix with utility classes.
+
+```tsx
+// Padding - use single p- when all sides are the same
+className="p-spacing-32"      // 32px all sides (PREFERRED)
+className="px-spacing-24"     // 24px horizontal
+className="py-spacing-64"     // 64px vertical
+
+// Gap
+className="gap-spacing-24"    // 24px gap
+
+// Margin
+className="m-spacing-16"      // 16px margin
+
+// Width/Height
+className="w-spacing-48"      // 48px width
+className="h-spacing-64"      // 64px height
+```
+
+**Available sizes:** 0, 2, 4, 6, 8, 10, 11, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320, 352, 384, 400
+
+### Typography
+
+Use pre-defined typography classes for consistent styling. Uses `typography-` prefix (not `text-`) to avoid conflicts with color utilities.
+
+**Pattern:** `typography-{namespace}-{category}-{size}[-weight]`
+
+**Namespaces:**
+- `brand-small` - Mobile breakpoints
+- `brand-medium` - Tablet breakpoints (most common)
+- `brand-large` - Desktop breakpoints
+
+```tsx
+// Brand typography (medium breakpoint - most common)
+className="typography-brand-medium-display-small"
+className="typography-brand-medium-headline-large"
+className="typography-brand-medium-body-medium"
+className="typography-brand-medium-caption-small"
+
+// With weight variants
+className="typography-brand-medium-headline-large-regular"
+className="typography-brand-medium-headline-large-semibold"
+```
+
+**Categories:**
+
+
+**Individual typography tokens** (for custom combinations):
+
+```tsx
+className="text-72"              // Font size 72px
+className="leading-72"           // Line height
+className="tracking-72"          // Letter spacing
+className="font-pp-neue-montreal"// Font family
+className="font-medium"          // Font weight 500
+className="font-semibold"        // Font weight 600
+```
+
+### Figma to Tailwind Mapping
+
+| Figma CSS Variable | Tailwind Equivalent |
+|-------------------|---------------------|
+| `var(--spacing/24,24px)` | `p-spacing-24` or `gap-spacing-24` |
+| `var(--font-size/64,64px)` | `text-64` |
+| `var(--color/indigo/900,#...)` | `bg-indigo-900` or `text-indigo-900` |
+| `var(--global/line-height/16,24px)` | `leading-16` |
+
+**Figma Auto Layout to Flexbox:**
+
+| Figma Property | Tailwind Class |
+|----------------|----------------|
+| Direction: Vertical | `flex flex-col` |
+| Direction: Horizontal | `flex` |
+| Gap | `gap-spacing-{N}` |
+| Align items: Center | `items-center` |
+| Justify: Space between | `justify-between` |
+
+### Debugging Tips
+
+1. **Colors not applying?** Use direct names like `bg-indigo-900` (no `color-` prefix)
+2. **Spacing not working?** Use `spacing-` prefix: `gap-spacing-24` (not `gap-24`)
+3. **Typography off?** Use composite classes `typography-brand-medium-headline-large`
+4. **Non-token values?** Use arbitrary values: `gap-[10px]`, `py-[18px]`
+5. **Width/Height with tokens?** Use `h-spacing-{size}` and `w-spacing-{size}`
+
+---
+
+## Action
+
+### Button
+
+**Import:** `import { Button } from "@nationaldesignstudio/react";`
+
+**Category:** Action
+
+**Props:**
+
+- `theme`: ButtonTheme
+  Theme overrides for button styling via CSS custom properties
+
+**Examples:**
+
+```tsx
+<Button {...args}>Button</Button>
+```
+
+```tsx
+<Button variant="primary">Primary</Button>
+```
+
+```tsx
+<Button variant="primaryOutline">Primary Outline</Button>
+```
+
+```tsx
+<Button variant="secondary">Secondary</Button>
+```
+
+```tsx
+<Button variant="charcoal">Charcoal</Button>
+```
+
+```tsx
+<Button variant="charcoalOutline">Charcoal Outline</Button>
+```
+
+```tsx
+<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>
+```
+
+```tsx
+<Button variant="ivory">Ivory</Button>
+```
+
+```tsx
+<Button variant="ivoryOutline">Ivory Outline</Button>
+```
+
+```tsx
+<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+```
+
+```tsx
+<Button variant="gray">Gray</Button>
+```
+
+```tsx
+<Button size="sm">Small</Button>
+```
+
+```tsx
+<Button size="default">Medium</Button>
+```
+
+```tsx
+<Button size="lg">Large</Button>
+```
+
+```tsx
+<Button disabled>Disabled</Button>
+```
+
+
+## Display
+
+### Card
+
+**Import:** `import { Card } from "@nationaldesignstudio/react";`
+
+**Category:** Display
+
+**Examples:**
+
+```tsx
+<div className="w-[418px]">
+      <Card>
+        <CardImage />
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Optional Eyebrow</CardEyebrow>
+            <div className="flex flex-col gap-[6px]">
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>
+                Use cards when citizens need to scan items at a glance, either
+                to jump to a more detailed page or absorb short information.
+              </CardDescription>
+            </div>
+          </CardBody>
+          <CardActions>
+            <Button size="default" variant="charcoal">
+              Primary
+            </Button>
+            <Button size="default" variant="charcoalOutline">
+              Secondary
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[418px]">
+      <Card layout="vertical">
+        <CardImage />
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Optional Eyebrow</CardEyebrow>
+            <div className="flex flex-col gap-[6px]">
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>
+                Use cards when citizens need to scan items at a glance, either
+                to jump to a more detailed page or absorb short information.
+              </CardDescription>
+            </div>
+          </CardBody>
+          <CardActions>
+            <Button size="default" variant="charcoal">
+              Primary
+            </Button>
+            <Button size="default" variant="charcoalOutline">
+              Secondary
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[700px]">
+      <Card layout="horizontal">
+        <CardImage />
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Eyebrow</CardEyebrow>
+            <div className="flex flex-col gap-[9px]">
+              <CardTitle>
+                Cards can support multi line headings easily.
+              </CardTitle>
+              <CardDescription>
+                Use cards when citizens need to scan items at a glance, either
+                to jump to a more detailed page or absorb short information.
+              </CardDescription>
+            </div>
+          </CardBody>
+          <CardActions>
+            <Button size="sm" variant="charcoal">
+              Primary
+            </Button>
+            <Button size="sm" variant="charcoalOutline">
+              Secondary
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[418px]">
+      <Card>
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Category</CardEyebrow>
+            <div className="flex flex-col gap-[6px]">
+              <CardTitle>Card Without Image</CardTitle>
+              <CardDescription>
+                Cards can be used without images for text-focused content.
+              </CardDescription>
+            </div>
+          </CardBody>
+          <CardActions>
+            <Button size="default" variant="charcoal">
+              Learn More
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[418px]">
+      <Card>
+        <CardImage />
+        <CardContent>
+          <CardBody>
+            <div className="flex flex-col gap-[6px]">
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>
+                The eyebrow is optional and can be omitted when not needed.
+              </CardDescription>
+            </div>
+          </CardBody>
+          <CardActions>
+            <Button size="default" variant="charcoal">
+              Primary
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[418px]">
+      <Card>
+        <CardImage />
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Information</CardEyebrow>
+            <div className="flex flex-col gap-[6px]">
+              <CardTitle>Informational Card</CardTitle>
+              <CardDescription>
+                Cards without actions can be used for purely informational
+                content that doesn't require user interaction.
+              </CardDescription>
+            </div>
+          </CardBody>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="w-[418px]">
+      <Card>
+        <CardContent>
+          <CardBody>
+            <CardTitle>Minimal Card</CardTitle>
+            <CardDescription>
+              A minimal card with just title and description.
+            </CardDescription>
+          </CardBody>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+```tsx
+<div className="grid max-w-[900px] grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {[1, 2, 3].map((i) => (
+        <Card key={i}>
+          <CardImage />
+          <CardContent>
+            <CardBody>
+              <CardEyebrow>Category {i}</CardEyebrow>
+              <div className="flex flex-col gap-[6px]">
+                <CardTitle>Card Title {i}</CardTitle>
+                <CardDescription>
+                  Brief description of the card content goes here.
+                </CardDescription>
+              </div>
+            </CardBody>
+            <CardActions>
+              <Button size="sm" variant="charcoal">
+                Action
+              </Button>
+            </CardActions>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+```
+
+```tsx
+<div className="w-[418px]">
+      <Card {...args}>
+        <CardImage />
+        <CardContent>
+          <CardBody>
+            <CardEyebrow>Eyebrow</CardEyebrow>
+            <div className="flex flex-col gap-[6px]">
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>
+                Use cards when citizens need to scan items at a glance.
+              </CardDescription>
+            </div>
+          </CardBody>
+          <CardActions>
+            <Button size="default" variant="charcoal">
+              Primary
+            </Button>
+            <Button size="default" variant="charcoalOutline">
+              Secondary
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </div>
+```
+
+
+### Hero
+
+**Import:** `import { Hero } from "@nationaldesignstudio/react";`
+
+**Category:** Display
+
+**Props:**
+
+- `title`: string (required)
+  The title text displayed in the hero
+- `titleClassName`: string
+  Custom typography class for the title using primitive tokens.
+- `background`: React.ReactNode | string
+  Background for the hero. Can be:
+- `overlayOpacity`: number
+  Opacity of the overlay (0-1, default: 0)
+- `overlayColor`: string
+  Color of the overlay (default: "black")
+- `theme`: ComponentTheme
+  Theme overrides for component styling via CSS custom properties
+
+**Examples:**
+
+```tsx
+<Hero {...args} />
+```
+
+```tsx
+<Hero variant="A1" title="Hero A1" />
+```
+
+```tsx
+<Hero variant="A2" title="Hero A2" />
+```
+
+```tsx
+<Hero variant="A3" title="Hero A3" />
+```
+
+```tsx
+<Hero variant="A1" title="Color Background" background="#2563eb" />
+```
+
+```tsx
+<Hero
+      variant="A1"
+      title="Image Background"
+      background={
+        <HeroBackground.Image
+          src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
+          position="center"
+          alt="Earth from space"
+        />
+      }
+      overlayOpacity={0.4}
+    />
+```
+
+```tsx
+<Hero
+      variant="A1"
+      title="Video Background"
+      background={
+        <HeroBackground.Video
+          src="https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
+          poster="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
+        />
+      }
+      overlayOpacity={0.3}
+    />
+```
+
+```tsx
+<Hero
+      variant="A1"
+      title="Stream Background"
+      background={
+        <HeroBackground.Stream
+          videoId="5d5bc37ffcf54c9b82e996823bffbb81"
+          muted
+          autoplay
+          loop
+        />
+      }
+      overlayOpacity={0.4}
+    />
+```
+
+```tsx
+<Hero variant="A1" title="Hero A1" />
+```
+
+```tsx
+<Hero variant="A1" title="Hero A1" />
+```
+
+```tsx
+<Hero variant="A1" title="Hero A1" />
+```
+
+```tsx
+<Hero variant="A2" title="Hero A2" />
+```
+
+```tsx
+<Hero variant="A2" title="Hero A2" />
+```
+
+```tsx
+<Hero variant="A2" title="Hero A2" />
+```
+
+```tsx
+<Hero variant="A3" title="Hero A3" />
+```
+
+```tsx
+<Hero variant="A3" title="Hero A3" />
+```
+
+```tsx
+<Hero variant="A3" title="Hero A3" />
+```
+
+```tsx
+<Hero title="A Much Longer Hero Title That Wraps" />
+```
+
+```tsx
+<Hero title="Custom Background" className="bg-blue-600" />
+```
+
+```tsx
+<Hero
+      variant="A3"
+      title="High Contrast"
+      background={
+        <HeroBackground.Image
+          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&q=80"
+          position="center bottom"
+        />
+      }
+      overlayOpacity={0.7}
+      overlayColor="#000000"
+    />
+```
+
+```tsx
+<Hero
+      variant="A1"
+      title="Tinted Overlay"
+      background={
+        <HeroBackground.Image
+          src="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1920&q=80"
+          position="center"
+        />
+      }
+      overlayOpacity={0.5}
+      overlayColor="#1e3a5f"
+    />
+```
+
+
+### UsGovBanner
+
+**Import:** `import { UsGovBanner } from "@nationaldesignstudio/react";`
+
+**Category:** Display
+
+**Props:**
+
+- `flagIcon`: React.ReactNode
+  Custom flag icon element. Defaults to a US flag SVG.
+- `text`: string
+  "An official website of the United States government"
+
+**Examples:**
+
+```tsx
+<USGovBanner />
+```
+
+```tsx
+<USGovBanner text="An official website of the U.S. Department of State" />
+```
+
+```tsx
+<USGovBanner {...args} />
+```
+
+
+## Navigation
+
+### Navbar
+
+**Import:** `import { Navbar } from "@nationaldesignstudio/react";`
+
+**Category:** Navigation
+
+**Examples:**
+
+```tsx
+<Navbar>
+      <NavbarBrand>
+        <BrandPlaceholder />
+      </NavbarBrand>
+      <NavbarLinks>
+        <NavbarLink href="#">Link</NavbarLink>
+        <NavbarLink href="#">Link</NavbarLink>
+        <NavbarLink href="#">Link</NavbarLink>
+        <NavbarLink href="#">Link</NavbarLink>
+        <NavbarLink href="#">Link</NavbarLink>
+        <NavbarLink href="#">Link</NavbarLink>
+        <NavbarLink href="#">Link</NavbarLink>
+      </NavbarLinks>
+      <NavbarActions>
+        <IconButton variant="ghost" size="lg" aria-label="Search">
+          <SearchIcon />
+        </IconButton>
+      </NavbarActions>
+    </Navbar>
+```
+
+```tsx
+<div className="flex w-full flex-col">
+      <USGovBanner />
+      <Navbar>
+        <NavbarBrand>
+          <BrandPlaceholder />
+        </NavbarBrand>
+        <NavbarLinks>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+        </NavbarLinks>
+        <NavbarActions>
+          <IconButton variant="ivoryOutlineQuiet" size="lg" aria-label="Search">
+            <SearchIcon />
+          </IconButton>
+        </NavbarActions>
+      </Navbar>
+    </div>
+```
+
+```tsx
+<div className="flex w-full flex-col">
+      <USGovBanner />
+      <Navbar>
+        <NavbarBrand>
+          <BrandPlaceholder />
+        </NavbarBrand>
+        <NavbarLinks>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+        </NavbarLinks>
+        <NavbarActions>
+          <IconButton variant="ivoryOutlineQuiet" size="lg" aria-label="Search">
+            <SearchIcon />
+          </IconButton>
+        </NavbarActions>
+      </Navbar>
+    </div>
+```
+
+```tsx
+<div className="flex w-full flex-col">
+      <USGovBanner />
+      <Navbar>
+        <NavbarBrand>
+          <BrandPlaceholder />
+        </NavbarBrand>
+        <NavbarLinks>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+        </NavbarLinks>
+        <NavbarActions>
+          <IconButton variant="ghost" size="default" aria-label="Search">
+            <SearchIcon />
+          </IconButton>
+        </NavbarActions>
+      </Navbar>
+    </div>
+```
+
+```tsx
+<div className="flex w-full flex-col">
+      <USGovBanner />
+      <Navbar>
+        <NavbarBrand>
+          <div className="size-[26px] rounded-radius-8 bg-gray-300" />
+        </NavbarBrand>
+        <NavbarLinks>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+          <NavbarLink href="#">Link</NavbarLink>
+        </NavbarLinks>
+        <NavbarActions>
+          <NavbarMobileMenuButton asChild>
+            <IconButton variant="ghost" size="default" aria-label="Menu">
+              <MenuIcon />
+            </IconButton>
+          </NavbarMobileMenuButton>
+        </NavbarActions>
+        <NavbarMobileMenu>
+          <NavbarMobileMenuLink href="#">Home</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">About</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Services</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Resources</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">News</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Careers</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Contact</NavbarMobileMenuLink>
+        </NavbarMobileMenu>
+      </Navbar>
+    </div>
+```
+
+```tsx
+<Navbar>
+      <NavbarBrand>
+        <BrandPlaceholder />
+      </NavbarBrand>
+      <NavbarLinks>
+        <NavbarLink href="#" active>
+          Home
+        </NavbarLink>
+        <NavbarLink href="#">About</NavbarLink>
+        <NavbarLink href="#">Services</NavbarLink>
+        <NavbarLink href="#">Contact</NavbarLink>
+      </NavbarLinks>
+      <NavbarActions>
+        <IconButton variant="ghost" size="lg" aria-label="Search">
+          <SearchIcon />
+        </IconButton>
+      </NavbarActions>
+    </Navbar>
+```
+
+```tsx
+<div className="flex w-full flex-col">
+      <USGovBanner />
+      <Navbar>
+        <NavbarBrand>
+          <BrandPlaceholder />
+        </NavbarBrand>
+        <NavbarLinks>
+          <NavbarLink href="#" active>
+            Home
+          </NavbarLink>
+          <NavbarLink href="#">About</NavbarLink>
+          <NavbarLink href="#">Services</NavbarLink>
+          <NavbarLink href="#">Resources</NavbarLink>
+          <NavbarLink href="#">Contact</NavbarLink>
+        </NavbarLinks>
+        <NavbarActions>
+          <IconButton
+            variant="ghost"
+            size="lg"
+            aria-label="Search"
+            className="hidden md:flex"
+          >
+            <SearchIcon />
+          </IconButton>
+          <NavbarMobileMenuButton asChild>
+            <IconButton variant="ghost" size="default" aria-label="Menu">
+              <MenuIcon />
+            </IconButton>
+          </NavbarMobileMenuButton>
+        </NavbarActions>
+        <NavbarMobileMenu>
+          <NavbarMobileMenuLink href="#" active>
+            Home
+          </NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">About</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Services</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Resources</NavbarMobileMenuLink>
+          <NavbarMobileMenuLink href="#">Contact</NavbarMobileMenuLink>
+        </NavbarMobileMenu>
+      </Navbar>
+    </div>
+```
+
+
+## Other
+
+### Accordion
+
+**Import:** `import { Accordion } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `allowMultiple`: boolean
+  false
+- `defaultExpanded`: string | string[]
+  The ID(s) of items that should be expanded by default
+- `children`: React.ReactNode (required)
+
+**Examples:**
+
+```tsx
+<Accordion {...args}>
+      <AccordionItem
+        id="item-1"
+        title="What is the US Tech Force (Tech Force)?"
+      >
+        Tech Force will be an elite group of ~1,000 technology specialists hired
+        by agencies to accelerate artificial intelligence (AI) implementation
+        and solve the federal government's most critical technological
+        challenges.
+      </AccordionItem>
+      <AccordionItem
+        id="item-2"
+        title="What are the key steps in the recruiting process?"
+      >
+        The recruiting process includes an initial application, technical
+        assessment, interviews with agency leadership, and a background check.
+        Selected candidates will receive an offer within 4-6 weeks of completing
+        all steps.
+      </AccordionItem>
+      <AccordionItem id="item-3" title="What skills are required?">
+        We're looking for expertise in software engineering, artificial
+        intelligence, cybersecurity, data analytics, or technical project
+        management. Strong problem-solving abilities and a passion for public
+        service are essential.
+      </AccordionItem>
+    </Accordion>
+```
+
+```tsx
+<Accordion defaultExpanded="item-1">
+      <AccordionItem
+        id="item-1"
+        title="What is the US Tech Force (Tech Force)?"
+      >
+        Tech Force will be an elite group of ~1,000 technology specialists hired
+        by agencies to accelerate artificial intelligence (AI) implementation
+        and solve the federal government's most critical technological
+        challenges. Tech Force will primarily recruit early-career technologists
+        from traditional recruiting channels, along with experienced engineering
+        managers from private sector partners, to serve two-year employment
+        terms in the federal government.
+      </AccordionItem>
+      <AccordionItem
+        id="item-2"
+        title="What are the key steps in the recruiting process?"
+      >
+        The recruiting process includes an initial application, technical
+        assessment, interviews with agency leadership, and a background check.
+      </AccordionItem>
+      <AccordionItem id="item-3" title="What skills are required?">
+        We're looking for expertise in software engineering, AI, cybersecurity,
+        data analytics, or technical project management.
+      </AccordionItem>
+    </Accordion>
+```
+
+```tsx
+<Accordion allowMultiple defaultExpanded={["item-1", "item-2"]}>
+      <AccordionItem
+        id="item-1"
+        title="What is the US Tech Force (Tech Force)?"
+      >
+        Tech Force will be an elite group of ~1,000 technology specialists hired
+        by agencies to accelerate artificial intelligence (AI) implementation
+        and solve the federal government's most critical technological
+        challenges.
+      </AccordionItem>
+      <AccordionItem
+        id="item-2"
+        title="What are the key steps in the recruiting process?"
+      >
+        The recruiting process includes an initial application, technical
+        assessment, interviews with agency leadership, and a background check.
+      </AccordionItem>
+      <AccordionItem id="item-3" title="What skills are required?">
+        We're looking for expertise in software engineering, AI, cybersecurity,
+        data analytics, or technical project management.
+      </AccordionItem>
+    </Accordion>
+```
+
+```tsx
+<Accordion>
+      <AccordionItem
+        id="item-1"
+        title="What is the US Tech Force (Tech Force)?"
+      >
+        Tech Force will be an elite group of ~1,000 technology specialists.
+      </AccordionItem>
+      <AccordionItem
+        id="item-2"
+        title="What are the key steps in the recruiting process?"
+      >
+        The recruiting process includes an initial application and interviews.
+      </AccordionItem>
+      <AccordionItem id="item-3" title="What skills are required?">
+        Software engineering, AI, cybersecurity, data analytics.
+      </AccordionItem>
+    </Accordion>
+```
+
+```tsx
+<Accordion defaultExpanded="faq-1">
+      <AccordionItem id="faq-1" title="What is the US Tech Force (Tech Force)?">
+        Tech Force will be an elite group of ~1,000 technology specialists hired
+        by agencies to accelerate artificial intelligence (AI) implementation
+        and solve the federal government's most critical technological
+        challenges. Tech Force will primarily recruit early-career technologists
+        from traditional recruiting channels, along with experienced engineering
+        managers from private sector partners, to serve two-year employment
+        terms in the federal government. Tech Force will include centralized
+        organization and programming and serve as a recruiting platform
+        post-employment.
+      </AccordionItem>
+      <AccordionItem
+        id="faq-2"
+        title="What are the key steps in the recruiting process?"
+      >
+        The recruiting process includes an initial application, technical
+        assessment, interviews with agency leadership, and a background check.
+        Selected candidates will receive an offer within 4-6 weeks of completing
+        all steps.
+      </AccordionItem>
+      <AccordionItem id="faq-3" title="What skills are required?">
+        We're looking for expertise in software engineering, artificial
+        intelligence, cybersecurity, data analytics, or technical project
+        management. Strong problem-solving abilities and a passion for public
+        service are essential.
+      </AccordionItem>
+      <AccordionItem
+        id="faq-4"
+        title="Are specific educational credentials required to participate?"
+      >
+        While we value diverse educational backgrounds, candidates should
+        demonstrate strong technical skills through their work experience,
+        projects, or certifications. A traditional degree is not strictly
+        required.
+      </AccordionItem>
+      <AccordionItem
+        id="faq-5"
+        title="Is there a minimum experience level required to apply?"
+      >
+        We welcome applications from early-career technologists with 1-3 years
+        of experience as well as experienced professionals. What matters most is
+        your ability to contribute to critical government technology challenges.
+      </AccordionItem>
+      <AccordionItem id="faq-6" title="Is this a political appointment?">
+        No, Tech Force positions are not political appointments. Participants
+        are hired as federal employees based on their technical qualifications
+        and serve in non-partisan roles focused on technology implementation.
+      </AccordionItem>
+      <AccordionItem id="faq-7" title="When am I expected to start?">
+        Start dates vary by cohort. Most participants begin within 2-3 months of
+        receiving their offer, pending completion of background checks and
+        onboarding requirements.
+      </AccordionItem>
+      <AccordionItem id="faq-8" title="Where will the employment be located?">
+        Positions are primarily based in Washington, D.C., though some roles may
+        be available at agency locations across the country. Remote work options
+        vary by agency and role.
+      </AccordionItem>
+    </Accordion>
+```
+
+
+### Banner
+
+**Import:** `import { Banner } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `heading`: string (required)
+  The heading text displayed in the banner
+- `description`: string (required)
+  The description text displayed below the heading
+- `action`: React.ReactNode
+  Optional action element (typically a Button component)
+
+**Examples:**
+
+```tsx
+<Banner {...args} />
+```
+
+```tsx
+<Banner
+      heading="Important Update"
+      description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
+      action={<Button>Learn More</Button>}
+    />
+```
+
+```tsx
+<Banner
+      heading="Announcement"
+      description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
+    />
+```
+
+```tsx
+<Banner
+      heading="Desktop Banner"
+      description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
+      action={<Button>Learn More</Button>}
+    />
+```
+
+```tsx
+<Banner
+      heading="Tablet Banner"
+      description="Use banners to surface short, important updates or a single key action without disrupting the main page content."
+      action={<Button>Learn More</Button>}
+    />
+```
+
+```tsx
+<Banner
+      heading="Mobile Banner"
+      description="Use banners to surface short, important updates or a single key action without disruption."
+      action={<Button size="sm">Learn More</Button>}
+    />
+```
+
+```tsx
+<Banner
+      heading="New Features Available"
+      description="We've made significant improvements to our platform including enhanced security features, faster load times, improved accessibility across all components, and a redesigned dashboard experience. Check out the documentation for more details on how to take advantage of these updates."
+      action={<Button>View Documentation</Button>}
+    />
+```
+
+```tsx
+<Banner
+      heading="Custom Styled Banner"
+      description="This banner has a custom background color applied via className."
+      action={<Button variant="ivory">Action</Button>}
+      className="bg-gray-1000 text-gray-50 [&_h2]:text-gray-50 [&_p]:text-gray-200"
+    />
+```
+
+
+### CardGrid
+
+**Import:** `import { CardGrid } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `title`: string (required)
+  The title text displayed above the cards
+- `cards`: React.ReactNode[] (required)
+  The card elements to display in the grid
+
+**Examples:**
+
+```tsx
+<CardGrid {...args} />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Our Services"
+      cards={sampleCards.slice(0, 4)}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="B"
+      title="Featured Articles"
+      cards={sampleCards.slice(0, 4)}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="B"
+      title="Desktop View (Variant B)"
+      cards={[
+        <PlaceholderCard
+          key="1"
+          title="Card One"
+          description="Variant B displays 2 columns on desktop instead of 3."
+        />,
+        <PlaceholderCard
+          key="2"
+          title="Card Two"
+          description="This is useful for larger card layouts or featured content."
+        />,
+      ]}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Desktop View"
+      cards={[
+        <PlaceholderCard
+          key="1"
+          title="Card One"
+          description="On desktop (lg, 1440px), cards are displayed in a 2-column grid with 12 columns each."
+        />,
+        <PlaceholderCard
+          key="2"
+          title="Card Two"
+          description="The layout uses 128px vertical padding and 64px gap between title and cards."
+        />,
+        <PlaceholderCard
+          key="3"
+          title="Card Three"
+          description="The layout uses 128px vertical padding and 64px gap between title and cards."
+        />,
+      ]}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Tablet View"
+      cards={[
+        <PlaceholderCard
+          key="1"
+          title="Card One"
+          description="On tablet (md, 768px), cards are in a 2-column layout with 56px gap from title."
+        />,
+        <PlaceholderCard
+          key="2"
+          title="Card Two"
+          description="Cards maintain the 12/12 column split on tablet viewports."
+        />,
+      ]}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Mobile View"
+      cards={[
+        <PlaceholderCard
+          key="1"
+          title="Card One"
+          description="On mobile (sm, 320px), cards stack in a single column."
+        />,
+        <PlaceholderCard
+          key="2"
+          title="Card Two"
+          description="Each card takes full width on mobile devices."
+        />,
+      ]}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Two Card Layout"
+      cards={sampleCards.slice(0, 2)}
+    />
+```
+
+```tsx
+<CardGrid variant="A" title="Four Card Layout" cards={sampleCards} />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Six Card Layout"
+      cards={[
+        ...sampleCards,
+        <PlaceholderCard
+          key="5"
+          title="Fifth Card"
+          description="Additional card to show multiple rows."
+        />,
+        <PlaceholderCard
+          key="6"
+          title="Sixth Card"
+          description="The grid handles any number of cards."
+        />,
+      ]}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Featured Resources"
+      cards={[
+        <SampleCard
+          key="1"
+          title="Getting Started Guide"
+          description="Learn the basics and get up and running quickly with our comprehensive guide."
+        />,
+        <SampleCard
+          key="2"
+          title="Best Practices"
+          description="Discover proven strategies and techniques to maximize your results."
+        />,
+        <SampleCard
+          key="3"
+          title="Advanced Topics"
+          description="Deep dive into advanced features and configurations."
+        />,
+        <SampleCard
+          key="4"
+          title="Case Studies"
+          description="See how others have achieved success with real-world examples."
+        />,
+      ]}
+    />
+```
+
+```tsx
+<CardGrid
+      variant="A"
+      title="Three Card Layout"
+      cards={sampleCards.slice(0, 3)}
+    />
+```
+
+
+### DevToolbar
+
+**Import:** `import { DevToolbar } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `defaultExpanded`: boolean
+
+**Examples:**
+
+```tsx
+<>
+      <DemoContent />
+      <DevToolbar {...args} />
+    </>
+```
+
+```tsx
+<>
+      <DemoContent />
+      <DevToolbar {...args} />
+    </>
+```
+
+
+### FaqSection
+
+**Import:** `import { FaqSection } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `title`: string
+  "Frequently Asked Questions"
+- `children`: React.ReactNode (required)
+  The FAQ content - typically an Accordion with AccordionItems
+
+**Examples:**
+
+```tsx
+<FaqSection {...args}>
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+          Selected candidates will receive an offer within 4-6 weeks of
+          completing all steps.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management. Strong problem-solving abilities and a passion for public
+          service are essential.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges. Tech Force will primarily recruit
+          early-career technologists from traditional recruiting channels, along
+          with experienced engineering managers from private sector partners, to
+          serve two-year employment terms in the federal government.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+          Selected candidates will receive an offer within 4-6 weeks of
+          completing all steps.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management. Strong problem-solving abilities and a passion for public
+          service are essential.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection variant="dark">
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection variant="light">
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges. Tech Force will primarily recruit
+          early-career technologists from traditional recruiting channels, along
+          with experienced engineering managers from private sector partners, to
+          serve two-year employment terms in the federal government.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+          Selected candidates will receive an offer within 4-6 weeks of
+          completing all steps.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management. Strong problem-solving abilities and a passion for public
+          service are essential.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection title="Common Questions">
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion defaultExpanded="faq-1">
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges. Tech Force will primarily recruit
+          early-career technologists from traditional recruiting channels, along
+          with experienced engineering managers from private sector partners, to
+          serve two-year employment terms in the federal government. Tech Force
+          will include centralized organization and programming and serve as a
+          recruiting platform post-employment.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+          Selected candidates will receive an offer within 4-6 weeks of
+          completing all steps.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management. Strong problem-solving abilities and a passion for public
+          service are essential.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-4"
+          title="Are specific educational credentials required to participate?"
+        >
+          While we value diverse educational backgrounds, candidates should
+          demonstrate strong technical skills through their work experience,
+          projects, or certifications. A traditional degree is not strictly
+          required.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-5"
+          title="Is there a minimum experience level required to apply?"
+        >
+          We welcome applications from early-career technologists with 1-3 years
+          of experience as well as experienced professionals. What matters most
+          is your ability to contribute to critical government technology
+          challenges.
+        </AccordionItem>
+        <AccordionItem id="faq-6" title="Is this a political appointment?">
+          No, Tech Force positions are not political appointments. Participants
+          are hired as federal employees based on their technical qualifications
+          and serve in non-partisan roles focused on technology implementation.
+        </AccordionItem>
+        <AccordionItem id="faq-7" title="When am I expected to start?">
+          Start dates vary by cohort. Most participants begin within 2-3 months
+          of receiving their offer, pending completion of background checks and
+          onboarding requirements.
+        </AccordionItem>
+        <AccordionItem id="faq-8" title="Where will the employment be located?">
+          Positions are primarily based in Washington, D.C., though some roles
+          may be available at agency locations across the country. Remote work
+          options vary by agency and role.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion>
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem id="faq-2" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+```tsx
+<FaqSection>
+      <Accordion allowMultiple defaultExpanded={["faq-1", "faq-2"]}>
+        <AccordionItem
+          id="faq-1"
+          title="What is the US Tech Force (Tech Force)?"
+        >
+          Tech Force will be an elite group of ~1,000 technology specialists
+          hired by agencies to accelerate artificial intelligence (AI)
+          implementation and solve the federal government's most critical
+          technological challenges.
+        </AccordionItem>
+        <AccordionItem
+          id="faq-2"
+          title="What are the key steps in the recruiting process?"
+        >
+          The recruiting process includes an initial application, technical
+          assessment, interviews with agency leadership, and a background check.
+          Selected candidates will receive an offer within 4-6 weeks of
+          completing all steps.
+        </AccordionItem>
+        <AccordionItem id="faq-3" title="What skills are required?">
+          We're looking for expertise in software engineering, artificial
+          intelligence, cybersecurity, data analytics, or technical project
+          management. Strong problem-solving abilities and a passion for public
+          service are essential.
+        </AccordionItem>
+      </Accordion>
+    </FaqSection>
+```
+
+
+### GridOverlay
+
+**Import:** `import { GridOverlay } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `columnOpacity`: number
+- `borderOpacity`: number
+- `visible`: boolean
+
+
+### NdstudioFooter
+
+**Import:** `import { NdstudioFooter } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `href`: string
+  "https://ndstudio.gov"
+
+
+### PagerControl
+
+**Import:** `import { PagerControl } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `count`: number (required)
+  Total number of pages/items
+- `activeIndex`: number
+  Current active page index (0-based)
+- `duration`: number
+  5000
+- `autoPlay`: boolean
+  true
+- `onChange`: (index: number) => void
+  Callback when the active page changes
+- `pauseOnHover`: boolean
+  true
+- `loop`: boolean
+  true
+
+**Examples:**
+
+```tsx
+<PagerControl {...args} />
+```
+
+```tsx
+<PagerControl count={4} variant="charcoal" />
+```
+
+```tsx
+<PagerControl count={4} variant="ivory" />
+```
+
+```tsx
+<PagerControl count={4} size="sm" />
+```
+
+```tsx
+<PagerControl count={4} size="default" />
+```
+
+```tsx
+<PagerControl count={4} size="lg" />
+```
+
+```tsx
+<PagerControl count={2} />
+```
+
+```tsx
+<PagerControl count={5} />
+```
+
+```tsx
+<PagerControl count={8} />
+```
+
+```tsx
+<PagerControl count={4} duration={2000} />
+```
+
+```tsx
+<PagerControl count={4} duration={8000} />
+```
+
+```tsx
+<PagerControl count={4} autoPlay={false} />
+```
+
+```tsx
+<PagerControl count={4} loop={false} duration={3000} />
+```
+
+```tsx
+<PagerControl count={4} pauseOnHover={false} />
+```
+
+```tsx
+<div className="flex flex-col items-center gap-spacing-24">
+      <PagerControl
+        count={4}
+        activeIndex={activeIndex}
+        onChange={setActiveIndex}
+        autoPlay={false}
+      />
+      <div className="flex gap-spacing-10">
+        <button
+          type="button"
+          onClick={() => setActiveIndex((prev) => Math.max(0, prev - 1))}
+          className="rounded bg-gray-200 px-spacing-12 py-spacing-6"
+        >
+          Previous
+        </button>
+        <span className="px-spacing-12 py-spacing-6">
+          Page {activeIndex + 1} of 4
+        </span>
+        <button
+          type="button"
+          onClick={() => setActiveIndex((prev) => Math.min(3, prev + 1))}
+          className="rounded bg-gray-200 px-spacing-12 py-spacing-6"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+```
+
+```tsx
+<div className="flex w-[400px] flex-col gap-spacing-16">
+      <div className="relative h-[200px] overflow-hidden rounded-radius-12">
+        {slides.map((slide, index) => (
+          <div
+            key={slide.id}
+            className={cn(
+              "absolute inset-0 flex items-center justify-center transition-transform duration-500",
+              slide.color,
+            )}
+            style={{
+              transform: `translateX(${(index - activeIndex) * 100}%)`,
+            }}
+          >
+            <span className="text-xl font-semibold">{slide.title}</span>
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-center">
+        <PagerControl
+          count={slides.length}
+          activeIndex={activeIndex}
+          onChange={setActiveIndex}
+          duration={5000}
+        />
+      </div>
+    </div>
+```
+
+
+### River
+
+**Import:** `import { River } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `headline`: string (required)
+  The headline text
+- `body`: string (required)
+  The body text
+- `primaryAction`: React.ReactNode (required)
+  Primary action button (required)
+- `secondaryAction`: React.ReactNode
+  Secondary action button (optional)
+- `media`: React.ReactNode (required)
+  Media content (image, video, etc.)
+
+**Examples:**
+
+```tsx
+<River {...args} />
+```
+
+```tsx
+<River
+      variant="A"
+      headline="Text Left, Media Right"
+      body="Variant A places the text content on the left (9 columns) and media on the right (15 columns) on desktop viewports. On mobile and tablet, they stack vertically."
+      primaryAction={<Button>Primary Action</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<River
+      variant="B"
+      headline="Media Left, Text Right"
+      body="Variant B places the media on the left (15 columns) and text content on the right (9 columns) on desktop viewports. On mobile and tablet, they stack vertically with text first."
+      primaryAction={<Button>Primary Action</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<River
+      variant="A"
+      headline="Desktop View"
+      body="On desktop (lg, 1440px), the content spans 9 columns and the media spans 15 columns in a horizontal layout."
+      primaryAction={<Button>Primary</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<River
+      variant="A"
+      headline="Tablet View"
+      body="On tablet (md, 768px), the content and media stack vertically with the text above the media."
+      primaryAction={<Button>Primary</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<River
+      variant="A"
+      headline="Mobile View"
+      body="On mobile (sm, 320px), content is stacked with smaller button sizing."
+      primaryAction={<Button size="sm">Primary</Button>}
+      secondaryAction={
+        <Button size="sm" variant="charcoalOutline">
+          Secondary
+        </Button>
+      }
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<River
+      variant="B"
+      headline="Desktop View - Reversed"
+      body="Variant B reverses the layout, placing media on the left and content on the right."
+      primaryAction={<Button>Primary</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<River
+      variant="A"
+      headline="Single Action Button"
+      body="Rivers can also be used with just a primary action button when a secondary action isn't needed."
+      primaryAction={<Button>Learn More</Button>}
+      media={<PlaceholderImage />}
+    />
+```
+
+```tsx
+<>
+      <River
+        variant="A"
+        headline="First Feature"
+        body="Start with text on the left for the first section."
+        primaryAction={<Button>Explore</Button>}
+        media={<PlaceholderImage />}
+      />
+      <River
+        variant="B"
+        headline="Second Feature"
+        body="Alternate to media on the left for visual variety."
+        primaryAction={<Button>Discover</Button>}
+        media={<PlaceholderImage />}
+        className="bg-gray-100"
+      />
+      <River
+        variant="A"
+        headline="Third Feature"
+        body="Return to the original layout to create rhythm."
+        primaryAction={<Button>Learn More</Button>}
+        media={<PlaceholderImage />}
+      />
+    </>
+```
+
+```tsx
+<River
+      variant="A"
+      headline="Real World Example"
+      body="Rivers work great with actual images, videos, or any media content. The media column is designed to accommodate various aspect ratios."
+      primaryAction={<Button>Get Started</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      media={
+        <img
+          src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop"
+          alt="Team collaboration"
+          className="rounded-lg object-cover"
+        />
+      }
+    />
+```
+
+
+### Tout
+
+**Import:** `import { Tout } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `headline`: React.ReactNode (required)
+  The headline displayed in the tout
+- `body`: string
+  The body text displayed below the headline (optional)
+- `primaryAction`: React.ReactNode (required)
+  Primary action button (required)
+- `secondaryAction`: React.ReactNode
+  Secondary action button (optional)
+- `backgroundMedia`: React.ReactNode (required)
+  Background media (image or video element)
+- `footer`: React.ReactNode
+  Optional footer content to display at the bottom of the section.
+- `theme`: ComponentTheme
+  Component-level theme overrides.
+
+**Examples:**
+
+```tsx
+<Tout {...args} />
+```
+
+```tsx
+<Tout
+      headline="Brand-Large/Headline/Small"
+      body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
+      primaryAction={<Button>Primary</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      backgroundMedia={<PlaceholderBackground />}
+    />
+```
+
+```tsx
+<Tout
+      headline="Brand-Large/Headline/Small"
+      body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
+      primaryAction={<Button>Primary</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+      backgroundMedia={<PlaceholderBackground />}
+    />
+```
+
+```tsx
+<Tout
+      headline="Brand-Large/Headline/Small"
+      body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
+      primaryAction={<Button size="sm">Primary</Button>}
+      secondaryAction={
+        <Button size="sm" variant="charcoalOutline">
+          Secondary
+        </Button>
+      }
+      backgroundMedia={<PlaceholderBackground />}
+    />
+```
+
+```tsx
+<Tout
+      headline="Work with Purpose"
+      body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
+      primaryAction={<Button>View Careers</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      backgroundMedia={<ImageBackground />}
+    />
+```
+
+```tsx
+<Tout
+      headline="Get Started Today"
+      body="Begin your journey with our comprehensive onboarding process designed to help you succeed from day one."
+      primaryAction={<Button>Start Now</Button>}
+      backgroundMedia={<PlaceholderBackground />}
+    />
+```
+
+```tsx
+<Tout
+      headline="Experience Innovation"
+      body="See how modern technology is transforming the way government serves its citizens."
+      primaryAction={<Button>Watch Video</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      backgroundMedia={
+        <div className="absolute inset-0 bg-gray-800 flex items-center justify-center">
+          <span className="text-gray-400 typography-body-small">
+            Video Background
+          </span>
+        </div>
+      }
+    />
+```
+
+```tsx
+<Tout
+      headline="Work with Purpose"
+      body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
+      primaryAction={<Button>View Careers</Button>}
+      secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+      backgroundMedia={<ImageBackground />}
+      footer={<NdstudioFooter />}
+    />
+```
+
+
+### TwoColumnSection
+
+**Import:** `import { TwoColumnSection } from "@nationaldesignstudio/react";`
+
+**Category:** Other
+
+**Props:**
+
+- `title`: string (required)
+  The title text displayed in the left column
+- `lead`: React.ReactNode
+  Lead content - prominently styled (brighter text)
+- `children`: React.ReactNode (required)
+  Body content - secondary styled (muted text)
+- `layout`: "asymmetric" | "equal"
+  Layout style for the columns
+  Values: `asymmetric`, `equal`
+
+**Examples:**
+
+```tsx
+<TwoColumnSection {...args} />
+```
+
+```tsx
+<TwoColumnSection
+      variant="dark"
+      title="US Tech Force"
+      lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
+    >
+      <p>
+        Through a two-year program, participants will work in teams reporting
+        directly to agency leadership.
+      </p>
+      <p>
+        Upon completing the program, engineers can seek employment with the
+        partnering private-sector companies for potential full-time roles.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection
+      variant="light"
+      title="US Tech Force"
+      lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
+    >
+      <p>
+        Through a two-year program, participants will work in teams reporting
+        directly to agency leadership.
+      </p>
+      <p>
+        Upon completing the program, engineers can seek employment with the
+        partnering private-sector companies for potential full-time roles.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection
+      variant="dark"
+      title="US Tech Force"
+      lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
+    >
+      <p>
+        Through a two-year program, participants will work in teams reporting
+        directly to agency leadership. In collaboration with leading technology
+        companies, participants will receive technical training, engage with
+        industry leaders, and work closely with senior managers from companies
+        partnering with the Tech Force.
+      </p>
+      <p>
+        Upon completing the program, engineers can seek employment with the
+        partnering private-sector companies for potential full-time roles –
+        demonstrating the value of combining civil service with technical
+        expertise.
+      </p>
+      <p>
+        If you are highly skilled in the areas of software engineering,
+        artificial intelligence, cybersecurity, data analytics, or technical
+        project management and want to build the future of American government
+        technology, join the Tech Force today.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection
+      variant="dark"
+      title="US Tech Force"
+      lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
+    >
+      <p>
+        Through a two-year program, participants will work in teams reporting
+        directly to agency leadership. In collaboration with leading technology
+        companies, participants will receive technical training, engage with
+        industry leaders, and work closely with senior managers from companies
+        partnering with the Tech Force.
+      </p>
+      <p>
+        Upon completing the program, engineers can seek employment with the
+        partnering private-sector companies for potential full-time roles –
+        demonstrating the value of combining civil service with technical
+        expertise.
+      </p>
+      <p>
+        If you are highly skilled in the areas of software engineering,
+        artificial intelligence, cybersecurity, data analytics, or technical
+        project management and want to build the future of American government
+        technology, join the Tech Force today.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection
+      variant="dark"
+      title="US Tech Force"
+      lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
+    >
+      <p>
+        Through a two-year program, participants will work in teams reporting
+        directly to agency leadership. In collaboration with leading technology
+        companies, participants will receive technical training, engage with
+        industry leaders, and work closely with senior managers from companies
+        partnering with the Tech Force.
+      </p>
+      <p>
+        Upon completing the program, engineers can seek employment with the
+        partnering private-sector companies for potential full-time roles –
+        demonstrating the value of combining civil service with technical
+        expertise.
+      </p>
+      <p>
+        If you are highly skilled in the areas of software engineering,
+        artificial intelligence, cybersecurity, data analytics, or technical
+        project management and want to build the future of American government
+        technology, join the Tech Force today.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection variant="dark" title="About the Program">
+      <p>
+        Through a two-year program, participants will work in teams reporting
+        directly to agency leadership. In collaboration with leading technology
+        companies, participants will receive technical training, engage with
+        industry leaders, and work closely with senior managers from companies
+        partnering with the Tech Force.
+      </p>
+      <p>
+        Upon completing the program, engineers can seek employment with the
+        partnering private-sector companies for potential full-time roles.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection
+      variant="dark"
+      title="Our Mission"
+      lead={
+        <>
+          <p>
+            The US Tech Force is recruiting an elite corps of engineers to build
+            the next generation of government technology.
+          </p>
+          <p>
+            Backed by the White House, Tech Force will tackle the most complex
+            and large-scale civic and defense challenges of our era.
+          </p>
+        </>
+      }
+    >
+      <p>
+        From administering critical financial infrastructure at the Treasury
+        Department to advancing cutting-edge programs at the Department of War –
+        and everything in between.
+      </p>
+    </TwoColumnSection>
+```
+
+```tsx
+<TwoColumnSection
+      variant="dark"
+      title="Join Us"
+      lead="Build the future of American government technology."
+    >
+      <p>Applications are now open for qualified engineers.</p>
+    </TwoColumnSection>
+```
+
+
+## Typography
+
+### Prose
+
+**Import:** `import { Prose } from "@nationaldesignstudio/react";`
+
+**Category:** Typography
+
+**Props:**
+
+- `children`: React.ReactNode (required)
+
+**Examples:**
+
+```tsx
+<Prose>
+      <ProseSection heading="Headline - Medium" as="h2">
+        <p>{sampleIntro}</p>
+      </ProseSection>
+      <ProseSection heading="Headline - Small" as="h3">
+        <p>{sampleParagraph1}</p>
+        <p>{sampleParagraph2}</p>
+      </ProseSection>
+    </Prose>
+```
+
+```tsx
+<Prose>
+      <ProseSection heading="Headline - Medium" as="h2">
+        <p>{sampleIntro}</p>
+      </ProseSection>
+      <ProseSection heading="Headline - Small" as="h3">
+        <p>{sampleParagraph1}</p>
+        <p>{sampleParagraph2}</p>
+      </ProseSection>
+    </Prose>
+```
+
+```tsx
+<Prose>
+      <ProseSection heading="Headline - Medium" as="h2">
+        <p>{sampleIntro}</p>
+      </ProseSection>
+      <ProseSection heading="Headline - Small" as="h3">
+        <p>{sampleParagraph1}</p>
+        <p>{sampleParagraph2}</p>
+      </ProseSection>
+    </Prose>
+```
+
+```tsx
+<Prose>
+      <ProseSection heading="Headline - Medium" as="h2">
+        <p>{sampleIntro}</p>
+      </ProseSection>
+      <ProseSection heading="Headline - Small" as="h3">
+        <p>{sampleParagraph1}</p>
+        <p>{sampleParagraph2}</p>
+      </ProseSection>
+    </Prose>
+```
+
+```tsx
+<Prose {...args}>
+      <ProseSection heading="Main Heading" as="h2">
+        <p>{sampleIntro}</p>
+      </ProseSection>
+      <ProseSection heading="Subheading" as="h3">
+        <p>{sampleParagraph1}</p>
+        <p>{sampleParagraph2}</p>
+      </ProseSection>
+    </Prose>
+```
+
+```tsx
+<Prose>
+      <ProseSection heading="About Our Mission" as="h2">
+        <p>{sampleIntro}</p>
+        <p>{sampleParagraph1}</p>
+      </ProseSection>
+    </Prose>
+```
+
+```tsx
+<Prose>
+      <ProseSection heading="Introduction" as="h2">
+        <p>{sampleIntro}</p>
+      </ProseSection>
+      <ProseSection heading="The Importance of Style" as="h3">
+        <p>{sampleParagraph1}</p>
+      </ProseSection>
+      <ProseSection heading="Finding Your Rhythm" as="h3">
+        <p>{sampleParagraph2}</p>
+      </ProseSection>
+    </Prose>
+```
+
+
+---
+
+## Quick Reference
+
+**Components by Category:**
+- **Action:** Button
+- **Display:** Card, Hero, UsGovBanner
+- **Navigation:** Navbar
+- **Other:** Accordion, Banner, CardGrid, DevToolbar, FaqSection, GridOverlay, NdstudioFooter, PagerControl, River, Tout, TwoColumnSection
+- **Typography:** Prose