@deriv-com/dds-marketing 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/.llm/components/accordion.md +4 -0
  2. package/.llm/components/accordionitem.md +4 -0
  3. package/.llm/components/aspectratio.md +4 -0
  4. package/.llm/components/awards.md +4 -0
  5. package/.llm/components/background.md +4 -0
  6. package/.llm/components/badge.md +7 -3
  7. package/.llm/components/bottomsheet.md +7 -3
  8. package/.llm/components/breadcrumb.md +4 -0
  9. package/.llm/components/breadcrumbitem.md +4 -0
  10. package/.llm/components/button.md +4 -0
  11. package/.llm/components/buttonicon.md +10 -6
  12. package/.llm/components/card.md +5 -1
  13. package/.llm/components/cardbody.md +5 -1
  14. package/.llm/components/cardbutton.md +4 -0
  15. package/.llm/components/checkbox.md +1 -1
  16. package/.llm/components/comparisoncards.md +4 -0
  17. package/.llm/components/comparisontable.md +4 -0
  18. package/.llm/components/ctabanner.md +4 -0
  19. package/.llm/components/ctabannerslider.md +4 -0
  20. package/.llm/components/datatable.md +4 -0
  21. package/.llm/components/divider.md +4 -0
  22. package/.llm/components/downloadbanner.md +4 -0
  23. package/.llm/components/dropdownmenu.md +9 -5
  24. package/.llm/components/estimator.md +336 -0
  25. package/.llm/components/faqaccordion.md +4 -0
  26. package/.llm/components/featurebullets.md +4 -0
  27. package/.llm/components/featurecards.md +5 -1
  28. package/.llm/components/featurecardscarousel.md +4 -0
  29. package/.llm/components/featurescroll.md +4 -0
  30. package/.llm/components/featuresplit.md +4 -0
  31. package/.llm/components/featurestack.md +4 -0
  32. package/.llm/components/filterchip.md +5 -1
  33. package/.llm/components/footer.md +4 -0
  34. package/.llm/components/footergroup.md +4 -0
  35. package/.llm/components/grid.md +4 -0
  36. package/.llm/components/icon.md +9 -5
  37. package/.llm/components/illustrationcard.md +4 -0
  38. package/.llm/components/illustrationscene.md +4 -0
  39. package/.llm/components/imagebanner.md +5 -1
  40. package/.llm/components/landinghero.md +4 -0
  41. package/.llm/components/link.md +5 -1
  42. package/.llm/components/logocolumns.md +4 -0
  43. package/.llm/components/logorows.md +4 -0
  44. package/.llm/components/menuitem.md +6 -2
  45. package/.llm/components/navbar.md +5 -1
  46. package/.llm/components/navbaritem.md +4 -0
  47. package/.llm/components/navbarmenu.md +4 -0
  48. package/.llm/components/navbarmenugroup.md +4 -0
  49. package/.llm/components/navbarpanel.md +4 -0
  50. package/.llm/components/navbarswitcher.md +10 -6
  51. package/.llm/components/navbarswitcheroption.md +4 -0
  52. package/.llm/components/option.md +5 -1
  53. package/.llm/components/pageheader.md +4 -0
  54. package/.llm/components/pagination.md +4 -0
  55. package/.llm/components/paginationdots.md +4 -0
  56. package/.llm/components/producthero.md +4 -0
  57. package/.llm/components/removablechip.md +5 -1
  58. package/.llm/components/resourcebanner.md +4 -0
  59. package/.llm/components/row.md +4 -0
  60. package/.llm/components/scenescroll.md +4 -0
  61. package/.llm/components/scroller.md +4 -0
  62. package/.llm/components/searchinput.md +4 -0
  63. package/.llm/components/segmentedcontrol.md +5 -1
  64. package/.llm/components/segmentedcontrolitem.md +6 -2
  65. package/.llm/components/select.md +4 -0
  66. package/.llm/components/selectchip.md +4 -0
  67. package/.llm/components/spinner.md +4 -0
  68. package/.llm/components/stack.md +4 -0
  69. package/.llm/components/stats.md +4 -0
  70. package/.llm/components/statusdot.md +4 -0
  71. package/.llm/components/steps.md +4 -0
  72. package/.llm/components/stickycards.md +4 -0
  73. package/.llm/components/subdomainnavbar.md +5 -1
  74. package/.llm/components/tab.md +6 -2
  75. package/.llm/components/table.md +4 -0
  76. package/.llm/components/tablebody.md +4 -0
  77. package/.llm/components/tablecell.md +4 -0
  78. package/.llm/components/tablehead.md +4 -0
  79. package/.llm/components/tableheadercell.md +4 -0
  80. package/.llm/components/tablerow.md +4 -0
  81. package/.llm/components/tablist.md +4 -0
  82. package/.llm/components/teamgrid.md +4 -0
  83. package/.llm/components/testimonialrow.md +4 -0
  84. package/.llm/components/testimonialslider.md +4 -0
  85. package/.llm/components/textarea.md +4 -0
  86. package/.llm/components/textinput.md +5 -1
  87. package/.llm/components/textscroll.md +4 -0
  88. package/.llm/components/tiers.md +4 -0
  89. package/.llm/components/typography.md +4 -0
  90. package/.llm/digest/accordion.md +1 -1
  91. package/.llm/digest/accordionitem.md +1 -1
  92. package/.llm/digest/aspectratio.md +1 -1
  93. package/.llm/digest/awards.md +1 -1
  94. package/.llm/digest/background.md +1 -1
  95. package/.llm/digest/badge.md +1 -1
  96. package/.llm/digest/bottomsheet.md +1 -1
  97. package/.llm/digest/breadcrumb.md +1 -1
  98. package/.llm/digest/breadcrumbitem.md +1 -1
  99. package/.llm/digest/button.md +1 -1
  100. package/.llm/digest/buttonicon.md +1 -1
  101. package/.llm/digest/card.md +1 -1
  102. package/.llm/digest/cardbody.md +1 -1
  103. package/.llm/digest/cardbutton.md +1 -1
  104. package/.llm/digest/checkbox.md +1 -1
  105. package/.llm/digest/comparisoncards.md +1 -1
  106. package/.llm/digest/comparisontable.md +1 -1
  107. package/.llm/digest/ctabanner.md +1 -1
  108. package/.llm/digest/ctabannerslider.md +1 -1
  109. package/.llm/digest/datatable.md +1 -1
  110. package/.llm/digest/divider.md +1 -1
  111. package/.llm/digest/downloadbanner.md +1 -1
  112. package/.llm/digest/dropdownmenu.md +1 -1
  113. package/.llm/digest/estimator.md +66 -0
  114. package/.llm/digest/faqaccordion.md +1 -1
  115. package/.llm/digest/featurebullets.md +1 -1
  116. package/.llm/digest/featurecards.md +1 -1
  117. package/.llm/digest/featurecardscarousel.md +1 -1
  118. package/.llm/digest/featurescroll.md +1 -1
  119. package/.llm/digest/featuresplit.md +1 -1
  120. package/.llm/digest/featurestack.md +1 -1
  121. package/.llm/digest/filterchip.md +1 -1
  122. package/.llm/digest/footer.md +1 -1
  123. package/.llm/digest/footergroup.md +1 -1
  124. package/.llm/digest/grid.md +1 -1
  125. package/.llm/digest/icon.md +1 -1
  126. package/.llm/digest/illustrationcard.md +1 -1
  127. package/.llm/digest/illustrationscene.md +1 -1
  128. package/.llm/digest/imagebanner.md +2 -2
  129. package/.llm/digest/landinghero.md +1 -1
  130. package/.llm/digest/link.md +1 -1
  131. package/.llm/digest/logocolumns.md +1 -1
  132. package/.llm/digest/logorows.md +1 -1
  133. package/.llm/digest/menuitem.md +1 -1
  134. package/.llm/digest/navbar.md +1 -1
  135. package/.llm/digest/navbaritem.md +1 -1
  136. package/.llm/digest/navbarmenu.md +1 -1
  137. package/.llm/digest/navbarmenugroup.md +1 -1
  138. package/.llm/digest/navbarpanel.md +1 -1
  139. package/.llm/digest/navbarswitcher.md +1 -1
  140. package/.llm/digest/navbarswitcheroption.md +1 -1
  141. package/.llm/digest/option.md +1 -1
  142. package/.llm/digest/pageheader.md +1 -1
  143. package/.llm/digest/pagination.md +1 -1
  144. package/.llm/digest/paginationdots.md +1 -1
  145. package/.llm/digest/producthero.md +1 -1
  146. package/.llm/digest/removablechip.md +1 -1
  147. package/.llm/digest/resourcebanner.md +1 -1
  148. package/.llm/digest/row.md +1 -1
  149. package/.llm/digest/scenescroll.md +1 -1
  150. package/.llm/digest/scroller.md +1 -1
  151. package/.llm/digest/searchinput.md +1 -1
  152. package/.llm/digest/segmentedcontrol.md +1 -1
  153. package/.llm/digest/segmentedcontrolitem.md +2 -2
  154. package/.llm/digest/select.md +1 -1
  155. package/.llm/digest/selectchip.md +1 -1
  156. package/.llm/digest/spinner.md +1 -1
  157. package/.llm/digest/stack.md +1 -1
  158. package/.llm/digest/stats.md +1 -1
  159. package/.llm/digest/statusdot.md +1 -1
  160. package/.llm/digest/steps.md +1 -1
  161. package/.llm/digest/stickycards.md +1 -1
  162. package/.llm/digest/subdomainnavbar.md +1 -1
  163. package/.llm/digest/tab.md +1 -1
  164. package/.llm/digest/table.md +1 -1
  165. package/.llm/digest/tablebody.md +1 -1
  166. package/.llm/digest/tablecell.md +1 -1
  167. package/.llm/digest/tablehead.md +1 -1
  168. package/.llm/digest/tableheadercell.md +1 -1
  169. package/.llm/digest/tablerow.md +1 -1
  170. package/.llm/digest/tablist.md +1 -1
  171. package/.llm/digest/teamgrid.md +1 -1
  172. package/.llm/digest/testimonialrow.md +1 -1
  173. package/.llm/digest/testimonialslider.md +1 -1
  174. package/.llm/digest/textarea.md +1 -1
  175. package/.llm/digest/textinput.md +1 -1
  176. package/.llm/digest/textscroll.md +1 -1
  177. package/.llm/digest/tiers.md +1 -1
  178. package/.llm/digest/typography.md +1 -1
  179. package/.llm/index.md +2 -1
  180. package/.llm/tokens.md +1 -0
  181. package/AGENTS.md +1 -0
  182. package/README.md +28 -3
  183. package/dist/components/blocks/comparison-cards/comparison-cards-impl.css +0 -12
  184. package/dist/components/blocks/estimator/Estimator.css +206 -0
  185. package/dist/components/blocks/estimator/Estimator.d.ts +27 -0
  186. package/dist/components/blocks/estimator/Estimator.js +61 -0
  187. package/dist/components/blocks/estimator/Estimator.types.d.ts +63 -0
  188. package/dist/components/blocks/estimator/Estimator.types.js +25 -0
  189. package/dist/components/blocks/estimator/estimator-impl.css +159 -0
  190. package/dist/components/blocks/image-banner/ImageBanner.d.ts +1 -0
  191. package/dist/components/blocks/image-banner/ImageBanner.js +2 -1
  192. package/dist/components/blocks/image-banner/ImageBanner.types.d.ts +1 -1
  193. package/dist/components/blocks/image-banner/image-banner-impl.css +7 -51
  194. package/dist/components/core/segmented-control-item/SegmentedControlItem.types.d.ts +1 -1
  195. package/dist/components/core/select/Select.css +2 -0
  196. package/dist/components/core/select/select-impl.css +58 -0
  197. package/dist/components/core/text-area/TextArea.css +2 -0
  198. package/dist/components/core/text-area/text-area-impl.css +54 -0
  199. package/dist/components/core/text-input/TextInput.css +2 -0
  200. package/dist/components/core/text-input/text-input-impl.css +63 -0
  201. package/dist/components/estimator-data.d.ts +29 -0
  202. package/dist/components/estimator-data.js +12 -0
  203. package/dist/components/index.d.ts +3 -0
  204. package/dist/components/index.js +2 -0
  205. package/dist/icons/accounts.d.ts +1 -0
  206. package/dist/icons/accounts.js +1 -0
  207. package/dist/icons/app-stores.d.ts +1 -0
  208. package/dist/icons/app-stores.js +1 -0
  209. package/dist/icons/currency.d.ts +1 -0
  210. package/dist/icons/currency.js +1 -0
  211. package/dist/icons/flag.d.ts +1 -0
  212. package/dist/icons/flag.js +1 -0
  213. package/dist/icons/illustrative.d.ts +1 -0
  214. package/dist/icons/illustrative.js +1 -0
  215. package/dist/icons/index.d.ts +1 -0
  216. package/dist/icons/index.js +4 -0
  217. package/dist/icons/markets.d.ts +1 -0
  218. package/dist/icons/markets.js +1 -0
  219. package/dist/icons/social.d.ts +1 -0
  220. package/dist/icons/social.js +1 -0
  221. package/dist/icons/system.d.ts +1 -0
  222. package/dist/icons/system.js +1 -0
  223. package/dist/icons/trade.d.ts +1 -0
  224. package/dist/icons/trade.js +1 -0
  225. package/dist/marketing.css +2 -0
  226. package/package.json +44 -2
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Link
4
4
 
