lion-make 0.1.0 → 0.3.0

package/guidelines/content-types/general/all-blogs-post-block.md

@@ -0,0 +1,52 @@
+# All Blog Posts Block
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+**Platform restriction:** Blog platform only (`data-platform="blog"`).
+
+## Description
+
+Renders a paginated or filtered grid of all blog posts. Used as the primary listing view on the blog index page. Not intended for inline use on product pages — use `RecentBlogPostsBlock` for that.
+
+This component requires a data integration to the blog CMS to function; the stub accepts a static `posts` prop for Figma Make prototyping.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `posts` | `BlogPostItem[]` | Yes | — | Array of blog post data |
+| `postsPerPage` | `number` | No | `12` | Number of posts per page (pagination) |
+| `enableFiltering` | `boolean` | No | `true` | Show category/tag filter UI |
+| `enableSearch` | `boolean` | No | `false` | Show keyword search input |
+| `layout` | `'grid' \| 'list'` | No | `'grid'` | Card display mode |
+| `className` | `string` | No | — | Additional CSS class |
+
+### BlogPostItem
+
+| Prop | Type | Description |
+|---|---|---|
+| `title` | `string` | Post title |
+| `slug` | `string` | URL slug |
+| `excerpt` | `string` | Short summary |
+| `thumbnailSrc` | `string` | Card thumbnail URL |
+| `thumbnailAlt` | `string` | Thumbnail alt text |
+| `publishedAt` | `string` | ISO 8601 date |
+| `category` | `string` | Primary category |
+| `tags` | `string[]` | Optional tags array |
+
+## Usage
+
+```tsx
+import { AllBlogsPostBlock } from 'lion-make'
+
+<AllBlogsPostBlock
+  posts={blogPosts}
+  postsPerPage={12}
+  enableFiltering
+  layout="grid"
+/>
+```
+
+## Placement Constraint
+
+This content type is only valid on pages where `data-platform="blog"` is set at the page root. Placing it on a non-blog page is invalid.

package/guidelines/content-types/general/background-color-block.md

@@ -0,0 +1,42 @@
+# Background Color Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Wraps child content in a full-width background color band. Used to visually separate page sections or create contrast. Color must come from the design token palette — no custom hex values.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `color` | `BackgroundColorToken` | Yes | Background color token name |
+| `children` | `ReactNode` | Yes | Content to render inside the band |
+| `className` | `string` | No | Additional CSS class |
+
+### BackgroundColorToken values
+
+| Value | CSS variable | Visual |
+|---|---|---|
+| `white` | `--color-white` | White |
+| `gray-lightest` | `--color-gray-lightest` | Near-white gray |
+| `teal-tint` | `--color-teal-tint` | Very light teal |
+| `sand` | `--color-sand` | Warm off-white |
+| `blue-dark` | `--color-blue-dark` | Dark navy (use light text on top) |
+| `teal` | `--color-teal` | Brand teal (use light text on top) |
+| `brand` | `--color-brand` | Brand blue (use light text on top) |
+
+## Usage
+
+```tsx
+import { BackgroundColorBlock, RTBs } from 'lion-make'
+
+<BackgroundColorBlock color="teal-tint">
+  <RTBs items={[...]} />
+</BackgroundColorBlock>
+```
+
+## Design Tokens
+
+- Padding: `var(--padding-edge)`
+- Background: resolved from `BackgroundColorToken`

package/guidelines/content-types/general/basic-content-block.md

