Prose

render: () => (
  <Measure width="wide">
    <Section
      title="Release notes"
      description="Prose carries the reading content; Section owns the title and description."
    >
      <Prose as="article">
        <p>
          This release groups the theme tokens by role. A component picks one material, one text
          role and one spacing step for each relationship, so screens built from them read as one
          system. See the <a href="#prose-upgrade">upgrade notes</a> before you adopt it.
        </p>
        <h2>What changed</h2>
        <ul>
          <li>
            Text roles: <code>body</code>, <code>secondary</code>, <code>caption</code> and{" "}
            <code>eyebrow</code>.
          </li>
          <li>
            Reading content takes the shared prose rhythm.
            <ul>
              <li>Chat messages and rendered markdown use the same rules.</li>
            </ul>
          </li>
          <li>Lines stop at the reading measure.</li>
        </ul>
        <blockquote>Arrange with Stack and Grid; read with Prose.</blockquote>
        <h3 id="prose-upgrade">Upgrade notes</h3>
        <p>Replace hand-styled paragraphs with Text, and long-form content with Prose.</p>
        <pre tabIndex={0} aria-label="Example">
          {"<Prose>\n  <h2>Overview</h2>\n  <p>Reading content…</p>\n</Prose>"}
        </pre>
        <hr />
        <table>
          <thead>
            <tr>
              <th>Role</th>
              <th>Use</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Text</td>
              <td>A line or two between components</td>
            </tr>
            <tr>
              <td>Prose</td>
              <td>Articles, notes and rendered markdown</td>
            </tr>
          </tbody>
        </table>
      </Prose>
    </Section>
  </Measure>
)