5
- A destination named inside a sentence, or standing on its own under one. …
5
+ Takes the visitor to another page, inline or on its own
6
6
 
7
7
  `import { Link } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # LogoColumns
4
4
 
5
- A section that backs one claim with the names behind it: a heading, a line, an optional disclaimer and a way onward, beside a wall of logo tiles in two columns that run in opposite directions as the reader scrolls past — one rising, one falling — fading out at the wall's top and bottom edge so the set reads as longer than the space it is shown in. …
5
+ Backs a claim with two columns of logos that scroll in opposite directions
6
6
 
7
7
  `import { LogoColumns } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # LogoRows
4
4
 
5
- A section that backs one claim with the names behind it, stacked: a heading, a line and a way onward, centred, over two rows of logo tiles across the band's full width that slide sideways in opposite directions as the reader scrolls past — fading out at both of their ends, so the set reads as longer than the band. …
5
+ Backs a claim with two rows of logos that slide in opposite directions
6
6
 
7
7
  `import { LogoRows } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # MenuItem
4
4
 
5
- One command in a menu. Pressing it does something and the menu shuts — it holds no value and carries no mark, so there is nothing about it to find on reopening. …
5
+ One item in a DropdownMenu
6
6
 
7
7
  `import { MenuItem } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Navbar