@@ -0,0 +1,43 @@
+# Basic Content Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+The most versatile general content type. Combines a heading, body copy, optional image, and optional CTA. Image position controls the layout direction.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `heading` | `string` | Yes | — | Section heading |
+| `body` | `string` | Yes | — | Body copy |
+| `imageSrc` | `string` | No | — | Image URL |
+| `imageAlt` | `string` | No | — | Image alt text |
+| `imagePosition` | `'left' \| 'right' \| 'top' \| 'none'` | No | `'top'` | Where the image appears relative to text |
+| `ctaLabel` | `string` | No | — | CTA link text |
+| `ctaHref` | `string` | No | — | CTA destination |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { BasicContentBlock } from 'lion-make'
+
+<BasicContentBlock
+  heading="Why families choose us"
+  body="For over 100 years, we've helped families protect what matters most with affordable, straightforward coverage."
+  imageSrc="/family-outdoors.jpg"
+  imageAlt="Family outdoors"
+  imagePosition="right"
+  ctaLabel="Learn about our history"
+  ctaHref="/about"
+/>
+```
+
+## Design Tokens
+
+- Heading: `var(--h2-font-size)`, `var(--font-weight-700)`
+- Body: `var(--font-size-base)`, `var(--line-height-base)`, `var(--color-text)`
+- Gap between image and text: `var(--Grid-gutter-size)`
+- CTA: `var(--color-link)`, `var(--font-weight-600)`

package/guidelines/content-types/general/body-text-copy-block.md

@@ -0,0 +1,38 @@
+# Body Text Copy Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Long-form prose rendered from RTE output. Use for article-style body copy, editorial content, or policy explanations. Constrained to a readable max-width (72ch).
+
+Distinct from `RichText` in intent: BodyTextCopyBlock is for sustained reading, RichText is for short mixed-content fragments. In practice the rendering is similar — use whichever matches the authoring context.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `html` | `string` | Yes | Sanitized HTML from CMS RTE |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { BodyTextCopyBlock } from 'lion-make'
+
+<BodyTextCopyBlock html="<p>Term life insurance provides coverage for a <strong>specific period</strong>...</p>" />
+```
+
+## Content Rules
+
+- Only pass sanitized HTML from the CMS RTE. Never pass raw user input.
+- Headings within body copy should start at H2 (H1 belongs to the Hero zone).
+- Links inherit `var(--color-link)` and `var(--color-link-hover)` automatically.
+
+## Design Tokens
+
+- Font: `var(--font-family-sans-serif)`
+- Size: `var(--font-size-base)`
+- Line height: `var(--line-height-base)`
+- Color: `var(--color-text)`
+- Max width: `72ch`

package/guidelines/content-types/general/content-image-block.md

@@ -0,0 +1,37 @@
+# Content Image Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A standalone image with optional caption. Use for meaningful content images — not decorative ones. Always provide descriptive alt text.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `src` | `string` | Yes | — | Image URL |
+| `alt` | `string` | Yes | — | Alt text (required for accessibility) |
+| `caption` | `string` | No | — | Visible caption below the image |
+| `width` | `'full' \| 'half' \| 'third'` | No | `'full'` | Rendered width relative to container |
+| `alignment` | `'left' \| 'center' \| 'right'` | No | `'left'` | Alignment when width is less than full |
+| `linkHref` | `string` | No | — | Makes the image a link |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { ContentImageBlock } from 'lion-make'
+
+<ContentImageBlock
+  src="/coverage-diagram.png"
+  alt="Diagram showing term life coverage periods from 10 to 30 years"
+  caption="Coverage periods available for term life policies."
+  width="full"
+/>
+```
+
+## Design Tokens
+
+- Border radius: `var(--border-radius-base)`
+- Caption: `var(--h6-font-size)`, `var(--color-gray-dark)`

package/guidelines/content-types/general/cross-sell-card-block.md

@@ -0,0 +1,45 @@
+# Cross-Sell Card Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A grid of related product or content cards. Used to drive cross-sell between product lines or surface related coverage options. Max 3 cards per row; renders as a responsive grid.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `cards` | `CrossSellCard[]` | Yes | Array of cards (recommended: 2–4) |
+| `className` | `string` | No | Additional CSS class |
+
+### CrossSellCard
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Card title |
+| `body` | `string` | Yes | Short description |
+| `ctaLabel` | `string` | Yes | Link text |
+| `ctaHref` | `string` | Yes | Link destination |
+| `imageSrc` | `string` | No | Card image URL |
+| `imageAlt` | `string` | No | Image alt text |
+
+## Usage
+
+```tsx
+import { CrossSellCardBlock } from 'lion-make'
+
+<CrossSellCardBlock cards={[
+  { heading: 'Whole Life', body: 'Lifetime coverage with a cash value component.', ctaLabel: 'Explore whole life', ctaHref: '/whole-life', imageSrc: '/img/whole-life.jpg', imageAlt: '' },
+  { heading: 'Medicare Supplement', body: 'Cover gaps in Original Medicare.', ctaLabel: 'Learn more', ctaHref: '/medicare', imageSrc: '/img/medicare.jpg', imageAlt: '' },
+]} />
+```
+
+## Design Tokens
+
+- Card border: `var(--border-width-thin)` solid `var(--color-line)`
+- Card border radius: `var(--border-radius-base)`
+- Heading: `var(--h3-font-size)`, `var(--font-weight-600)`
+- Body: `var(--font-size-base)`, `var(--color-text)`
+- CTA: `var(--color-link)`, `var(--font-weight-600)`
+- Grid gap: `var(--Grid-gutter-size)`

package/guidelines/content-types/general/decorative-list-block.md

@@ -0,0 +1,40 @@
+# Decorative List Block
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A styled list with decorative markers. Use for feature lists, benefits, or steps. More visually engaging than a plain HTML list.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `items` | `string[]` | Yes | — | List items |
+| `style` | `'checkmark' \| 'bullet' \| 'number' \| 'icon'` | No | `'checkmark'` | Marker style |
+| `heading` | `string` | No | — | Optional section heading above the list |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { DecorativeListBlock } from 'lion-make'
+
+<DecorativeListBlock
+  style="checkmark"
+  heading="What's included"
+  items={[
+    'No medical exam required',
+    'Coverage starts immediately',
+    'Fixed premiums — never increases',
+    'Portable — keeps coverage if you change jobs',
+  ]}
+/>
+```
+
+## Design Tokens
+
+- Marker color: `var(--color-brand)`
+- Marker weight: `var(--font-weight-700)`
+- Item text: `var(--font-size-base)`, `var(--color-text)`
+- Item gap: `var(--padding-small-vertical)`

