@deriv-com/dds-marketing 1.1.1 → 1.1.3

package/.llm/components/subdomainnavbar.md

@@ -2,6 +2,10 @@
 
 # SubdomainNavbar
 
+The top bar for a subdomain such as docs or a product surface.
+
+## Why it is built this way
+
 The bar across the top of a subdomain — a documentation site, a playground, a product surface that lives beside the marketing site rather than inside it. Three regions in one line: the mark and what the product is called, the places that subdomain has, and what a reader reaches for at the far end.
 
 It is the plain sibling of Navbar, and the difference is a decision rather than an omission. A marketing bar gathers into a pill as the page moves, because a marketing page is a thing a reader travels down and the bar is asking to stay with them. A subdomain is somewhere a reader works: they are not being sold anything, the chrome should stop asking for attention, and a bar that rearranged itself while somebody read documentation would be motion answering nothing. So this one is flat, and stays exactly where it was put.
@@ -322,7 +326,7 @@ What a reader reaches for rather than navigates to. A real bar carries several o
 ```tsx
 import { Button, ButtonIcon, SubdomainNavbar } from '@deriv-com/dds-marketing'
 import { DerivCoralWordmark } from '@deriv-com/quill-logos-web'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // What the subdomain wants pressed
 <SubdomainNavbar label="Main" menuLabel="Menu" closeLabel="Close" brand={<DerivCoralWordmark />} utilities={<Button size="md" href="/dashboard">Dashboard</Button>}>{navbaritems}</SubdomainNavbar>

package/.llm/components/tab.md

@@ -2,6 +2,10 @@
 
 # Tab
 
+One option in a TabList.
+
+## Why it is built this way
+
 One item in a strip, naming a version of what the page is already about. It cannot stand on its own: selected means selected against something, and a tab with no siblings is a heading that highlights.
 
 It is a control and not a link. Pressing it changes which slice of this page is showing — it does not go anywhere, there is no route behind it, and nothing about the page is different afterwards except which of two comparable things the reader is looking at. That is the whole difference from Product's Tab, which names a facet of a view an app holds state for.
@@ -257,7 +261,7 @@ Solid when current, regular otherwise — the package rule, and the call site’
 
 ```tsx
 import { Tab } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, GlobeSolidIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, GlobeSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // Current — solid
 <Tab value="web" label="Web" selected icon={<GlobeSolidIcon />} />