4
4
 
5
- The bar across the top of a marketing page, and three regions: the mark that says whose site this is, the places the site has, and the things a reader reaches for rather than navigates to — the language, the theme, and what the site wants them to do. …
5
+ The bar across the top of a marketing page: logo, links and actions
6
6
 
7
7
  `import { Navbar } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarItem
4
4
 
5
- One place the site has, in the bar across the top of it. An anchor with a target around it, a mark for the section the reader is currently in, and nothing else. …
5
+ One link in the Navbar
6
6
 
7
7
  `import { NavbarItem } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarMenu
4
4
 
5
- A destination in the bar that opens rather than goes: a named trigger, and a wide panel beneath it holding the section's own destinations in columns, usually with something promotional beside them. …
5
+ A Navbar item that opens a wide panel of links
6
6
 
7
7
  `import { NavbarMenu } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarMenuGroup
4
4
 
5
- A named handful of destinations inside a section's panel: a word over a short list, so a reader scanning a panel of twenty links is reading four sets of five rather than twenty of anything. …
5
+ A titled list of links inside a NavbarMenu panel
6
6
 
7
7
  `import { NavbarMenuGroup } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarPanel
4
4
 
5
- The whole of a site's navigation at a width the bar cannot hold it: the mark and a way out across the top, the destinations down the middle, whatever the site wants across the foot. …
5
+ The full site navigation for screens too narrow for the Navbar
6
6
 