package/guidelines/content-types/general/email-callout-block.md

@@ -0,0 +1,38 @@
+# Email Call-out Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A compact, highlighted block for capturing a single email address. Lighter-weight than `LeadForm` — use when you only need an email with no other fields. For multi-field capture, use `LeadForm` or `MultiStepLeadForm`.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `heading` | `string` | Yes | — | Block headline |
+| `body` | `string` | No | — | Supporting copy |
+| `placeholder` | `string` | No | `'Enter your email'` | Input placeholder text |
+| `submitLabel` | `string` | No | `'Subscribe'` | Submit button label |
+| `onSubmit` | `(email: string) => void` | No | — | Callback with submitted email |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { EmailCalloutBlock } from 'lion-make'
+
+<EmailCalloutBlock
+  heading="Stay informed"
+  body="Get tips on protecting your family — delivered monthly."
+  placeholder="your@email.com"
+  submitLabel="Subscribe"
+  onSubmit={(email) => subscribeEmail(email)}
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--color-teal-tint)`
+- Border radius: `var(--border-radius-base)`
+- Submit: `var(--color-brand)` background, `var(--color-white)` text

package/guidelines/content-types/general/embedded-video-block.md

@@ -0,0 +1,36 @@
+# Embedded Video Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+Embeds a video (YouTube, Vimeo, or hosted) in a responsive aspect-ratio wrapper. Use for product explainers, testimonials, or educational content.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `src` | `string` | Yes | — | Embed URL (YouTube/Vimeo embed URL, not the watch URL) |
+| `title` | `string` | Yes | — | Accessible title for the iframe |
+| `aspectRatio` | `'16/9' \| '4/3' \| '1/1'` | No | `'16/9'` | Video aspect ratio |
+| `autoplay` | `boolean` | No | `false` | Append autoplay parameter to src |
+| `caption` | `string` | No | — | Optional caption below the video |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { EmbeddedVideoBlock } from 'lion-make'
+
+<EmbeddedVideoBlock
+  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+  title="How term life insurance works"
+  aspectRatio="16/9"
+  caption="A 2-minute overview of term life coverage."
+/>
+```
+
+## Design Tokens
+
+- Border radius: `var(--border-radius-base)`
+- Caption: `var(--h6-font-size)`, `var(--color-gray-dark)`

package/guidelines/content-types/general/full-size-image-with-highlight-box.md

