@deriv-com/dds-marketing 1.1.1 → 1.1.3

package/.llm/components/accordion.md

@@ -2,6 +2,10 @@
 
 # Accordion
 
+A stack of headings whose detail expands when the reader asks for it.
+
+## Why it is built this way
+
 A stack of rows whose headings stay and whose detail is put away until the reader asks for it. It exists so a long page can be read as a short one: the headings are the page, and each row is something the reader may or may not want. Two rows at least — a set is what makes it work, because a heading earns its place by being scanned against the ones around it. One row is open at a time and that is not configurable here: a marketing page is read by scrolling, and a set that could hold every row open is the long page the accordion was put there to shorten.
 
 ## Use when

package/.llm/components/accordionitem.md

@@ -2,6 +2,10 @@
 
 # AccordionItem
 
+One row of an Accordion: a heading that stays, and detail that expands.
+
+## Why it is built this way
+
 One row of an Accordion: a heading that is always there, and the detail under it that is not. The heading is the whole of the target — the words and the chevron are one control, because a reader aiming at a row is aiming at the row rather than at the mark on the end of it. The chevron says which way the row is about to move rather than which way it just moved, so it is a promise rather than a report.
 
 ## Use when

package/.llm/components/aspectratio.md

@@ -2,6 +2,10 @@
 
 # AspectRatio
 
+Holds its content to a fixed shape and reserves the space before it loads.
+
+## Why it is built this way
+
 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. It draws nothing — no fill, no corner, no edge — and owns one decision: the proportion. What it holds fills it and is cropped to fit, because a box asked for a shape and given something a different shape has to answer which of the two wins, and the box is the one the layout was built on.
 
 It exists because the alternative is every page doing the arithmetic. A row of cards whose images arrive at three different shapes is a row that settles on its tallest, and a hero whose art loads late is a page that jumps once the browser learns how tall it is. Both are the same fault: the shape was known and nothing said it.

package/.llm/components/awards.md

@@ -2,6 +2,10 @@
 
 # Awards
 
+Lists the industry awards a company has won, each framed between two laurels.
+
+## Why it is built this way
+
 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. From the fold the badges wrap into rows centred under the heading, five at most to a row and fewer as the band narrows, a short last row centred rather than left at the start. On a phone they run in one row across the band that moves along on its own, a loop with no seam.
 
 The reference design's FeatureAwards, phone marquee included, at motion.duration.ticker per award. It holds still while a pointer rests on it, while it has focus — it is a tab stop named by the heading while it runs — and while it is pressed; a reader who asked for less motion gets the row still, to swipe.

package/.llm/components/background.md

@@ -2,6 +2,10 @@
 
 # Background
 
+A patterned ground for a section to sit on.
+
+## Why it is built this way
+
 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. It moves slowly at rest, answers the pointer and carries no meaning; what the band holds sits on top of it.
 
 ## Use when

package/.llm/components/badge.md

@@ -2,6 +2,10 @@
 
 # Badge
 
+A short label marking something as new, chosen or reduced.
+
+## Why it is built this way
+
 A short word marking something as new, chosen or reduced. It is promotion rather than state: a marketing page badges the plan it wants read first and the feature it shipped last week, where an app badges what an account is currently doing. That difference decides everything else here — there is no success or warning ground, because nothing on a landing page has a status, and the colour a badge takes says how loudly the page is asking rather than what it is reporting.
 
 Use it sparingly, and this is not a nicety. A badge works by being the one thing on a card that is not the copy; a page with a badge on every card has a row of ordinary labels in coloured pills and nothing marked at all.
@@ -184,7 +188,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { Badge } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <Badge label="For platforms" icon={<GlobeRegularIcon />} />
 ```
@@ -197,7 +201,7 @@ Both are a tint carrying the colour and dark ink carrying the words. Brand makes
 
 ```tsx
 import { Badge } from '@deriv-com/dds-marketing'