7
7
  `import { NavbarPanel } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarSwitcher
4
4
 
5
- Something a reader sets rather than somewhere they go: the language the page is read in, the region its prices are in, the theme it is drawn in. …
5
+ Sets a site preference from the Navbar, such as language or theme
6
6
 
7
7
  `import { NavbarSwitcher } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # NavbarSwitcherOption
4
4
 
5
- One choice inside a NavbarSwitcher: a language, a region, a theme. …
5
+ One choice in a NavbarSwitcher, such as a language or theme
6
6
 
7
7
  `import { NavbarSwitcherOption } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Option
4
4
 
5
- One answer on offer inside a control that opens a list. …
5
+ One choice in a list that opens from a control
6
6
 
7
7
  `import { Option } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # PageHeader
4
4
 
5
- The band that opens a company or a legal page: the page's name, a line saying what it is, and nothing else. The third of three opening bands and the only one that is not a hero. …
5
+ Opens a company or legal page with its title and one line of context
6
6
 
7
7
  `import { PageHeader } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Pagination
4
4
 
5
- The control that moves a reader through a set too large to show at once. …
5
+ Moves the reader through a set too large to show at once
6
6
 
7
7
  `import { Pagination } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # PaginationDots
4
4
 
5
- A row of marks, one per position in a short sequence — the slides of a slider, the steps of a walkthrough — with the one the reader is on drawn as a longer, solid pill and the rest as small translucent dots. …
5
+ Shows which item of a short sequence is in view
6
6
 