@@ -0,0 +1,52 @@
+# Full Size Image with Highlight Box
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+## Description
+
+A full-width image with an overlaid highlight box positioned in one of the four corners. The highlight box contains a heading, body, and optional CTA. Use for visually impactful section openers that combine photography with a key message.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `imageSrc` | `string` | Yes | — | Full-width background image URL |
+| `imageAlt` | `string` | Yes | — | Image alt text |
+| `highlightBox` | `HighlightBox` | Yes | — | The overlay box content |
+| `highlightBoxPosition` | `'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right'` | No | `'bottom-left'` | Corner where the box appears |
+| `className` | `string` | No | — | Additional CSS class |
+
+### HighlightBox
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Overlay heading |
+| `body` | `string` | Yes | Overlay body text |
+| `ctaLabel` | `string` | No | CTA button label |
+| `ctaHref` | `string` | No | CTA destination |
+
+## Usage
+
+```tsx
+import { FullSizeImageWithHighlightBox } from 'lion-make'
+
+<FullSizeImageWithHighlightBox
+  imageSrc="/family-landscape.jpg"
+  imageAlt="Family hiking together"
+  highlightBoxPosition="bottom-left"
+  highlightBox={{
+    heading: 'Protect what you love most',
+    body: 'Term life coverage from $12/month. No medical exam.',
+    ctaLabel: 'Get a quote',
+    ctaHref: '/quote',
+  }}
+/>
+```
+
+## Design Tokens
+
+- Highlight box background: `var(--color-white)`
+- Highlight box border radius: `var(--border-radius-base)`
+- Highlight box padding: `var(--padding-edge)`
+- Highlight box max-width: `360px`
+- CTA background: `var(--color-brand)`, text: `var(--color-white)`

package/guidelines/content-types/general/horizontal-rule.md

@@ -0,0 +1,35 @@
+# Horizontal Rule
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A horizontal divider line to visually separate content sections. Use sparingly — prefer `SpacingBlock` for vertical rhythm without a visible line.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `style` | `'solid' \| 'dashed' \| 'dotted'` | No | `'solid'` | Line style |
+| `color` | `string` | No | `var(--color-line)` | CSS color value or token |
+| `thickness` | `'thin' \| 'base' \| 'thick'` | No | `'thin'` | Line weight |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { HorizontalRule } from 'lion-make'
+
+<HorizontalRule />
+
+// Thick brand-colored divider
+<HorizontalRule thickness="thick" color="var(--color-brand)" />
+```
+
+## Design Tokens
+
+- thin: `var(--border-width-thin)` (1px)
+- base: `var(--border-width-base)` (2px)
+- thick: `var(--border-width-thick)` (3px)
+- Default color: `var(--color-line)` → `var(--color-gray-light)`
+- Margin: `var(--padding-edge)` top and bottom

package/guidelines/content-types/general/hot-jobs-block.md

@@ -0,0 +1,52 @@
+# Hot Jobs Block
+
+**Zone:** General — Primary Column only. Not valid in Sideburn or Outro.
+
+**Platform restriction:** Careers platform only (`data-platform="careers"`).
+
+## Description
+
+A curated or dynamically-populated listing of featured open positions. Used on careers landing pages and targeted recruiting pages to surface high-priority roles. Connects to the careers data source at runtime; the stub accepts a static `jobs` prop for prototyping.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `jobs` | `JobItem[]` | Yes | — | Array of job listings |
+| `heading` | `string` | No | `'Featured opportunities'` | Section heading |
+| `subtext` | `string` | No | — | Optional supporting copy |
+| `count` | `number` | No | `6` | Max jobs to display |
+| `ctaLabel` | `string` | No | `'View all jobs'` | Link to full job board |
+| `ctaHref` | `string` | No | — | Full job board URL |
+| `layout` | `'cards' \| 'list'` | No | `'cards'` | Display mode |
+| `className` | `string` | No | — | Additional CSS class |
+
+### JobItem
+
+| Prop | Type | Description |
+|---|---|---|
+| `title` | `string` | Job title |
+| `location` | `string` | City, State or "Remote" |
+| `department` | `string` | Department or team |
+| `type` | `'full-time' \| 'part-time' \| 'contract' \| 'internship'` | Employment type |
+| `postedAt` | `string` | ISO 8601 date posted |
+| `applyHref` | `string` | Link to application page |
+
+## Usage
+
+```tsx
+import { HotJobsBlock } from 'lion-make'
+
+<HotJobsBlock
+  heading="We're hiring"
+  subtext="Join our team and help families find financial peace of mind."
+  jobs={featuredJobs}
+  count={6}
+  ctaLabel="See all open roles"
+  ctaHref="/careers/jobs"
+/>
+```
+
+## Placement Constraint
+
+Only valid on pages where `data-platform="careers"` is set at the page root. Do not use on product or blog pages.

package/guidelines/content-types/general/inline-message.md

@@ -0,0 +1,36 @@
+# Inline Message
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A contextual alert or status message placed within the content flow. Used to surface important information, warnings, or errors at the point of relevance — not as a page-wide banner.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `type` | `'info' \| 'warning' \| 'success' \| 'error'` | Yes | — | Message severity |
+| `message` | `string` | Yes | — | Message body |
+| `heading` | `string` | No | — | Optional bold heading |
+| `dismissible` | `boolean` | No | `false` | Show a dismiss (×) button |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { InlineMessage } from 'lion-make'
+
+<InlineMessage type="warning" heading="Open enrollment closes soon" message="You have 7 days left to make changes to your coverage." dismissible />
+
+<InlineMessage type="success" message="Your application has been submitted successfully." />
+```
+
+## Design Token Map
+
+| Type | Background | Text/border color |
+|---|---|---|
+| `info` | `--color-teal-tint` | `--color-teal-dark` / `--color-teal` |
+| `warning` | `--color-yellow-light` | `--color-yellow` |
+| `success` | `--color-green-light` | `--color-green` |
+| `error` | `--color-red-light` | `--color-red` |

