@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

package/docs/components/PricingOptions/index.md

@@ -0,0 +1,509 @@
+---
+title: Pricing options
+description: Use the pricing options to display pricing plan information on a page.
+keywords: ['pricing', 'plans', 'options', 'features']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/PricingOptions/PricingOptions.tsx
+storybook: '/brand/storybook/?path=/story/components-pricingoptions--default'
+---
+
+## Examples
+
+### Default
+
+```jsx
+<PricingOptions>
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
+    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" originalPrice="20" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Label>Recommended</PricingOptions.Label>
+    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+      Enterprise Cloud.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month" originalPrice="49">
+      39
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Cards variant
+
+```jsx
+<PricingOptions variant="cards">
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
+    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Label>Recommended</PricingOptions.Label>
+    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+      Enterprise Cloud.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
+      39
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Gradient variant
+
+```jsx
+<PricingOptions variant="default-gradient">
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
+    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Label>Recommended</PricingOptions.Label>
+    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+      Enterprise Cloud.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
+      39
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Center alignment
+
+```jsx
+<PricingOptions variant="cards" align="center">
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
+    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.PrimaryAction href="#">Buy now</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+      Enterprise Cloud.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
+      39
+    </PricingOptions.Price>
+    <PricingOptions.PrimaryAction href="#">Join waitlist</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="#">Contact sales</PricingOptions.SecondaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### One option
+
+This is the one-option layout for the pricing options component
+
+```jsx
+<PricingOptions>
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Code completions, Chat, and more for indie developers and freelancers.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Two options
+
+This is the two-item layout for the pricing options component.
+
+```jsx
+<PricingOptions>
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot</PricingOptions.Heading>
+    <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Label>Recommended</PricingOptions.Label>
+    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+      Enterprise Cloud.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
+      39
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Three and four options
+
+`PricingOptions` supports a maximum of four items in both `default` and `card` layouts.
+
+Please refer to our Storybook
+examples
+to see the component in a full-width context as originally intended.
+
+> `PricingOptions` is designed to fill the width of the page's main container,
+> thus it cannot be accurately represented within the narrower container of this
+> documentation.
+
+### Feature list sets
+
+Use `PricingOptions.FeatureListGroupHeading` to group feature items together.
+
+```jsx
+<PricingOptions>
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Code completions, Chat, and more for indie developers and freelancers.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
+
+      <PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+
+    <PricingOptions.Footnote>
+      Free for verified students, teachers, and maintainers of popular open source projects.
+    </PricingOptions.Footnote>
+
+    <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Label>Recommended</PricingOptions.Label>
+    <PricingOptions.Heading>Copilot Business</PricingOptions.Heading>
+    <PricingOptions.Description>Copilot personalized to your organization.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
+      19
+    </PricingOptions.Price>
+    <PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
+    <PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Everything in Copilot Individual</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Code referencing</PricingOptions.FeatureListItem>
+
+      <PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Public code filter</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>IP indemnity</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Enterprise-grade security, safety, and privacy</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Included and excluded features
+
+Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="excluded"` to list included and excluded features.
+
+```jsx
+<PricingOptions>
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Code completions, Chat, and more for indie developers and freelancers.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem variant="excluded">
+        Debugging and security remediation assistance
+      </PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem variant="excluded">
+        Repository-based semantic search
+      </PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem variant="excluded">Access your knowledge base</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem variant="excluded">
+        Fine-tuned models (coming soon)
+      </PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+
+    <PricingOptions.Footnote>
+      Free for verified students, teachers, and maintainers of popular open source projects.
+    </PricingOptions.Footnote>
+
+    <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+
+  <PricingOptions.Item>
+    <PricingOptions.Label>Available Feb 2024</PricingOptions.Label>
+    <PricingOptions.Heading>Copilot Enterprise</PricingOptions.Heading>
+    <PricingOptions.Description>
+      Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+      Enterprise Cloud.
+    </PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per user / month">
+      39
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Debugging and security remediation assistance</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Repository-based semantic search</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Access your knowledge base</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading>
+      <PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Fine-tuned models (coming soon)</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/waitlist">Join waitlist</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Info tooltips
+
+Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary tooltip to a feature.
+
+```jsx
+<PricingOptions>
+  <PricingOptions.Item>
+    <PricingOptions.Heading>Pro</PricingOptions.Heading>
+    <PricingOptions.Description>Accelerate workflows with GitHub Copilot.</PricingOptions.Description>
+    <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year">
+      10
+    </PricingOptions.Price>
+    <PricingOptions.FeatureList>
+      <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem infoTooltip="Interact with Copilot using natural language.">
+        Chat in IDE and Mobile
+      </PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem infoTooltip="Get help directly in your terminal.">
+        CLI assistance
+      </PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+    <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+### Actions message
+
+Use `PricingOptions.ActionsMessage` to render status, billing, or upgrade notes in the actions area. Add
+`leadingComponent` when you want to show a supporting icon.
+
+```jsx
+<PricingOptions variant="cards">
+  <PricingOptions.Item>
+    <PricingOptions.Label>Most popular</PricingOptions.Label>
+    <PricingOptions.Heading>Pro</PricingOptions.Heading>
+    <PricingOptions.Description>Accelerate workflows with GitHub Copilot.</PricingOptions.Description>
+    <PricingOptions.Price trailingText="per user / month">10</PricingOptions.Price>
+    <PricingOptions.PrimaryAction disabled>Upgrade now</PricingOptions.PrimaryAction>
+    <PricingOptions.ActionsMessage leadingComponent={<InfoIcon />}>
+      <Text as="p" size="100">
+        <strong>Upgrades are temporarily paused.</strong> We are rolling out a more flexible billing experience.
+      </Text>
+    </PricingOptions.ActionsMessage>
+    <PricingOptions.FeatureList hasDivider={false}>
+      <PricingOptions.FeatureListItem>Copilot cloud agent</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Copilot code review</PricingOptions.FeatureListItem>
+      <PricingOptions.FeatureListItem>Claude and Codex on GitHub and VS Code</PricingOptions.FeatureListItem>
+    </PricingOptions.FeatureList>
+  </PricingOptions.Item>
+</PricingOptions>
+```
+
+## Component props
+
+### PricingOptions `Required`
+
+| Name       | Type                                                             |  Default  | required | Description                         |
+| :--------- | :--------------------------------------------------------------- | :-------: | :------: | :---------------------------------- |
+| `as`       | `'section' \| 'div'`                                             | `section` |  `false` | Applies the underlying HTML element |
+| `children` | `PricingOptions.Item`                                            |           |  `true`  | Applies the underlying HTML element |
+| `variant`  | `'default' \| 'default-gradient' \| 'cards' \| 'cards-gradient'` |           |  `false` | Sets the style variant              |
+| `style`    | `React.CSSProperties`                                            |           |  `false` | Inline CSS overrides                |
+
+### PricingOptions.Item `Required`
+
+One item per pricing plan to be displayed. Maximum of 4 items.
+
+| Name       | Type                                                                                                                                                                                                                                                                                                                |   Default   | required | Description              |
+| :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------: | :------: | :----------------------- |
+| `children` | `'PricingOptions.Heading' \| 'PricingOptions.Label' \| 'PricingOptions.Description' \| 'PricingOptions.Price' \| 'PricingOptions.PrimaryAction' \| 'PricingOptions.SecondaryAction' \| 'PricingOptions.ActionsMessage' \| 'PricingOptions.FeatureList' \| 'PricingOptions.Footnote' \| 'PricingOptions.MenuAction'` | `undefined` |  `true`  | The contents of the item |
+
+### PricingOptions.Heading `Required`
+
+| Name       | Type          |   Default   | required | Description                                       |
+| :--------- | :------------ | :---------: | :------: | :------------------------------------------------ |
+| `as`       | `HeadingTags` |     `h3`    |  `false` | Applies the underlying HTML heading level element |
+| `children` | `ReactNode`   | `undefined` |  `true`  | The heading of the item                           |
+
+### PricingOptions.Label
+
+| Name       | Type        |   Default   | required | Description                          |
+| :--------- | :---------- | :---------: | :------: | :----------------------------------- |
+| `children` | `ReactNode` | `undefined` |  `true`  | The column header label for the item |
+
+### PricingOptions.Description
+
+| Name       | Type        |   Default   | required | Description                 |
+| :--------- | :---------- | :---------: | :------: | :-------------------------- |
+| `children` | `ReactNode` | `undefined` |  `true`  | The description of the item |
+
+### PricingOptions.Price
+
+| Name             | Type        |   Default   | required | Description                                        |
+| :--------------- | :---------- | :---------: | :------: | :------------------------------------------------- |
+| `children`       | `ReactNode` | `undefined` |  `true`  | The price of the item                              |
+| `currencyCode`   | `string`    |    `USD`    |  `false` | The currency code                                  |
+| `currencySymbol` | `string`    |     `$`     |  `false` | The currency symbol                                |
+| `originalPrice`  | `string`    | `undefined` |  `false` | The initial price before any discounts are applied |
+| `trailingText`   | `string`    |             |  `false` | The trailing text                                  |
+
+### PricingOptions.ActionsMessage
+
+| Name               | Type           |   Default   | required | Description                                                                       |
+| :----------------- | :------------- | :---------: | :------: | :-------------------------------------------------------------------------------- |
+| `children`         | `ReactNode`    | `undefined` |  `true`  | The message content rendered in the actions area                                  |
+| `leadingComponent` | `ReactElement` | `undefined` |  `false` | Optional leading visual, typically an icon. Sizing is handled by component styles |
+
+### PricingOptions.FeatureList
+
+| Name          | Type                                                                           |   Default   | required | Description                                                                                                 |
+| :------------ | :----------------------------------------------------------------------------- | :---------: | :------: | :---------------------------------------------------------------------------------------------------------- |
+| `children`    | `'PricingOptions.FeatureListGroupHeading' \| 'PricingOptions.FeatureListItem'` | `undefined` |  `true`  | The list of features                                                                                        |
+| `accordionAs` | `HeadingTags`                                                                  |     `h4`    |  `false` | Applies the underlying HTML heading level element                                                           |
+| `expanded`    | `boolean`                                                                      |    `true`   |  `false` | Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes. |
+| `hasDivider`  | `boolean`                                                                      |    `true`   |  `false` | Controls visibility of a visual border between feature lists and adjacent actions                           |
+
+### PricingOptions.FeatureListGroupHeading
+
+| Name       | Type        |       Default       | required | Description                         |
+| :--------- | :---------- | :-----------------: | :------: | :---------------------------------- |
+| `children` | `ReactNode` | `"What's included"` |  `false` | A custom title for the feature list |
+
+### PricingOptions.FeatureListGroupHeading
+
+| Name       | Type         |   Default   | required | Description                                       |
+| :--------- | :----------- | :---------: | :------: | :------------------------------------------------ |
+| `as`       | `h4, h5, h6` |     `h4`    |  `false` | Applies the underlying HTML heading level element |
+| `children` | `ReactNode`  | `undefined` |  `true`  | The heading of the feature list set               |
+
+### PricingOptions.FeatureListItem
+
+| Name          | Type                       |   Default   | required | Description                                               |
+| :------------ | :------------------------- | :---------: | :------: | :-------------------------------------------------------- |
+| `children`    | `ReactNode`                | `undefined` |  `true`  | The item of the feature list set                          |
+| `infoTooltip` | `string`                   | `undefined` |  `false` | Tooltip text shown on hover/focus via an info icon button |
+| `variant`     | `'included' \| 'excluded'` |  `included` |  `false` | The variant of the feature list set                       |
+
+### PricingOptions.MenuAction
+
+| Name       | Type        |   Default   | required | Description                                                 |
+| :--------- | :---------- | :---------: | :------: | :---------------------------------------------------------- |
+| `children` | `ReactNode` | `undefined` |  `true`  | An `ActionMenu` component, typically in `split-button` mode |
+
+### PricingOptions.Footnote
+
+| Name       | Type        |   Default   | required | Description              |
+| :--------- | :---------- | :---------: | :------: | :----------------------- |
+| `children` | `ReactNode` | `undefined` |  `true`  | The footnote of the item |