7
7
  `import { PaginationDots } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # ProductHero
4
4
 
5
- The band that opens a product or a market page: the one thing the page is about, centred, over a ground dark enough that nothing above it competes. The second of three opening bands. …
5
+ Opens a product or market page with a centred headline over a dark background
6
6
 
7
7
  `import { ProductHero } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # RemovableChip
4
4
 
5
- A token standing for one thing that is already in play — a topic the reader has filtered by, a tag on an article, a market they have picked out — which they can take back out. …
5
+ Shows one applied item, such as a filter or tag, that can be removed
6
6
 
7
7
  `import { RemovableChip } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # ResourceBanner
4
4
 
5
- A dark panel at the end of an informational section that points readers at related guides, policies or reference pages — the "here's where to read more" block. …
5
+ A dark panel that points readers to related guides and reference pages
6
6
 
7
7
  `import { ResourceBanner } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Row
4
4
 
5
- A line, and one measure between the things on it. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things beside one another sit. …
5
+ Lays items out in a line with consistent spacing
6
6
 
7
7
  `import { Row } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SceneScroll
4
4
 
5
- A full-screen section of two scenes — each a photograph filling the band with a heading and a line over it — that change over as the reader scrolls: the screen holds still while the second photograph dissolves in over the first and the first scene's words give way to the second's. …
5
+ Two full-screen photo scenes that cross-fade as the reader scrolls
6
6
 
7
7
  `import { SceneScroll } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Scroller
4
4
 
5
- A rail, and one measure between the things on it. …
5
+ Lays items out in a horizontally scrolling rail
6
6
 
7
7
  `import { Scroller } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SearchInput
4
4
 
5
- A query a visitor types to find something the page did not put in front of them — a help centre, a blog or docs index, a directory of markets. …
5
+ A field for searching a help centre, blog or directory
6
6
 
7
7
  `import { SearchInput } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SegmentedControl
4
4
 
5
- A row of joined segments from which exactly one is chosen, drawn from a short set of alternatives that exclude each other. …
5
+ Picks exactly one option from a short set of joined segments
6
6
 
7
7
  `import { SegmentedControl } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SegmentedControlItem
4
4
 
5
- One option in a segmented control, and nothing on its own — a segment says it is the chosen one of a set, and a set of one has nothing to be chosen from. …
5
+ One option in a SegmentedControl
6
6
 
7
7
  `import { SegmentedControlItem } from '@deriv-com/dds-marketing'`
8
8
 
@@ -38,7 +38,7 @@ One option in a segmented control, and nothing on its own — a segment says it
38
38
  - never: The words the reader sees. That is label — a value is an identifier the page matches on, and one doubling as copy breaks the moment the copy is reworded
39
39
  - **label** `string` · required — Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. …
40
40
  - never: A sentence, or a value with its unit spelled out. 'Yearly' rather than 'Billed once a year' — the explanation belongs beside the control, where a reader who is not choosing still sees it
41
- - **icon** `node` · optional — The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element
41
+ - **icon** `node` · optional — The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/dds-marketing/icons and pass the element
42
42
  - never: Decoration. A row of segments is scanned, and a mark that says nothing the label does not is one more thing to look past on every one of them
43
43
  - **onSelect** `callback` · optional — This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it
44
44
  - never: Holding which segment is current. That is the group's onChange, which fires once for the row; a page wiring up one handler per segment has written the group's job out by hand
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Select
4
4
 
5
- A control for choosing one answer from a set the reader scans. …
5
+ Chooses one option from a list
6
6
 
7
7
  `import { Select } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SelectChip