package/guidelines/content-types/general/last-chance-block.md

@@ -0,0 +1,40 @@
+# Last Chance Block
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A high-visual-weight urgency block for enrollment deadlines or limited-time offers. Uses the blue-to-teal gradient. Use once per page maximum — high frequency dilutes impact.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Main urgency message |
+| `body` | `string` | Yes | Supporting copy |
+| `ctaLabel` | `string` | Yes | CTA button label |
+| `ctaHref` | `string` | Yes | CTA destination |
+| `deadline` | `string` | No | Deadline label (e.g., "December 7") |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { LastChanceBlock } from 'lion-make'
+
+<LastChanceBlock
+  deadline="December 7"
+  heading="Medicare Open Enrollment ends soon"
+  body="Review your plan options and make changes before the deadline."
+  ctaLabel="Compare plans now"
+  ctaHref="/medicare/compare"
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--gradient-blue-to-teal)`
+- Text: `var(--color-white)`
+- Heading: `var(--h1-font-size)`, `var(--font-weight-700)`
+- CTA: `var(--color-white)` background, `var(--color-brand)` text
+- Deadline label: uppercase, `var(--font-weight-600)`

package/guidelines/content-types/general/multi-step-lead-form.md

@@ -0,0 +1,60 @@
+# Multi-Step Lead Form
+
+**Zone:** General — Primary Column, Outro only. Not valid in Sideburn.
+
+## Description
+
+A guided multi-step form that breaks a long lead capture flow into smaller steps. Each step shows a subset of fields and a progress bar. Use when LeadForm would have more than 5–6 fields.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `steps` | `FormStep[]` | Yes | Array of steps, each with a title and fields |
+| `submitLabel` | `string` | No | Final step submit button label (default: "Submit") |
+| `onSubmit` | `(data: Record<string, string>) => void` | No | Called on final step submission with all collected data |
+| `mediaCode` | `string` | No | Campaign tracking code for attribution |
+| `className` | `string` | No | Additional CSS class |
+
+### FormStep
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `title` | `string` | Yes | Step label shown above the form |
+| `fields` | `LeadFormField[]` | Yes | Fields to show on this step (same type as `LeadForm`) |
+
+## Usage
+
+```tsx
+import { MultiStepLeadForm } from 'lion-make'
+
+<MultiStepLeadForm
+  steps={[
+    {
+      title: 'About you',
+      fields: [
+        { name: 'firstName', label: 'First Name', type: 'text', required: true },
+        { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+        { name: 'dob', label: 'Date of Birth', type: 'text', required: true },
+      ],
+    },
+    {
+      title: 'Contact info',
+      fields: [
+        { name: 'email', label: 'Email', type: 'email', required: true },
+        { name: 'phone', label: 'Phone', type: 'tel' },
+        { name: 'state', label: 'State', type: 'select', required: true, options: ['NE', 'IA', 'KS'] },
+      ],
+    },
+  ]}
+  submitLabel="Get my quote"
+  mediaCode="CAMP-2024-Q1"
+  onSubmit={(data) => submitLead(data)}
+/>
+```
+
+## Design Tokens
+
+- Progress bar active: `var(--color-brand)`
+- Progress bar inactive: `var(--color-gray-light)`
+- Submit button: `var(--color-brand)` background, `var(--color-white)` text