package/docs/components/Prose/index.md

@@ -0,0 +1,158 @@
+---
+title: Prose
+description: Use the prose component to apply Primer Brand styles to HTML markup.
+keywords: ['HTML', 'text', 'formatting', 'styling']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Prose/Prose.tsx
+storybook: '/brand/storybook/?path=/story/components-prose--playground'
+---
+
+```js
+import {Prose} from '@primer/react-brand'
+```
+
+## Examples
+
+> The `Prose` component renders native HTML elements with Primer Brand styling. `Prose` doesn't sanitize the input data. We recommend sanitizing the data before passing it into `Prose`.
+>
+> `Prose` currently supports styling the following HTML elements: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<p>`, `<strong>`, `<em>`, `<a>`, `<ul>`, `<ol>`, `<li>`, `<img>`, `<blockquote>`, `<code>`, `<figure>`, `<figcaption>` and `<div>`.
+
+### Default
+
+```jsx
+<Prose
+  html={`
+    <h2>Heading level 2</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus ipsum, consectetur convallis diam pretium quis. Proin ut felis ut eros tristique tincidunt.</p>
+    <figure>
+      <blockquote>
+        <p>Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam, sit amet auctor leo. Aliquam erat volutpat.</p>
+        <figcaption>Lisa Vanderschuit, Engineering Program Manager, Shopify</figcaption>
+      </blockquote>
+    </figure>
+    <p>Integer pellentesque pretium nulla viverra molestie. Praesent quis pretium sapien. Sed convallis eget lectus et pulvinar:</p>
+    <ul>
+      <li>
+        Vivamus eu risus nec lectus consequat rutrum at vel lacus.
+      </li>
+      <li>Donec at dolor ut metus imperdiet congue vel porta nunc.
+      </li>
+      <li>Quisque eu tortor suscipit, congue quam in, bibendum tellus.</li>
+    </ul>
+    <h3>Heading level 3</h3>
+    <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue. Ut malesuada, nisl vel dignissim mollis</p>
+    <img
+      src="/images/placeholder.png"
+      alt="placeholder, blank area with a gray background color"
+      />
+    <h4>Heading level  4</h4>
+    <p>
+      Secure code as you write it. Automatically review every change to your codebase and identify vulnerabilities
+      before they reach production. <a href="/#">Learn more here.</a>
+    </p>
+    <h5>Heading level 5</h5>
+    <ol>
+      <li>
+        Vivamus eu risus nec lectus consequat rutrum at vel lacus.
+      </li>
+      <li>Donec at dolor ut metus imperdiet congue vel porta nunc.
+      </li>
+      <li>Quisque eu tortor suscipit, congue quam in, bibendum tellus.</li>
+    </ol>
+    <p><code>for-each-ref</code> is extremely useful for listing references, finding which references point at a given object (with <code>--points-at</code>), which references have been merged into a given branch (with <code>--merged</code>), or which references contain a given commit (with <code>--contains</code>).</p>
+    <h6>Heading level 6</h6>
+    <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
+    <table>
+      <caption>Developer growth by total developers in 2023, % increase from 2022.</caption>
+      <thead>
+        <tr>
+          <th scope="col">Country</th>
+          <th scope="col">Number of developers</th>
+          <th scope="col">YoY growth</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Singapore</td>
+          <td>>1M developers</td>
+          <td>39%</td>
+        </tr>
+        <tr>
+          <td>India</td>
+          <td>>13.2M developers</td>
+          <td>36%</td>
+        </tr>
+        <tr>
+          <td>Hong Kong SAR</td>
+          <td>>1.6M developers</td>
+          <td>35%</td>
+        </tr>
+        <tr>
+          <td>Vietnam</td>
+          <td>>1.5M developers</td>
+          <td>34%</td>
+        </tr>
+        <tr>
+          <td>Indonesia</td>
+          <td>>2.9M developers</td>
+          <td>31%</td>
+        </tr>
+        <tr>
+          <td>Japan</td>
+          <td>>2.8M developers</td>
+          <td>31%</td>
+        </tr>
+        <tr>
+          <td>Philippines</td>
+          <td>>1.3M developers</td>
+          <td>31%</td>
+        </tr>
+        <tr>
+          <td>Thailand</td>
+          <td>>857K developers</td>
+          <td>25%</td>
+        </tr>
+        <tr>
+          <td>South Korea</td>
+          <td>>1.9M developers</td>
+          <td>22%</td>
+        </tr>
+        <tr>
+          <td>Australia</td>
+          <td>>1.4M developers</td>
+          <td>21%</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
+    `}
+/>
+```
+
+### Full Width
+
+```jsx
+<Prose
+  enableFullWidth
+  html={`
+  <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus ipsum, consectetur convallis diam
+      pretium quis. Proin ut felis ut eros tristique tincidunt.
+    </p>
+    <p>
+      Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam,
+      sit amet auctor leo. Aliquam erat volutpat.
+    </p>
+    `}
+/>
+```
+
+## Component props
+
+### Prose
+
+| Name              | Type      | Default | Required | Description                                        |
+| :---------------- | :-------- | :-----: | :------- | -------------------------------------------------- |
+| `html`            | `string`  |         | `true`   | Content to be displayed within the Prose component |
+| `enableFullWidth` | `boolean` | `false` |          | A toggle to remove the default max-width           |
+| `className`       | `string`  |         |          | Sets a custom class on the root element            |