-import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChartCandlestickRegularIcon, GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // accent — the plan the page wants read first
 <Badge variant="accent" label="Most popular" icon={<GlobeRegularIcon />} />
@@ -212,7 +216,7 @@ The mark says what the badge is about faster than its word does. It is decorativ
 
 ```tsx
 import { Badge } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // With a glyph
 <Badge label="For platforms" icon={<GlobeRegularIcon />} />

package/.llm/components/bottomsheet.md

@@ -2,6 +2,10 @@
 
 # BottomSheet
 
+A panel that rises from the bottom edge for one focused task on small screens.
+
+## Why it is built this way
+
 A panel that rises from the bottom edge to hold a single focused task on small screens. It owns the way out, the controls ranged above it and the row that names the task; what the task looks like is the consumer's.
 
 ## Use when
@@ -309,7 +313,7 @@ A sheet says how to leave it once: a handle to pull, or a close button to press.
 
 ```tsx
 import { BottomSheet, ButtonIcon } from '@deriv-com/dds-marketing'
-import { PenSolidIcon } from '@deriv-com/quill-icons-web'
+import { PenSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // The handle alone, which is the default
 <BottomSheet onOpenChange={(open, reason) => { /* your handler */ }} open title="Filter results">Markets, date range and contract type</BottomSheet>
@@ -330,7 +334,7 @@ It ranges to the start and stays there, whatever is at either end of the row. Th
 
 ```tsx
 import { BottomSheet, ButtonIcon } from '@deriv-com/dds-marketing'
-import { PenSolidIcon } from '@deriv-com/quill-icons-web'
+import { PenSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // The title alone
 <BottomSheet onOpenChange={(open, reason) => { /* your handler */ }} open showClose={false} showHandle={false} title="Filter results">Markets, date range and contract type</BottomSheet>
@@ -348,7 +352,7 @@ A sheet reached from another sheet needs the step before it. Back takes the lead
 
 ```tsx
 import { BottomSheet, ButtonIcon } from '@deriv-com/dds-marketing'
-import { ArrowLeftRegularIcon, PenSolidIcon } from '@deriv-com/quill-icons-web'
+import { ArrowLeftRegularIcon, PenSolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // The way back, opposite the way out
 <BottomSheet onOpenChange={(open, reason) => { /* your handler */ }} open showClose showHandle={false} back={<ButtonIcon variant="plain" size="sm" label="Back to filters" icon={<ArrowLeftRegularIcon />} />} title="Choose markets">Forex, Commodities, Stock indices, Cryptocurrencies</BottomSheet>

package/.llm/components/breadcrumb.md

@@ -2,6 +2,10 @@
 
 # Breadcrumb
 
+Shows where the current page sits in the site, with links back up.
+
+## Why it is built this way
+
 The trail of ancestors above the current page on a marketing site, showing the visitor where they are in the site hierarchy. Every level but the last is a link back to that section; the last is where they already are. On a marketing site the trail is often the only structural cue a visitor has — they may have arrived from a search result or a campaign link and have no mental model of the site yet. It renders every level it is given and wraps rather than collapsing, because hiding levels describes a shallower hierarchy than the one the visitor is in.
 
 ## Use when

package/.llm/components/breadcrumbitem.md

@@ -2,6 +2,10 @@
 
 # BreadcrumbItem
 
+One level in a Breadcrumb.
+
+## Why it is built this way
+
 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. It knows nothing about the levels around it — what order they come in and what sits between them belongs to the trail, not to any level in it.
 
 ## Use when

package/.llm/components/button.md

@@ -2,6 +2,10 @@
 
 # Button
 
+Triggers the one action a section asks for, such as signing up.
+
+## Why it is built this way
+
 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. An `<a>` when given an href and a `<button>` when not, so a CTA that goes somewhere gets the browser's navigation and one that acts in place answers Space and does what the page says.
 
 ## Use when

package/.llm/components/buttonicon.md

@@ -2,6 +2,10 @@
 
 # ButtonIcon
 
+Triggers an action with an icon alone.
+
+## Why it is built this way
+
 One press carried by a glyph alone, in the space a label would need. What the press does decides the element: an `<a>` when it is given an href, a `<button>` when it is not — the fork CardButton already settled in this package, and for the same reason, that a control going to a page and a control the page handles itself are the same gesture with different destinations, and the element is what tells a browser which. The glyph is decorative to a screen reader; the name the control is announced by comes from `label`, which is never drawn, so the control is named for everyone whether or not the shape happens to be legible to them. This is the gap Button names in its own guidance: Button's words are both its accessible name and its destination, and a glyph alone has nowhere to put either.
 
 ## Use when
@@ -226,7 +230,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { PlaySolidIcon } from '@deriv-com/quill-icons-web'
+import { PlaySolidIcon } from '@deriv-com/dds-marketing/icons'
 
 <ButtonIcon label="Play the product tour" icon={<PlaySolidIcon />} />
 ```
@@ -239,7 +243,7 @@ How much of the section one press claims. Primary for the press a band is built
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { PlaySolidIcon, XmarkRegularIcon } from '@deriv-com/quill-icons-web'
+import { PlaySolidIcon, XmarkRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // Primary — the press a band is built around
 <ButtonIcon variant="primary" label="Play the product tour" icon={<PlaySolidIcon />} />
@@ -260,7 +264,7 @@ Three squares from the control ramp, each holding the mark Button gives its own
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { ChevronLeftRegularIcon } from '@deriv-com/quill-icons-web'
+import { ChevronLeftRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // sm — a dense row, desktop only
 <ButtonIcon size="sm" variant="secondary" label="Previous market" icon={<ChevronLeftRegularIcon />} />
@@ -278,7 +282,7 @@ href decides the element. With one it is an anchor and the browser navigates; wi
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { BarsRegularIcon, LinkedinInIcon } from '@deriv-com/quill-icons-web'
+import { BarsRegularIcon, LinkedinInIcon } from '@deriv-com/dds-marketing/icons'
 
 // With href — an anchor. Cmd-click opens a tab
 <ButtonIcon variant="secondary" href="https://www.linkedin.com/company/deriv" label="Deriv on LinkedIn" icon={<LinkedinInIcon />} />
@@ -293,7 +297,7 @@ Social accounts in a footer: several at once, all one tier. One drawn heavier wo
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { FacebookFIcon, InstagramIcon, LinkedinInIcon } from '@deriv-com/quill-icons-web'
+import { FacebookFIcon, InstagramIcon, LinkedinInIcon } from '@deriv-com/dds-marketing/icons'
 
 // LinkedIn
 <ButtonIcon variant="secondary" href="https://www.linkedin.com/company/deriv" label="Deriv on LinkedIn" icon={<LinkedinInIcon />} />
@@ -311,7 +315,7 @@ Plain paints nothing of its own, so what is behind it decides whether the mark c
 
 ```tsx
 import { ButtonIcon } from '@deriv-com/dds-marketing'
-import { PlaySolidIcon } from '@deriv-com/quill-icons-web'
+import { PlaySolidIcon } from '@deriv-com/dds-marketing/icons'
 
 // default — a light surface
 <ButtonIcon label="Play the product tour" icon={<PlaySolidIcon />} variant="plain" />

package/.llm/components/card.md

@@ -2,6 +2,10 @@
 
 # Card
 
+A surface that groups related content.
+
+## Why it is built this way
+
 A surface that holds content belonging together. The marketing page is white and this is a step off it, so a card is told apart by being recessed rather than by floating — a column of them reads as a set of things rather than a stack of panels. It holds a fill and a corner and nothing else: it does not pad what is inside it, and what is inside it is the page's to compose. One variant holds no fill either: `plain` paints nothing and lets whatever is beneath it through, for an editorial card that is told apart by its picture and its headline rather than by a ground.
 
 ## Use when
@@ -249,7 +253,7 @@ The mark is inset with the copy and sized to sit above a heading, which is what
 
 ```tsx
 import { Card, CardBody, Icon } from '@deriv-com/dds-marketing'
-import { MemoCircleCheckRegularIcon } from '@deriv-com/quill-icons-web'
+import { MemoCircleCheckRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // surface-raised — a mark, and no picture
 <Card variant="surface-raised">

package/.llm/components/cardbody.md

@@ -2,6 +2,10 @@
 
 # CardBody
 
+The content area of a Card, holding its text and picture.
+
+## Why it is built this way
+
 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 inset belongs to the words alone rather than to this whole box, which is what lets a photograph meet the corner while a sentence three lines above it does not — one measure cannot serve both, and putting the padding on the copy instead of on the container is how the same component draws both.
 
 ## Use when
@@ -318,7 +322,7 @@ Every region appears only once it is given something. A card with no description
 
 ```tsx
 import { CardBody, Icon } from '@deriv-com/dds-marketing'
-import { MemoCircleCheckRegularIcon } from '@deriv-com/quill-icons-web'
+import { MemoCircleCheckRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // A title on its own
 <CardBody title="Tight spreads" />

package/.llm/components/cardbutton.md

@@ -2,6 +2,10 @@
 
 # CardButton
 
+A card that acts on press.
+
+## Why it is built this way
+
 A card that responds to a press. The whole surface is the target — a feature and where it leads, a market and its page, a plan and what it costs — so pressing anywhere on it does the thing, and what the thing is decides the element: an `<a>` when it is given an href, a `<button>` when it is not. One component rather than two, because a card that goes to a page and a card that opens something are the same gesture with different destinations, and the element is what tells a browser which.
 
 ## Use when

package/.llm/components/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.
 
 ## Use when
 

package/.llm/components/comparisoncards.md

@@ -2,6 +2,10 @@
 
 # ComparisonCards
 
+Sets two to four options side by side as cards, so readers compare them row by row.
+
+## Why it is built this way
+
 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. Each card is the page's own Card — every option the same colour, so they read as equals — holding a name, a sentence, a list of rows and, where one belongs to it, a footnote and a way on.
 
 The reference design's ComparisonCards. The rows line up across the cards — a card's first row level with its neighbour's first row, however long the sentence above either one runs — and every card in the row is as tall as the tallest. One column on a phone; two cards side by side from the fold; three side by side at full width, and stacked until there is room for all three, because a third card under a pair is compared with nothing beside it.

package/.llm/components/comparisontable.md

@@ -2,6 +2,10 @@
 
 # ComparisonTable
 
+Compares a short, fixed set of options in a table.
+
+## Why it is built this way
+
 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. Unlike Table, this block has no search, pagination, or header tooltips.
 
 The reference design's DynamicTable, named for what it is for. A heading and, where it needs one, a line under it, over the page's own Table in the page's own Card: a band of column names, then one row per thing compared, each row named by its first cell. Its columns and rows are records rather than children, because the block has to draw every row against the same columns. A cell holds one line or a short list of them. On a phone the columns keep a readable width and the table scrolls across inside its card.

package/.llm/components/ctabanner.md

@@ -2,6 +2,10 @@
 
 # CtaBanner
 
+A full-bleed band with one short promotion and the action it asks for.
+
+## Why it is built this way
+
 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. Coral in both themes, because the brand is the same colour whatever the reader's theme. A headline, a line under it, and an action or two; nothing moves.
 
 ## Use when

package/.llm/components/ctabannerslider.md

@@ -2,6 +2,10 @@
 
 # CtaBannerSlider
 
+A full-bleed promotional band that rotates between two or three offers.
+
+## Why it is built this way
+
 CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating between two or three short promotions. One message is in view at a time, fading in where the last one was; dots show where the reader is. Coral in both themes, like the banner.
 
 ## Use when

package/.llm/components/datatable.md

@@ -2,6 +2,10 @@
 
 # DataTable
 
+A full-width table for instrument and market listings.
+
+## Why it is built this way
+
 A full-width data-table section for instrument and market-style listings. It renders a search bar, a native table with a sticky first column inside a horizontally scrollable wrapper, client-side pagination, and an optional footnote below the table.
 
 A heading over a framed table a reader can search and page through: the search and the count of what it found across the top, the table under them with each row's name pinned to the start edge while the values scroll sideways, the pages under that when there is more than one, and a line of small print below the frame. The columns and the rows are data — any feed or spreadsheet of instruments can be dropped in — and every value is searched, as the reader types.

package/.llm/components/divider.md

@@ -2,6 +2,10 @@
 
 # Divider
 
+A rule that separates one group of content from another.
+
+## Why it is built this way
+
 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. One line, in the one ink this package keeps for a separator, with no room of its own — optionally with a word held in the middle of it, where the word is the whole message.
 
 ## Use when

package/.llm/components/downloadbanner.md

@@ -2,6 +2,10 @@
 
 # DownloadBanner
 
+Promotes the app with a heading and links to each app store.
+
+## Why it is built this way
+
 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. From the fold a QR code sits beside the heading, with a line telling the reader to scan it, so a reader on a desktop can take the app to their phone; on a phone the code is gone — the reader is already holding the device it would open on — and the badges sit two to a row under the heading.
 
 The badges are the stores' own artwork, chosen from the platform each record names rather than drawn by the page, and each is named by the words it carries. The QR code is the page's image, never generated here.

package/.llm/components/dropdownmenu.md

@@ -2,6 +2,10 @@
 
 # DropdownMenu
 
+A button that opens a short list of links.
+
+## Why it is built this way
+
 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.
 
 It is the host MenuItem was written against. A row whose role is menuitem means nothing to a screen reader outside an element whose role is menu, so until this landed MenuItem was a contract and a stylesheet waiting for one. What this adds is everything a row cannot know about itself: that there is a set, how long it is, which one the reader is on, and that Escape puts them back on the button they pressed.
@@ -287,7 +291,7 @@ Two things genuinely have no logical form and are not covered by this. A CSS gra
 
 ```tsx
 import { DropdownMenu, MenuItem } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 <DropdownMenu label="Language" icon={<GlobeRegularIcon />}>
   <MenuItem onSelect={() => { /* your handler */ }}>English</MenuItem>
@@ -342,7 +346,7 @@ What a marketing menu is for: the languages a site is published in, the regions
 
 ```tsx
 import { DropdownMenu, MenuItem } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // The languages a site is published in
 <DropdownMenu label="Language" icon={<GlobeRegularIcon />} defaultOpen>{menuitems}</DropdownMenu>
@@ -421,7 +425,7 @@ The edge is what finds a control standing on its own. Among neighbours that are
 
 ```tsx
 import { DropdownMenu } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // outlined — on its own in a toolbar
 <DropdownMenu label="Language" icon={<GlobeRegularIcon />}>{menuitems}</DropdownMenu>
@@ -436,7 +440,7 @@ Only the tints move. Under plain the ink is already whatever the surface set, so
 
 ```tsx
 import { DropdownMenu } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // default — a light bar
 <DropdownMenu label="Language" icon={<GlobeRegularIcon />} variant="plain" size="sm" chevron={false}>{menuitems}</DropdownMenu>
@@ -451,7 +455,7 @@ A press, always. A pointer as well where the menu sits among others that open th
 
 ```tsx
 import { DropdownMenu } from '@deriv-com/dds-marketing'
-import { GlobeRegularIcon } from '@deriv-com/quill-icons-web'
+import { GlobeRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // A press — a switcher standing on its own
 <DropdownMenu label="Language" icon={<GlobeRegularIcon />}>{menuitems}</DropdownMenu>