@@ -286,7 +290,7 @@ One mark at most, after the name. `content` names which kind it is, so a node le
 
 ```tsx
 import { Badge, Tab } from '@deriv-com/dds-marketing'
-import { ArrowUpRightRegularIcon } from '@deriv-com/quill-icons-web'
+import { ArrowUpRightRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // A badge — arguing for the tab that is not current
 <Tab value="yearly" label="Yearly" content="badge" badge={<Badge label="Save 20%" />} />

package/.llm/components/table.md

@@ -2,6 +2,10 @@
 
 # Table
 
+Shows structured data in rows and columns.
+
+## Why it is built this way
+
 Structured data in rows and columns, where every row has the same shape. It owns what the whole table shares — a row's air, the rule between rows, how the columns take their widths — and none of what a cell holds, which is the page's to compose.
 
 It remembers nothing. Which column is sorted outlives a render, so it arrives as a hook beside this component; the toolbar above and the footer beneath are the page's too, on the same surface. None of the three is a prop, and a table that grew one would hold a second copy of what the page already has.

package/.llm/components/tablebody.md

@@ -2,6 +2,10 @@
 
 # TableBody
 
+The data rows of a Table.
+
+## Why it is built this way
+
 The rows of data, under the header. It is where the table's rules reach the rows: a line belongs between two data rows and nowhere else, so the section that holds only data is the one that hands them out.
 
 ## Use when

package/.llm/components/tablecell.md

@@ -2,6 +2,10 @@
 
 # TableCell
 
+One value in a table row.
+
+## Why it is built this way
+
 One value in a row, under the column that names it. It is a slot: what goes in is the page's to compose, which is what lets a cell hold a badge, a link or a control rather than only text. What it decides is where the value sits in the column and whether its digits line up with the ones above and below.
 
 ## Use when

package/.llm/components/tablehead.md

@@ -2,6 +2,10 @@
 
 # TableHead
 
+The header rows of a Table.
+
+## Why it is built this way
+
 The column names, above the data, and the filter row where there is one. It exists as a component rather than a wrapper because a screen reader announces a column's header before every value under it — which is the whole of how a reader knows what a number means without looking it up — and that only happens if the header is marked up as one rather than styled to look like one.
 
 A second row is allowed and a third is not. The second is the filter row: one control per column, sitting under the name of the column it narrows, which is the whole reason it is in here rather than in a toolbar above the table — a toolbar has to say which column each control acts on, and a row under the names has already said it. It gives up the inset above it, so the controls sit under the names rather than a gap of two insets away — the head is one thing, and each of its rows carrying its own air made it read as two. It is cells rather than header cells, because a control is not the name of a column and a screen reader announcing it as one would read a search box out before every value beneath it.

package/.llm/components/tableheadercell.md

@@ -2,6 +2,10 @@
 
 # TableHeaderCell
 
+The name of one table column.
+
+## Why it is built this way
+
 The name of a column, announced before every value under it. That is the whole of why it is a component rather than a styled cell: a screen reader reads the header before each cell in the column, which is how a reader knows what a number means without looking it up — and it only happens if the header is a header in the markup.
 
 Where the column can be sorted, the header holds the control that sorts it. A button rather than a click handler on the cell, because sorting is an action: it has to be reachable by keyboard, announced as pressable, and able to say which way the column is currently ordered.

package/.llm/components/tablerow.md

@@ -2,6 +2,10 @@
 
 # TableRow
 
+One row of a Table.
+
+## Why it is built this way
+
 One row of a table: the cells that answer the same questions in the same order as every other row. It owns the rule under it and whether it reads as picked, and nothing about what any cell holds.
 
 Being picked is drawn here rather than on the checkbox that sets it, because selection is a fact about the row: a reader scanning a table needs to see which rows are in the set without checking every box in the first column.

package/.llm/components/tablist.md

@@ -2,6 +2,10 @@
 
 # TabList
 
+Switches between views of the same content.
+
+## Why it is built this way
+
 A strip of comparable versions of one thing, one of them showing at a time. What it says is that these are the same offer seen differently — a billing period, a platform, a market class — rather than places the site has. Two at least: selected means selected against something, and a strip of one is a heading that highlights.
 
 It holds which tab is current and nothing else. The content each tab reveals belongs to the page, because a marketing page already has all of it written and the strip is only deciding which slice shows. That is why there is no panel here and no ARIA tab role: role="tab" is a promise about a tabpanel this component cannot see, and a promise it cannot keep is worse than the group it actually is.

package/.llm/components/teamgrid.md

@@ -2,6 +2,10 @@
 
 # TeamGrid
 
+A grid of the people behind a company, with photo, name and role.
+
+## Why it is built this way
+
 A section that sets out the people behind a company: a heading, and a grid of people under it — each a square photograph, their name, what they do and, where they have one, a link to a profile of theirs elsewhere. The first few show at once, and a button under the grid shows the rest and hides them again.
 
 One column on a phone, two from the fold and four at full width, so the first four people are one row on a desktop and the button under that row is what makes the list longer.

package/.llm/components/testimonialrow.md

@@ -2,6 +2,10 @@
 
 # TestimonialRow
 
+An overall rating over a scrollable row of customer reviews.
+
+## Why it is built this way
+
 A section that lets a review service's numbers back the page: a heading with the overall rating under it — and a way to where the reviews were collected — over a row of rated reviews the reader moves along, each a short review under its star rating with the reviewer's name, and two arrows under the row that step it a card at a time. Several are in view at once and nothing moves on its own.
 
 The reference design's Testimonial in its review-row form. It names no review platform: the score, its wording and where it links are the page's, so the same section serves whichever service the reviews came from.

package/.llm/components/testimonialslider.md

@@ -2,6 +2,10 @@
 
 # TestimonialSlider
 
+Customer quotes shown one at a time, each with who said it.
+
+## Why it is built this way
+
 A section that lets the people who use the product say what it did for them: a heading over one quote at a time, in a card, with the name of who said it. Two or more quotes rotate in place — one in view, the next fading in where it stood — and dots show where the reader is and move to any quote pressed.
 
 The reference design's Testimonial in its quote form. Its review-row form — rated reviews collected by a review service — is TestimonialRow.

package/.llm/components/textarea.md

@@ -2,6 +2,10 @@
 
 # TextArea
 
+A field for a longer message, such as on a contact form.
+
+## Why it is built this way
+
 A field for what a visitor wants to say in their own words — the message on a contact form, the 'tell us about your project' on an enquiry, the reason someone is applying to partner. One value still, like TextInput, but a value with no shape the page can guess at.
 
 That is the whole reason it is not TextInput with a taller box. A single line shows a reader a sliver of what they wrote and no way to read it back, and the one place they most want to check themselves is the paragraph they are about to send a stranger. So it grows as they type, up to a limit, and past that limit it scrolls rather than pushing the submit button off the screen.

package/.llm/components/textinput.md

@@ -2,6 +2,10 @@
 
 # TextInput
 
+A single-line text field.
+
+## Why it is built this way
+
 One line of text a visitor types before they are a customer. A marketing page asks for very little and has no standing to ask for more: an email for a newsletter, a name and a message on a contact form, a work address to book a demo. Every one of those is a stranger deciding whether the thing on offer is worth handing something over for, and the field is where that decision gets made or lost.
 
 That is the whole difference from a field in an application, and it is why this is not Product's TextInput with fewer props. An app's field is filled by someone who has already signed up, inside a task they have committed to, and can afford to ask for an account number in a particular format. A landing page's field is filled by someone with no account, no stake, and a back button — so it asks for one thing, says what it will do with it, and is legible enough at a glance that nobody has to work out what goes in it.
@@ -438,7 +442,7 @@ Ornaments and furniture, none of which is the label. A glyph names nothing and a
 
 ```tsx
 import { TextInput } from '@deriv-com/dds-marketing'