4
4
 
5
- A chip that opens a list of answers and keeps the one chosen, so a filter row shows the current narrowing rather than the name of a filter. …
5
+ A chip that opens a list and shows the option chosen
6
6
 
7
7
  `import { SelectChip } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Spinner
4
4
 
5
- A turning ring that says a wait is real and the page has not stalled. …
5
+ Shows that something is loading
6
6
 
7
7
  `import { Spinner } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Stack
4
4
 
5
- A column, and one measure between its rows. It draws nothing — no ground, no edge, no padding — and owns one decision: how far apart the things stacked in it sit. …
5
+ Lays items out in a column with consistent spacing
6
6
 
7
7
  `import { Stack } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Stats
4
4
 
5
- A trust and credibility section of key numbers: a heading, a line under it where the heading needs one, and the figures — each a number and the few words that say what it counts. …
5
+ A heading over a few key figures, each with a short label
6
6
 
7
7
  `import { Stats } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # StatusDot
4
4
 
5
- A small coloured circle that marks one thing in a list of otherwise equal things — either because it is worth noticing, or because it is in a state the others are not. …
5
+ A small dot marking an item as notable or in a different state
6
6
 
7
7
  `import { StatusDot } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Steps
4
4
 
5
- A two-column how-it-works section pairing a supporting picture with a numbered, ordered list of steps, each a title and a line describing it. …
5
+ A numbered list of steps beside a supporting picture
6
6
 
7
7
  `import { Steps } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # StickyCards
4
4
 
5
- A section whose cards pile up as the page scrolls: a heading, and under it a set of cards that each stop near the top of the window while the next one slides up over them, so the cards are read one at a time and the edges of the ones already read stay showing above the one being read. …
5
+ A heading over cards that stack on top of each other as the page scrolls
6
6
 
7
7
  `import { StickyCards } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # SubdomainNavbar
4
4
 
5
- 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. …
5
+ The top bar for a subdomain such as docs or a product surface
6
6
 
7
7
  `import { SubdomainNavbar } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Tab
4
4
 
5
- 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. …
5
+ One option in a TabList
6
6
 
7
7
  `import { Tab } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Table
4
4
 
5
- Structured data in rows and columns, where every row has the same shape. …
5
+ Shows structured data in rows and columns
6
6
 
7
7
  `import { Table } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableBody
4
4
 
5
- The rows of data, under the header. …
5
+ The data rows of a Table
6
6
 
7
7
  `import { TableBody } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableCell
4
4
 
5
- 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. …
5
+ One value in a table row
6
6
 
7
7
  `import { TableCell } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableHead
4
4
 
5
- The column names, above the data, and the filter row where there is one. …
5
+ The header rows of a Table
6
6
 
7
7
  `import { TableHead } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableHeaderCell
4
4
 
5
- The name of a column, announced before every value under it. …
5
+ The name of one table column
6
6
 
7
7
  `import { TableHeaderCell } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TableRow
4
4
 
5
- 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. …
5
+ One row of a Table
6
6
 
7
7
  `import { TableRow } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TabList
4
4
 
5
- A strip of comparable versions of one thing, one of them showing at a time. …
5
+ Switches between views of the same content
6
6
 
7
7
  `import { TabList } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TeamGrid
4
4
 
5
- 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. …
5
+ A grid of the people behind a company, with photo, name and role
6
6
 
7
7
  `import { TeamGrid } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TestimonialRow
4
4
 
5
- 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. …
5
+ An overall rating over a scrollable row of customer reviews
6
6
 
7
7
  `import { TestimonialRow } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TestimonialSlider
4
4
 
5
- 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. …
5
+ Customer quotes shown one at a time, each with who said it
6
6
 
7
7
  `import { TestimonialSlider } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TextArea
4
4
 
5
- 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. …
5
+ A field for a longer message, such as on a contact form
6
6
 
7
7
  `import { TextArea } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TextInput
4
4
 
5
- One line of text a visitor types before they are a customer. …
5
+ A single-line text field
6
6
 
7
7
  `import { TextInput } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # TextScroll
4
4
 
5
- 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. …
5
+ One large statement whose words brighten as the reader scrolls
6
6
 
7
7
  `import { TextScroll } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Tiers
