altitude-design 0.3.2 → 0.4.1

package/dist/guidance/components/FormattedNumber/README.md

@@ -0,0 +1,81 @@
+# FormattedNumber
+
+A number in a sentence or a table cell, formatted once: invoices, usage ("4.5 GB of 10 GB"), latency ("128 ms"), seats, error rates. `formatNumber()` gives the same text as a string, for `DataTable` columns and chart formatters.
+
+**Elevation.** A number is the record, so it lies flush in its line, in tabular figures, at no level. When the value changes, the old figure fades out over the new one (`dur-travel-2`) and the number takes a ground-level tint that decays over `dur-settle`. That's the afterglow without the lift, because a word in a line can't rise. It never counts up, as with `Stat`: counting delays the number for decoration.
+
+**Presets** (`format`):
+
+| `format` | value | shows |
+|---|---|---|
+| `number` (default) | any | `1,250` |
+| `currency` | minor units (cents) by default, as payment APIs send them | `€49.00` for `4900`. `minorUnits={false}` takes whole units. A currency with no minor unit (JPY) isn't divided. |
+| `bytes` | bytes | `4.5 GB`, in the largest unit that keeps it at 1 or more; `base={1024}` gives `4.2 GiB` |
+| `duration` | `unit` (default milliseconds) | `128 ms`, `1.6 min`: the largest unit that keeps it at 1 or more |
+| `percent` | a fraction | `1.2%` for `0.0123` with `maximumFractionDigits={1}` |
+| `compact` | any | `4.2K` |
+
+Every other `Intl.NumberFormat` option (`maximumFractionDigits`, `signDisplay`, `currencyDisplay`, …) passes through.
+
+**Accessibility.** It's a `<data value>` element carrying the raw value. When the text rounds or abbreviates the value (`4.2K`, `4.5 GB`), the exact value ("4,213", "4,512,000,000 bytes") is its `title`. Units whose symbols are ambiguous read aloud are spoken in words ("4.5 gigabytes", "128 milliseconds"). Changes aren't announced: put the number in a live region yourself if a change is something to hear. Under reduced motion there's no cross-fade, but the tint remains (it's colour, not travel). Under forced colours the tint is a `Highlight` outline.
+
+**Props:** `value`; `format`; `locale`; `currency`; `minorUnits`; `unit`; `base`; any `Intl.NumberFormat` option; `title`.
+
+**You provide:** the raw number and what it is. Format in one place, not with `toFixed` and string concatenation.
+
+```tsx
+<FormattedNumber value={4900} format="currency" currency="EUR" />      // €49.00
+<FormattedNumber value={4_512_000_000} format="bytes" />               // 4.5 GB
+<FormattedNumber value={128} format="duration" />                      // 128 ms
+<FormattedNumber value={0.123} format="percent" maximumFractionDigits={1} /> // 12.3%
+formatNumber(4213, { format: 'compact' })                              // "4.2K"
+```
+
+- Do pass amounts of money in minor units, as your payment provider sends them, or set `minorUnits={false}`.
+- Do use `formatNumber` for table columns and chart formatters, so a number reads the same everywhere.
+- Don't animate digits or count up to a new value.
+- Don't use it for a headline figure; that's a `Stat`.
+
+<!-- example: generated from build/previews.txt by build/previews.mjs. Edit the preview, not this section. -->
+## Example
+
+`FormattedNumber` as first used in its preview:
+
+```tsx
+import { FormattedNumber } from 'altitude-design';
+
+<FormattedNumber value={4900} format="currency" currency="EUR" locale="en-IE" />
+```
+
+The full preview, as rendered in Storybook and checked in CI (`fn`, `cap` are the preview page's own layout classes, not Altitude's):
+
+```tsx
+import * as React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, FormattedNumber } from 'altitude-design';
+
+const usage = [4_212_000_000, 4_512_000_000, 5_030_000_000];
+export default function App() {
+  const [i, setI] = React.useState(0);
+  React.useEffect(() => { const t = setInterval(() => setI((n) => (n + 1) % usage.length), 2600); return () => clearInterval(t); }, []);
+  return (
+    <div className="fn">
+      <dl>
+        <dt>Plan</dt><dd><FormattedNumber value={4900} format="currency" currency="EUR" locale="en-IE" /> a month</dd>
+        <dt>Storage</dt><dd><FormattedNumber value={4_512_000_000} format="bytes" /></dd>
+        <dt>Latency</dt><dd><FormattedNumber value={128} format="duration" /> · <FormattedNumber value={95_000} format="duration" /></dd>
+        <dt>Error rate</dt><dd><FormattedNumber value={0.0123} format="percent" maximumFractionDigits={1} /></dd>
+        <dt>Requests</dt><dd><FormattedNumber value={4213} format="compact" /></dd>
+        <dt>Seats</dt><dd><FormattedNumber value={1250} /></dd>
+      </dl>
+      <Card>
+        <CardHeader><CardTitle>Usage</CardTitle><CardDescription>Refreshes as files are uploaded</CardDescription></CardHeader>
+        <CardContent>
+          <p>You've used <FormattedNumber value={usage[i]} format="bytes" /> of <FormattedNumber value={10_000_000_000} format="bytes" />.</p>
+          <p className="cap">A changed value cross-fades and settles with a tint. It never counts up. Point at "4.2K" or a byte size for its exact value.</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+<!-- /example -->

package/dist/guidance/components/Heatmap/README.md

@@ -0,0 +1,116 @@
+# Heatmap
+
+A value per cell across two dimensions: load by hour and weekday, error rate by service and region, or activity by day over a year (`variant="calendar"`, as in GitHub's contributions). It renders inside a [`ChartContainer`](../ChartContainer/README.md), which gives it the frame, the readout, the keyboard path, the table view, loading and empty states.
+
+**Why it's flat.** The cells are the record, so they lie on the plot: flat fills, parted by a 2px gap of the plot's own colour and rounded at `radius-xs` (less on small cells, so a cell stays a square). No shadow, no wall, no sheen and no gradient. Amounts are carried by the **Amounts** signal's colour channel, the sequential ramp, never by height.
+
+**Steps, not a gradient.** Values are binned into two to seven steps (`bins={[0, 1, 4, 10]}` gives "0", "1–3", "4–9", "10+"), spread over `data-seq-1` to `data-seq-7`, so each colour is a class you can name and find in the legend. Zero is the lightest step. Without `bins`, counts get a step of their own for zero and even steps above it, and other values five to seven even steps. `scale="diverging"` uses `data-div-*` around `data-div-mid` for which side of `midpoint` (default 0) a value is on; without `bins` that's seven steps on round numbers, the middle one within a step of the midpoint.
+
+**No data.** A cell with no record, or a `null` value, has no fill and a 1px `line` outline, and says "No data". It isn't a well: it isn't waiting for anything.
+
+**The legend** is the steps as swatches, each with its range in words, under the cells (`legend={false}` to leave it out). Ranges say their unit once ("−0.5 to +0.5 pts").
+
+**Layout.** In the grid, columns fill the width and rows are as tall as a column is wide, up to 34px. In the calendar, a column is a week (`weekStart` 0, Sunday, or 1, Monday), months are named above the week each begins in, and Mon, Wed and Fri down the side. The plot is as tall as its cells need. Cells are at least 10px: narrower than that, the columns wrap into bands (a year into three at 360px; 24 hours into 00–11 and 12–23), each naming its rows and columns.
+
+**Reading a cell.** There's no crosshair in a grid, so the cell under the readout wears a 2px `ink` outline. The readout sits beside it: the place ("Tue, 14"), then the value keyed by its step's colour.
+
+**Without colour.** Under forced colours and in print, and with `patterns` on the container, each step also gets a pattern density (none, sparse dots, dense dots, hatching, crosshatch), so the ramp survives losing its colours; a diverging scale hatches its two sides in opposite directions. The values stay in the cell's name and the table view. With `contrast="more"` every cell has a 1px `ink` edge.
+
+**Motion.** A value change cross-fades the cell's fill over `dur-travel-1`; a whole refresh is one change, so in a `live` container it lights the "Updated" caption, not every cell. Under reduced motion it's instant.
+
+**Accessibility.** The keyboard path is one Tab stop; Enter goes from the summary straight to the cells (there's no series level), and Escape comes back. Arrows move cell to cell and stop at the edges; Home and End go to the start and end of the row, and with Ctrl (or Cmd) the grid's; Page Up and Page Down move a month in the calendar. Each cell is named by its row, its column, its value and its step: "Tuesday, 14:00, 312 requests, step 5 of 7." (rows and columns as `yFormat` and `xFormat` write them), or in the calendar "Thursday, Nov 27, 2025, 4 commits, step 3 of 4." A diverging cell also says its side ("below 0"). The focus ring is the cell's own box. Without a written `summary`, the generated one names the highest and lowest cells, how many have no data, and the steps. The table view has a row per cell with its step.
+
+**Props:** `data`, `value`; `x` and `y` for the grid, or `variant="calendar"` and `date`; `bins`, `scale`, `midpoint`; `xFormat` and `yFormat` for column and row names; `weekStart`; `legend`; `tooltip`.
+
+**Selecting and drilling.** `selected` and `onSelect` make cells a selection that cross-filters the rest of a dashboard; `drill` opens a level down inside a `Drilldown`. `selected` is the record or its id: `"14|Tue"` (x, then y) for a grid, `"2026-03-14"` for a calendar. The selected cell keeps its colour, the rest recede to 35%, and the frame says "Filtered to Tue, 14". See [ChartContainer](../ChartContainer/README.md), "Marks you can select or drill into".
+
+**Filtering in place.** `relevance={(d) => 'match' | 'miss' | undefined}` recedes misses to 35% where they stand.
+
+**You provide:** a `ChartContainer` whose `config` names the value key (its label and format), the records, and usually a `summary`.
+
+```tsx
+<ChartContainer config={{ count: { label: 'Commits' } }} title="Commits">
+  <Heatmap variant="calendar" data={commits} date="day" value="count" bins={[0, 1, 4, 10]} />
+</ChartContainer>
+
+<ChartContainer config={{ requests: { label: 'Requests' } }} title="Requests by hour">
+  <Heatmap data={load} x="hour" y="weekday" value="requests" />
+</ChartContainer>
+```
+
+- Do use five to seven steps; more can't be told apart, especially in small cells.
+- Do give zero its own step when zero means "nothing happened".
+- Do use `scale="diverging"` only when the midpoint means something (no change, a target).
+- Don't use a heatmap to compare a handful of values; that's `BarChart`.
+- Don't encode a second measure in cell size or a glow; it's one value per cell.
+
+<!-- example: generated from build/previews.txt by build/previews.mjs. Edit the preview, not this section. -->
+## Example
+
+`Heatmap` as first used in its preview:
+
+```tsx
+import { Heatmap } from 'altitude-design';
+
+<Heatmap variant="calendar" data={commits} date="day" value="count" bins={[0, 1, 4, 10]} />
+```
+
+The full preview, as rendered in Storybook and checked in CI (`hm`, `wide` are the preview page's own layout classes, not Altitude's):
+
+```tsx
+import * as React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, ChartContainer, Heatmap } from 'altitude-design';
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+// Requests per hour: a working-day hump, quieter weekends, and a Tuesday-afternoon peak.
+const load = days.flatMap((weekday, w) => Array.from({ length: 24 }, (_, hour) => {
+  const day = Math.max(0, Math.sin(((hour - 6) / 15) * Math.PI));
+  const base = (w < 5 ? 300 : 110) * day + 20 + ((hour * 7 + w * 13) % 17);
+  return { weekday, hour, requests: Math.round(base + (w === 1 && hour >= 13 && hour <= 15 ? 160 : 0)) };
+}));
+// Commits per day for a year, with quiet weekends, a holiday gap and a few busy weeks.
+const start = Date.UTC(2025, 9, 27);
+const commits = Array.from({ length: 365 }, (_, i) => {
+  const t = start + i * 864e5, wd = new Date(t).getUTCDay(), r = (i * 37 + 11) % 23;
+  const busy = (i > 120 && i < 140) || (i > 300 && i < 312);
+  const n = wd === 0 || wd === 6 ? (r < 18 ? 0 : r - 17) : i > 56 && i < 68 ? 0 : busy ? 6 + (r % 9) : r < 5 ? 0 : Math.round(r / 3);
+  return { day: new Date(t).toISOString().slice(0, 10), count: n };
+});
+const services = ['Checkout', 'Search', 'Accounts', 'Media', 'Payments'];
+const regions = ['US', 'EU', 'APAC', 'LATAM'];
+// Error rate against last week, in points: below zero is better.
+const change = services.flatMap((service, s) => regions.map((region, r) => ({ service, region, delta: s === 3 && r === 3 ? null : Math.round((Math.sin(s * 2.1 + r * 1.3) * 1.6 + (s === 4 && r === 1 ? 1.8 : 0)) * 10) / 10 })));
+const pts = (v) => (v > 0 ? '+' : v < 0 ? '−' : '') + Math.abs(v).toFixed(1) + ' pts';
+export default function App() {
+  const [cell, setCell] = React.useState(null);
+  return (
+    <div className="hm">
+      <Card className="wide">
+        <CardHeader><CardTitle id="h1">Commits</CardTitle><CardDescription>A year, a cell per day: zero is the lightest step, and each step says its range</CardDescription></CardHeader>
+        <CardContent>
+          <ChartContainer aria-labelledby="h1" config={{ count: { label: 'Commits' } }}>
+            <Heatmap variant="calendar" data={commits} date="day" value="count" bins={[0, 1, 4, 10]} />
+          </ChartContainer>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader><CardTitle id="h2">Requests by hour</CardTitle><CardDescription>Load by weekday and hour, with the table view</CardDescription></CardHeader>
+        <CardContent>
+          <ChartContainer aria-labelledby="h2" views config={{ requests: { label: 'Requests' } }} xLabel="Weekday">
+            <Heatmap data={load} x="hour" y="weekday" value="requests" xFormat={(h) => String(h).padStart(2, '0')} />
+          </ChartContainer>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader><CardTitle id="h3">Error rate against last week</CardTitle><CardDescription>{cell ? `${cell.service} in ${cell.region}: select it again to clear` : 'scale="diverging": better below zero. Select a cell'}</CardDescription></CardHeader>
+        <CardContent>
+          <ChartContainer aria-labelledby="h3" config={{ delta: { label: 'Change', format: pts } }}>
+            <Heatmap data={change} x="region" y="service" value="delta" scale="diverging" selected={cell} onSelect={setCell} />
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+<!-- /example -->

package/dist/guidance/components/HoldButton/README.md

@@ -0,0 +1,48 @@
+# HoldButton
+
+Commits a consequential action by pushing it through the ground: hold until it sinks into a trench.
+
+At rest it's a level-2 button (danger by default). While held, it sinks steadily from its wall into a `trench` over `dur-hold`, while a fuse along its bottom edge burns across in the label colour. Let go early and it springs back on `ease-settle`. A live region says "Keep holding to confirm".
+
+**When the hold completes, it's final.** `onConfirm` is called once, the button settles flat on the ground, shows `doneLabel` and can't be pressed again: the action is now part of the record. It stays focusable (it uses `aria-disabled`, not `disabled`) so keyboard focus isn't lost. For actions that can be repeated, set `repeatable` and the button re-arms after a moment.
+
+**It never changes width.** Its label, `holdingLabel` and `doneLabel` are laid out in the same place and only the current one shows, so the button is as wide as the longest of them from the start and nothing beside it moves when it completes.
+
+This is a design friction: a small, deliberate obstacle in front of an action that's hard to undo, cheaper than a confirmation dialog and harder to trigger by accident than a click.
+
+**You provide:** the label ("Hold to delete"), `onConfirm`, optional `holdingLabel` and `doneLabel` (say what happened: "Project deleted"), `variant` (`danger` or `primary`), `duration` in ms, `repeatable`.
+
+- Use it for destructive or irreversible actions where the person already knows what will happen.
+- Don't use it when the consequence needs explaining; that's a `Dialog`.
+
+<!-- example: generated from build/previews.txt by build/previews.mjs. Edit the preview, not this section. -->
+## Example
+
+`HoldButton` as first used in its preview:
+
+```tsx
+import { HoldButton } from 'altitude-design';
+
+<HoldButton onConfirm={() => {}} holdingLabel="Keep holding…" doneLabel="Project deleted">Hold to delete</HoldButton>
+```
+
+The full preview, as rendered in Storybook and checked in CI (`col`, `row`, `cap` are the preview page's own layout classes, not Altitude's):
+
+```tsx
+import * as React from 'react';
+import { HoldButton } from 'altitude-design';
+
+export default function App() {
+  const [n, setN] = React.useState(0);
+  return (
+    <div className="col">
+      <div className="row">
+        <HoldButton onConfirm={() => {}} holdingLabel="Keep holding…" doneLabel="Project deleted">Hold to delete</HoldButton>
+        <HoldButton variant="primary" duration={700} repeatable onConfirm={() => setN(n + 1)} doneLabel="Published">Hold to publish</HoldButton>
+      </div>
+      <p className="cap">Press and hold (or hold Space). The button sinks below the ground as the fuse burns; let go early and it springs back. Once done it lies flat and can't be pressed again, unless it's <code>repeatable</code> (published {n}×).</p>
+    </div>
+  );
+}
+```
+<!-- /example -->

package/dist/guidance/components/HoverCard/README.md

@@ -0,0 +1,71 @@
+# HoverCard
+
+A richer preview of what a link or a face points to: who someone is, what a project holds. It rises from its trigger after the pointer rests on it.
+
+**Elevation.** Level 3, like Popover: `surface-floating`, `elev-3`, rising 6px from 96% scale out of its trigger. It's something you glance at, above the page and gone as soon as you move on, which is what level 3 means. Unlike a Tooltip it can hold more than a label (an avatar, a sentence, a few numbers), so it's a card with `radius-lg` and `space-4` padding.
+
+**Timing is the design.** It opens only after the pointer has rested on the trigger for 400ms (hover intent), so passing over a paragraph of names doesn't set off a string of cards. It waits 250ms after the pointer leaves, and an invisible bridge spans the gap between trigger and card, so you can move into it. It shares Tooltip's warm-up: once a card or tooltip has shown, a neighbour opens at once instead of waiting again. Only one card is open at a time; moving to a neighbour hands over. Under reduced motion it fades without travelling.
+
+**Keyboard and touch.** Keyboard focus on the trigger opens it after the same pause; Tab continues into any links inside it; Escape closes it and leaves focus on the trigger. On touch there's no hover, so it never opens: a tap just follows the link.
+
+**Supplementary, always.** Nothing may live only in a HoverCard. The trigger must work on its own (the link goes to the profile; the profile has everything the card showed), because touch users never see the card and screen readers aren't told about it. In forced colours it has the floating tier's 2px border.
+
+**On a narrow screen.** It opens where its `side` and `align` put it, then shifts sideways to stay 8px inside the screen, and it's never wider than the screen less 16px.
+
+**You provide:** a `trigger` (a link or an avatar with its own job) and the card's content: a heading line, one or two sentences, perhaps a few numbers. Optionally `side`, `align`, `openDelay` and `closeDelay`.
+
+- Do keep it to a glance: if people need to act on it, it's a Popover (click to open) or a page.
+- Don't put the only copy of anything in it, and don't put a form in it.
+
+<!-- example: generated from build/previews.txt by build/previews.mjs. Edit the preview, not this section. -->
+## Example
+
+`HoverCard` as first used in its preview:
+
+```tsx
+import { HoverCard } from 'altitude-design';
+
+<HoverCard defaultOpen={true} trigger={<a href="#mara">Mara Quist</a>}>
+  <Card p={people.mara} />
+</HoverCard>
+```
+
+The full preview, as rendered in Storybook and checked in CI (`who`, `bio`, `stats`, `col`, `para`, `cap` are the preview page's own layout classes, not Altitude's):
+
+```tsx
+import { Avatar, HoverCard } from 'altitude-design';
+
+const people = {
+  mara: { name: "Mara Quist", role: "Platform \xB7 Lisbon", bio: "Owns deploys and the edge runtime. Usually reviews within the hour.", s: [42, 6, 3] },
+  jon: { name: "Jon Reyes", role: "Docs \xB7 Lima", bio: "Writes the release notes and keeps the changelog honest.", s: [18, 2, 5] }
+};
+const Card = ({ p }) => <>
+  <div className="who">
+    <Avatar name={p.name} size={40} status="active" />
+    <div><b>{p.name}</b><span>{p.role}</span></div>
+  </div>
+  <p className="bio">{p.bio}</p>
+  <div className="stats">
+    <span><b>{p.s[0]}</b>{" merged"}</span>
+    <span><b>{p.s[1]}</b>{" open"}</span>
+    <span><b>{p.s[2]}</b>{" projects"}</span>
+  </div>
+</>;
+export default function App() {
+  return <div className="col" style={{ gap: 18 }}>
+  <p className="para">
+    {"Merged by "}
+    <HoverCard defaultOpen={true} trigger={<a href="#mara">Mara Quist</a>}>
+      <Card p={people.mara} />
+    </HoverCard>
+    {" two hours ago, after review from "}
+    <HoverCard trigger={<a href="#jon">Jon Reyes</a>}><Card p={people.jon} /></HoverCard>
+    .
+  </p>
+  <p className="cap" style={{ marginTop: 160 }}>
+    Rest the pointer on a name; once one card has shown, the other opens at once. Focus a link with Tab to open it from the keyboard; Escape closes it.
+  </p>
+</div>;
+}
+```
+<!-- /example -->

package/dist/guidance/components/InlineCitation/README.md

@@ -0,0 +1,56 @@
+# InlineCitation
+
+Numbered source markers in a grounded answer ("…renews monthly [2]"), with a preview of each source on hover or focus, and `Sources`, the list at the end.
+
+**Elevation: a citation is part of the record.**
+- **The marker** is a small flush plate with a mono number, raised a little off the baseline like a superscript. It's `ChartAnnotation`'s build: a flush `Badge` plate, and only one that acts lifts. It acts, so it **lifts one level when pointed at**.
+- **The preview** is a `HoverCard` at level 3: "Source 2 · example.com", the title (linked), and the excerpt the answer relied on.
+- **Sources** is a flush ordered list under a heading. Each entry is a marker's destination, highlighted when you arrive.
+- **An unverified source** keeps its plate, adding a `caution` mark and "Unverified source" in words.
+
+**Accessibility.** The marker is a link named "Source 2: Billing FAQ", never "[2]". Tab reaches it, the preview opens on focus as well as hover, and Enter follows it (to its entry in Sources by default, or your `href`). Under forced colours the plate has a `LinkText` border. Under `contrast="more"` its border is `line-control`.
+
+**Props:** `InlineCitation`: `index`, `source` (`{ title, url?, excerpt?, unverified? }`), `href`, `idPrefix`. `Sources`: `items`, `heading`, `idPrefix`.
+
+**You provide:** the sources, numbered in the order the answer cites them. When there are several answers on a page, give each its own `idPrefix`.
+
+```tsx
+<p>Plans renew monthly <InlineCitation index={2} source={{ title: 'Billing FAQ', url, excerpt }} />.</p>
+<Sources items={sources} />
+```
+
+- Do include the excerpt the answer relied on.
+- Do mark sources you couldn't verify.
+- Don't render citations as bare numbers or superscripts with no name.
+
+<!-- example: generated from build/previews.txt by build/previews.mjs. Edit the preview, not this section. -->
+## Example
+
+`InlineCitation` as first used in its preview:
+
+```tsx
+import { InlineCitation } from 'altitude-design';
+
+<InlineCitation index={1} source={sources[0]} />
+```
+
+The full preview, as rendered in Storybook and checked in CI (`ic` is the preview page's own layout class, not Altitude's):
+
+```tsx
+import { InlineCitation, Sources } from 'altitude-design';
+
+const sources = [
+  { title: 'Billing FAQ', url: 'https://help.example.com/billing/faq', excerpt: 'Annual plans can be refunded in full within 30 days of purchase.' },
+  { title: 'Plans and pricing', url: 'https://example.com/pricing', excerpt: 'Monthly plans renew on the same day each month.' },
+  { title: 'Forum post: “Refunds after 30 days?”', url: 'https://community.example.com/t/4821', unverified: true },
+];
+export default function App() {
+  return (
+    <div className="ic">
+      <p>Annual plans can be refunded in full within 30 days<InlineCitation index={1} source={sources[0]} />. Monthly plans renew on the same day each month<InlineCitation index={2} source={sources[1]} />, and some customers report partial refunds after that<InlineCitation index={3} source={sources[2]} />.</p>
+      <Sources items={sources} />
+    </div>
+  );
+}
+```
+<!-- /example -->