-import { EnvelopeRegularIcon, LockRegularIcon } from '@deriv-com/quill-icons-web'
+import { EnvelopeRegularIcon, LockRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // prefix — a head you should not have to type
 <TextInput label="Website" type="url" prefix="https://" placeholder="example.com" />

package/.llm/components/textscroll.md

@@ -2,6 +2,10 @@
 
 # TextScroll
 
+One large statement whose words brighten as the reader scrolls.
+
+## Why it is built this way
+
 A full-width section holding one large statement — a mission, a brand message — whose words brighten one after another as the reader scrolls past, from dimmed to full strength, so the sentence is read at the pace the page is moved.
 
 The reference design's TextScroll. The reveal is scrubbed by the scroll itself rather than timed: each word runs down the section's own view timeline a step behind the one before it, forward as the reader scrolls down and back again as they scroll up, and stands still while the page does. The sentence is in the page's first HTML as one paragraph of real words and spaces, so a reader with no script, a browser with no scroll timeline and a reader who asked for less movement all get the whole statement at full strength from the start; the dim is only ever something the scroll applies.

package/.llm/components/tiers.md

@@ -2,6 +2,10 @@
 
 # Tiers
 
+A row of partnership tiers, each with what it offers and how to reach it.
+
+## Why it is built this way
+
 A partnership-tier section: a centred heading over an ordered row of tiers, each a medal, a name and the stage it stands for, a card stating what the tier gives, and the bar a partner clears to reach it — with an optional way on under the row.
 
 It shows how rewards grow with performance, Bronze to Platinum, and the order is the argument: each tier is a step up from the one before it. The tiers are a real ordered list, so the count and each tier's place reach a screen reader too. At full width they share one row and a rule runs through the medals, joining them into one track; below that they fall to two columns and then one, where each tier's words start at the edge.

package/.llm/components/typography.md

@@ -2,6 +2,10 @@
 
 # Typography
 
+Sets text in one of the type roles.
+
+## Why it is built this way
+
 Copy, set in one of the page's type roles. It is the component that finally separates what a line of text is in the document from how large it is drawn — `as` says the first and `variant` says the second, and neither implies the other.
 
 That separation is the whole reason it exists. Every heading role in this package carries the same sentence — a size, not an instruction — because a page that wants a hero-sized line reaches for h1 and gets an <h1>, and the second one on the page is a document with two top-level headings. Here the scale is a prop and the element is a different prop, so a section heading set at hero scale is `as="h2" variant="h1"` and says exactly that.

package/.llm/digest/accordion.md

@@ -2,7 +2,7 @@
 
 # Accordion
 
-A stack of rows whose headings stay and whose detail is put away until the reader asks for it. …
+A stack of headings whose detail expands when the reader asks for it
 
 `import { Accordion } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/accordionitem.md

@@ -2,7 +2,7 @@
 
 # AccordionItem
 
-One row of an Accordion: a heading that is always there, and the detail under it that is not. …
+One row of an Accordion: a heading that stays, and detail that expands
 
 `import { AccordionItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/aspectratio.md

@@ -2,7 +2,7 @@
 
 # AspectRatio
 
-A box that holds one shape whatever is put in it, so a page reserves the room a picture will take before the picture arrives. …
+Holds its content to a fixed shape and reserves the space before it loads
 
 `import { AspectRatio } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/awards.md

@@ -2,7 +2,7 @@
 
 # Awards
 
-A section of social proof that lists the industry awards a company has won, each a badge between two laurels: a laurel, the award's name and its issuer, and the same laurel mirrored. …
+Lists the industry awards a company has won, each framed between two laurels
 
 `import { Awards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/background.md

@@ -2,7 +2,7 @@
 
 # Background
 
-A ground a section or a block sits on, painted with a pattern rather than a flat fill — a halftone, an aurora, a mesh, a rule grid or rings. …
+A patterned ground for a section to sit on
 
 `import { Background } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/badge.md

@@ -2,7 +2,7 @@
 
 # Badge
 
-A short word marking something as new, chosen or reduced. …
+A short label marking something as new, chosen or reduced
 
 `import { Badge } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/bottomsheet.md

@@ -2,7 +2,7 @@
 
 # BottomSheet
 
-A panel that rises from the bottom edge to hold a single focused task on small screens. …
+A panel that rises from the bottom edge for one focused task on small screens
 
 `import { BottomSheet } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/breadcrumb.md

@@ -2,7 +2,7 @@
 
 # Breadcrumb
 
-The trail of ancestors above the current page on a marketing site, showing the visitor where they are in the site hierarchy. …
+Shows where the current page sits in the site, with links back up
 
 `import { Breadcrumb } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/breadcrumbitem.md

@@ -2,7 +2,7 @@
 
 # BreadcrumbItem
 
-One level in a Breadcrumb on a marketing site. It renders either a link back to that level or, for the level the visitor is already on, plain text marked as the current page. …
+One level in a Breadcrumb
 
 `import { BreadcrumbItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/button.md

@@ -2,7 +2,7 @@
 
 # Button
 
-Drives a visitor toward a conversion goal — a signup page, a pricing page, a demo booking — or performs the one action a section asks for, such as sending a newsletter form or opening a video. …
+Triggers the one action a section asks for, such as signing up
 
 `import { Button } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/buttonicon.md

@@ -2,7 +2,7 @@
 
 # ButtonIcon
 
-One press carried by a glyph alone, in the space a label would need. …
+Triggers an action with an icon alone
 
 `import { ButtonIcon } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/card.md

@@ -2,7 +2,7 @@
 
 # Card
 
-A surface that holds content belonging together. …
+A surface that groups related content
 
 `import { Card } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/cardbody.md

@@ -2,7 +2,7 @@
 
 # CardBody
 
-Everything a card holds: the words inset from its edges and the picture that reaches them, in one region. The surface around it keeps a fill and a corner and nothing else. …
+The content area of a Card, holding its text and picture
 
 `import { CardBody } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/cardbutton.md

@@ -2,7 +2,7 @@
 
 # CardButton
 
-A card that responds to a press. …
+A card that acts on press
 
 `import { CardButton } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/checkbox.md

@@ -2,7 +2,7 @@
 
 # Checkbox
 
-Records a single on-or-off choice that is submitted with the form around it rather than applied the moment it is ticked
+Records an on-or-off choice that is submitted with its form
 
 `import { Checkbox } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/comparisoncards.md

@@ -2,7 +2,7 @@
 
 # ComparisonCards
 
-A section that sets two to four options side by side under a heading, each a card of its own that repeats the same short rows — a label and this option's value — so a reader compares the options line by line: Spot against Futures, one account type against another. …
+Sets two to four options side by side as cards, so readers compare them row by row
 
 `import { ComparisonCards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/comparisontable.md

@@ -2,7 +2,7 @@
 
 # ComparisonTable
 
-A comparison-table section for short, fixed column sets. It renders a rounded card with a light header row, horizontal dividers only, a bold first-column label, and two or three value columns. …
+Compares a short, fixed set of options in a table
 
 `import { ComparisonTable } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/ctabanner.md

@@ -2,7 +2,7 @@
 
 # CtaBanner
 
-A full-bleed coral band carrying one short promotion and the action it asks for — the strip that breaks a long page with the one thing the page wants done, or closes it. …
+A full-bleed band with one short promotion and the action it asks for
 
 `import { CtaBanner } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/ctabannerslider.md

@@ -2,7 +2,7 @@
 
 # CtaBannerSlider
 
-CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating between two or three short promotions. …
+A full-bleed promotional band that rotates between two or three offers
 
 `import { CtaBannerSlider } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/datatable.md

@@ -2,7 +2,7 @@
 
 # DataTable
 
-A full-width data-table section for instrument and market-style listings. …
+A full-width table for instrument and market listings
 
 `import { DataTable } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/divider.md

@@ -2,7 +2,7 @@
 
 # Divider
 
-A rule between things, and the quietest way to say that what is on one side of it belongs to a different group from what is on the other. …
+A rule that separates one group of content from another
 
 `import { Divider } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/downloadbanner.md

@@ -2,7 +2,7 @@
 
 # DownloadBanner
 
-A section promoting the app's downloads: a card holding a heading and the stores' own badges, each a link to the product in that store. …
+Promotes the app with a heading and links to each app store
 
 `import { DownloadBanner } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/dropdownmenu.md

@@ -2,7 +2,7 @@
 
 # DropdownMenu
 
-A button that opens a short set of destinations. Pressing one goes somewhere and the menu shuts — it holds no value and reports no answer, so there is nothing about it to find on reopening. …
+A button that opens a short list of links
 
 `import { DropdownMenu } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/estimator.md

@@ -0,0 +1,66 @@
+<!-- GENERATED from estimator.contract.json. Do not edit. -->
+
+# Estimator
+
+Sets the page's own fields beside the figures worked out from them: a trading calculator, a converter, an income estimate
+
+`import { Estimator } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A page lets a reader work something out before they act — a margin, a pip value, a swap charge, a conversion, an income estimate
+- The figures change as the reader types or picks, and should be announced as they do
+- The same tool appears on several pages in several forms — the margin, pip and swap calculators are one layout with different fields and figures
+
+## Something else, when
+
+- The figures are fixed facts rather than the result of anything the reader enters → **Stats**
+- Options are compared side by side rather than worked out from an input → **ComparisonCards**
+- The tool is a form that sends something — a sign-up, a contact request → **FeatureSplit**
+
+## Never
+
+- Fetching or calculating anything. The block has no data source and no formula: a page that wants live prices or a margin computes them and passes the figures in, so the block stays the same on every page and in every test
+- A form that submits. Nothing here is sent anywhere; the way onward is a link or a button to the page that does the real thing
+- A table of many figures. Past six or so results the panel stops being an answer and becomes a listing, which is what DataTable is for
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **layout** `enum` · default "stacked" — How the heading and the tool share the section at full width. On a phone both are one column whichever is chosen: the heading, then the card, the inputs above the results
+  - `stacked` — The default. The heading centred above a wide card, the inputs beside the results — a calculator with several fields and several figures, where the two panels each need room
+  - `split` — The heading and a few lines beside the card, the inputs above the results inside it — a compact tool a page introduces in its own words, a converter or a single estimate
+  - never: Varying between two tools on one page. Pick the layout the tool's size calls for, and the page reads as one system
+- **title** `string` · required — Always. What the tool works out, in a few words — 'Trading calculator', 'Buy crypto in seconds', 'Estimate your earnings'
+  - never: Instructions. How to use the tool is the fields' own labels, not the heading
+- **description** `string` · optional — A line or two under the title saying what the figures are for or where they come from — 'Live prices, updated every few seconds'
+  - never: A disclaimer the results depend on. That is a result's `note`, read beside the figure it qualifies
+- **inputsLabel** `string` · optional — A heading over the inputs panel, where the two panels need naming — 'Calculator' over the fields and 'Results' over the figures. Leave both out for a tool whose fields name themselves
+  - never: One panel only. Name both or neither
+- **inputs** `node` · required — Always. The fields the reader fills in — Select, TextInput, SearchInput, SegmentedControl, a slider — in the order they are filled. The page owns their values and works the results out from them
+  - never: A submit button. The results update as the fields change; the way onward is `action`
+- **inputActions** `node` · optional — A tool that works its figures out when asked rather than as the reader types — a calculation too slow or too costly to run on every keystroke, or one where half-filled fields would show figures that mislead. …
+  - never: A tool whose figures already follow the fields. A button that does what typing already did is a step the reader has to find and press for nothing
+- **onCalculate** `callback` · optional — Whenever inputActions holds a Calculate button: Enter in any of the fields calls it, as the button's own press does — wire the button's onClick to the same function. …
+  - never: Sending anything. The form never leaves the page; a tool that submits to a server is a form section, not this
+- **resultsLabel** `string` · optional — A heading over the results panel, with inputsLabel — 'Results', 'You receive'
+  - never: One panel only. Name both or neither
+- **results** `data` · required — The figures the inputs produce, in reading order — a `label`, a `value` written exactly as it is to be read, and an optional `note`. Pass an empty list until the inputs are complete, and the panel shows `emptyMessage` instead. …
+  - never: A value the page has not worked out. Pass nothing rather than a placeholder figure: a wrong number on a trading page is worse than none
+- **emptyMessage** `string` · optional — What the results panel says before there are figures to show — 'Choose an instrument to see the results'. Translate it with the page
+  - never: An error. A failed feed is the page's to say, in a result's note or its own message
+- **action** `node` · optional — The one thing a reader does once they have their figures — 'Open an account', 'Trade now', 'Become a partner'. Under the results, where the reader's eye already is
+  - never: More than one action. One tool, one next step
+
+## Inside it
+
+- 9 components are refused inside it; the list and the reasons are in the long document.
+- Renders 19 parts: root, inner, header, title, description, tool, panels, inputs, inputs-label, results, results-label, list, result, result-label, result-value, result-note, empty, action, input-actions.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/estimator.md`.

package/.llm/digest/faqaccordion.md

@@ -2,7 +2,7 @@
 
 # FaqAccordion
 
-A section of questions and answers: a heading over an Accordion, one question open at a time. …
+A section of questions and answers, one open at a time
 
 `import { FaqAccordion } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurebullets.md

@@ -2,7 +2,7 @@
 
 # FeatureBullets
 
-A section pairing a claim with a ruled list of what something includes, beside one picture. …
+Pairs a claim and a list of what is included with one picture
 
 `import { FeatureBullets } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurecards.md

@@ -2,7 +2,7 @@
 
 # FeatureCards
 
-A section that opens with a heading and sets a grid of cards under it — the shape a marketing page uses for “why choose us” and “what you get”. …
+A heading over a grid of feature cards
 
 `import { FeatureCards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurecardscarousel.md

@@ -2,7 +2,7 @@
 
 # FeatureCardsCarousel
 
-A feature band that sets its cards in a row a reader moves along rather than a grid: a heading and a line over a row of the page's own cards, the next one's edge showing past the last in view, with dots saying where the reader is and two arrows stepping it a card at a time. …
+A heading over a row of feature cards the reader scrolls through
 
 `import { FeatureCardsCarousel } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurescroll.md

@@ -2,7 +2,7 @@
 
 # FeatureScroll
 
-A section that gives a set of things one screen each, with the picture pinned beside the words while a reader is on them. …
+Gives each feature a screen of its own, with its picture pinned beside the text
 
 `import { FeatureScroll } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featuresplit.md

@@ -2,7 +2,7 @@
 
 # FeatureSplit
 
-A section putting one claim, a line explaining it and a way onward beside a single picture. …
+One claim, a supporting line and a link, beside a single picture
 
 `import { FeatureSplit } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurestack.md

@@ -2,7 +2,7 @@
 
 # FeatureStack
 
-A section that leads with a statement and ends on a picture: a heading, a line under it where the heading needs one, a link on to more where the page has one, and a large illustration — a globe, a map, a product shot — standing on the band's foot. …
+A heading and supporting line above a large illustration
 
 `import { FeatureStack } from '@deriv-com/dds-marketing'`