4
4
 
5
- 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. …
5
+ A row of partnership tiers, each with what it offers and how to reach it
6
6
 
7
7
  `import { Tiers } from '@deriv-com/dds-marketing'`
8
8
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  # Typography
4
4
 
5
- Copy, set in one of the page's type roles. …
5
+ Sets text in one of the type roles
6
6
 
7
7
  `import { Typography } from '@deriv-com/dds-marketing'`
8
8
 
package/.llm/index.md CHANGED
@@ -9,7 +9,7 @@ need — loading all of them dilutes the relevant one.
9
9
  Paths here are from the package root, so they resolve whether this file is read in place
10
10
  or its content handed over on its own.
11
11
 
12
- Sections: Core (54) · Layout (5) · Blocks (30)
12
+ Sections: Core (54) · Layout (5) · Blocks (31)
13
13
 
14
14
 
15
15
  ## Core
@@ -105,6 +105,7 @@ The sections a page is built from, and the rhythm between them.
105
105
  | CtaBannerSlider | Rotating between two or three genuinely different promotions without a hero's weight — open an account, try a tool, download the app | One promotion → `CtaBanner` · The band that opens the page → `LandingHero` · A message with more than a headline, a line and a button or two → `FeatureSplit` |
106
106
  | DataTable | Trading instruments and their specifications — contract size, minimum size, volume limits — on a market page · Trading conditions a reader looks up rather than reads through: spreads, leverage, margin, swaps · An MT5 or Deriv X specification page, where the set runs to dozens of rows and a reader is hunting for the one they trade | Three or four plans or accounts compared feature by feature, where every row is read rather than searched → `ComparisonTable` · A handful of rows with no need to search or page — a fee schedule of four lines → `Table` |
107
107
  | DownloadBanner | Promoting an app across the stores and platforms it ships on — App Store, Google Play, AppGallery, a desktop download, the web · A trading platform's page, near its end, once the product has been explained and the next thing a reader wants is to get it | One download, or the web alone → `Button` · A promotion that has to argue for the download in a headline and a sentence → `CtaBanner` |
108
+ | Estimator | 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 | 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` |
108
109
  | FaqAccordion | The questions a reader asks before acting — fees, limits, how long a withdrawal takes — near the end of a landing page or on a help page · Objections a page has to answer without making every reader read every answer | The answers are short enough to read all at once → `FeatureBullets` · Each item is a feature, not a question → `FeatureCards` |
109
110
  | FeatureBullets | A page has to list what a product or a plan includes, and the list is the argument · Several benefits are each one line long and are read by scanning rather than reading · A claim needs something beside it, and a picture is the only thing there is to put there | The items are two or three words and belong on one line → `Badge` · Each item needs a heading and a paragraph of its own → `Card` · The section opens the page → `ProductHero` |
110
111
  | FeatureCards | Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance — the first choice for a set of three. The picture is CardBody's `src`, drawn below the words by default · A set of destinations — markets, platforms, tools — each a card a reader presses to go there · One feature that deserves the whole row in a card of its own — the words beside a large picture, carded on the section's ground | Each item is one line, and the list is the argument → `FeatureBullets` · One claim beside a picture, with no card around it → `FeatureSplit` · The items are read in order, one leading to the next → `FeatureScroll` |
package/.llm/tokens.md CHANGED
@@ -378,6 +378,7 @@ one value at every width.
378
378
  ## motion
379
379
 
380
380
  - `--motion-distance-drift` — How far decoration travels against the scroll while its section passes through the view, one way or the other. Far enough to be seen moving as the reader scrolls past, so it reads as depth.
381
+ - `--motion-distance-shake` — How far a field swings each way when it shakes to say a value was refused. Small on purpose: the field has to stay readable mid-swing, and a reader who has just been told no does not need to be shoved as well.
381
382
  - `--motion-duration-dramatic` — Editorial hero entrances for visual impact, e.g. hero headline revealing, landing page title appearing. Not for scroll reveals — use motion.duration.reveal.
382
383
  - `--motion-duration-drift` — One way of a slow drift that runs while something is on screen — an aurora wandering along a band's foot and back. Ten seconds, so the movement is felt rather than watched.
383
384
  - `--motion-duration-dwell` — How long a rotating message holds before the next one moves in, e.g. a CTA banner's slides. Long enough to read a headline and a line under it; the reference site's 2000 moved before a reader reached the button.
package/AGENTS.md CHANGED
@@ -150,6 +150,7 @@ screen is built in is not something to reach for while building a control.
150
150
  - **CtaBannerSlider** — Rotating between two or three genuinely different promotions without a hero's weight
151
151
  - **DataTable** — Trading instruments and their specifications
152
152
  - **DownloadBanner** — Promoting an app across the stores and platforms it ships on
153
+ - **Estimator** — A page lets a reader work something out before they act
153
154
  - **FaqAccordion** — The questions a reader asks before acting
154
155
  - **FeatureBullets** — A page has to list what a product or a plan includes, and the list is the argument
155
156
  - **FeatureCards** — Three or four things a product does, each a card with a heading, a line and a picture under them, read side by side and compared at a glance
package/README.md CHANGED
@@ -19,13 +19,15 @@ on when to reach for it. Product apps want
19
19
  npm install @deriv-com/dds-marketing
20
20
  ```
21
21
 
22
- React 19 and the Quill icon set are peer dependencies, so install them alongside it if
23
- your app does not already have them:
22
+ React 19 is a peer dependency, so install it alongside if your app does not already have
23
+ it:
24
24
 
25
25
  ```bash
26
- npm install react react-dom @deriv-com/quill-icons-web
26
+ npm install react react-dom
27
27
  ```
28
28
 
29
+ The Quill icon set comes with the package — there is nothing else to install.
30
+
29
31
  ## Use
30
32
 
31
33
  Import the stylesheet once, at the root of your app. It defines every token this package's
@@ -60,6 +62,29 @@ export function Home() {
60
62
 
61
63
  Each component brings its own stylesheet with it, so nothing else needs importing.
62
64
 
65
+ ## Icons
66
+
67
+ Every [Quill](https://github.com/deriv-com/product-design-quill-icons) icon is re-exported
68
+ from `@deriv-com/dds-marketing/icons`, under the name Quill gives it:
69
+
70
+ ```tsx
71
+ import { Icon } from '@deriv-com/dds-marketing'
72
+ import { CircleCheckSolidIcon } from '@deriv-com/dds-marketing/icons'
73
+ import { UsdIcon } from '@deriv-com/dds-marketing/icons/currency'
74
+
75
+ <Icon label="Verified"><CircleCheckSolidIcon /></Icon>
76
+ ```
77
+
78
+ Each Quill group has a subpath of its own — `accounts`, `app-stores`, `currency`, `flag`,
79
+ `illustrative`, `markets`, `social`, `system` and `trade`. Production builds tree-shake either
80
+ form to the icons you use; a dev server does not, so the group subpaths keep it from loading
81
+ all ~1,850 at once. Raw SVG files are not re-exported; for those, install
82
+ `@deriv-com/quill-icons-web` and use its `svg/` folder.
83
+
84
+ An app that already imports from `@deriv-com/quill-icons-web` keeps working. It is the same
85
+ module, so the two can be mixed while you migrate — but drop the direct dependency when you
86
+ are done, or pin it to the range this package uses, so the app does not bundle two copies.
87
+
63
88
  ## Fonts
64
89
 
65
90
  The system is designed for [Inter](https://rsms.me/inter/) (all text) and
@@ -248,15 +248,3 @@
248
248
  :where([data-dds-context="marketing"]) .dds-comparisoncards[data-variant='highlighted'] .dds-comparisoncards__item[data-recommended]:has(.dds-comparisoncards__highlight) .dds-comparisoncards__card-head {
249
249
  padding-block-start: var(--space-inset-md);
250
250
  }
251
-
252
- /*
253
- * A pair holds to two thirds of the row from full width, centred — FeatureCards' rule and its
254
- * reason: two cards across the whole width put each label half a page from its value.
255
- */
256
- @container (min-width: 64rem) {
257
- :where([data-dds-context="marketing"]) .dds-comparisoncards .dds-comparisoncards__grid:has(> :nth-child(2):last-child) {
258
- inline-size: 100%;
259
- margin-inline: auto;
260
- max-inline-size: calc((100% - 2 * var(--space-grid-gutter)) * 2 / 3 + var(--space-grid-gutter));
261
- }
262
- }