@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/core/typography/typography-impl.css

@@ -0,0 +1,106 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * Text that moves once on arrival (TypographyMotion.tsx). `data-arrival` is the text's own answer
+ * from useArrival (arrival.ts): `waiting` holds the motion at its first frame, `playing` runs it,
+ * and no attribute — a server, a reader who asked for less movement — is the text at rest. The
+ * package's motion tokens throughout.
+ */
+
+/*
+ * `motion="roll"`: each digit is a reel of nought to nine, one line tall and clipped to it, set on
+ * its digit. Arriving, each reel rolls up from nought to its digit over motion.duration.dramatic, a
+ * step of motion.duration.stagger behind the digit before it, so the figure settles left to right.
+ * `lh` so a reel's lines are the figure's own lines whatever its type role.
+ */
+:where([data-dds-context="marketing"]) .dds-typography [data-digit] {
+  block-size: 1lh;
+  display: inline-block;
+  overflow: clip;
+  vertical-align: top;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-reel] {
+  display: flex;
+  flex-direction: column;
+  translate: 0 calc(var(--dds-typography-digit, 0) * -1lh);
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-reel] > * {
+  block-size: 1lh;
+}
+
+@keyframes dds-typography-roll {
+  from {
+    translate: 0 0;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-reel] {
+  animation: dds-typography-roll var(--motion-duration-dramatic) var(--motion-easing-reveal) both;
+  animation-delay: calc(var(--dds-typography-step, 0) * var(--motion-duration-stagger));
+}
+
+/*
+ * `from`: the words the text starts as, in the same cell as the words it becomes. At rest only the
+ * final words are drawn. Arriving, the first words hold for motion.duration.hold, rise away over
+ * motion.duration.normal, and the final ones come up into their place over motion.duration.slow.
+ */
+:where([data-dds-context="marketing"]) .dds-typography [data-swap] {
+  display: inline-grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-swap] > * {
+  grid-area: 1 / 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography [data-word='from'] {
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='from'] {
+  display: inline;
+}
+
+@keyframes dds-typography-swap-leave {
+  from {
+    visibility: visible;
+  }
+
+  to {
+    opacity: var(--opacity-hidden);
+    translate: 0 calc(-1 * var(--space-gap-xs));
+    visibility: hidden;
+  }
+}
+
+@keyframes dds-typography-swap-arrive {
+  from {
+    opacity: var(--opacity-hidden);
+    translate: 0 var(--space-gap-xs);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='from'] {
+  animation: dds-typography-swap-leave var(--motion-duration-normal) var(--motion-easing-reveal) var(--motion-duration-hold) both;
+}
+
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='to'] {
+  animation: dds-typography-swap-arrive var(--motion-duration-slow) var(--motion-easing-reveal)
+    calc(var(--motion-duration-hold) + var(--motion-duration-normal)) both;
+}
+
+/* Waiting: held at the first frame. */
+:where([data-dds-context="marketing"]) .dds-typography[data-arrival='waiting'] :is([data-reel], [data-word]) {
+  animation-play-state: paused !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-typography[data-arrival] :is([data-reel], [data-word]) {
+    animation: none;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-typography[data-arrival] [data-word='from'] {
+    display: none;
+  }
+}

package/dist/components/estimator-data.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The figures an Estimator lays out once a reader has filled its inputs in.
+ *
+ * Exported from the package for the reason `stats-data.ts` and `comparison-cards-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a result is a number and the words that say
+ * what it is — nothing in it is an element a page composes. The page works the figures out, from a
+ * live feed, a formula or both; the block only sets them, so the same block serves a margin
+ * calculator, a crypto converter and an affiliate's income estimate without knowing which.
+ */
+/** One figure an Estimator shows: what it is, its value, and anything a reader needs to read it. */
+export interface EstimatorResult {
+    /** What the figure is, in a few words: 'Margin required', 'You receive', 'Monthly income'. */
+    label: string;
+    /**
+     * The figure, written exactly as it is to be read: '1,240.50 USD', '0.0214 BTC', '$2,400'.
+     *
+     * A string rather than a number, because the way it is written is the page's: its currency, its
+     * digits, its grouping, its locale. The block draws it as given and isolates it, so a sign or a
+     * currency keeps its place in a right-to-left line.
+     */
+    value: string;
+    /**
+     * A line under the figure, where it needs one to be read correctly: 'Per lot, at 1:500
+     * leverage', 'Estimate at the current price'. Optional; most figures need none.
+     */
+    note?: string;
+}

package/dist/components/estimator-data.js

@@ -0,0 +1,12 @@
+/**
+ * The figures an Estimator lays out once a reader has filled its inputs in.
+ *
+ * Exported from the package for the reason `stats-data.ts` and `comparison-cards-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per figure, because a result is a number and the words that say
+ * what it is — nothing in it is an element a page composes. The page works the figures out, from a
+ * live feed, a formula or both; the block only sets them, so the same block serves a margin
+ * calculator, a crypto converter and an affiliate's income estimate without knowing which.
+ */
+export {};

package/dist/components/illustration-data.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The records the Illustration family's parts draw from.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value and
+ * hands it over, and building it without the type means writing the shape out twice.
+ */
+/** One option in an IllustrationChoice: what it is called, and a line under it where it needs one. */
+export interface IllustrationChoiceOption {
+    /** Which option this is; the choice's `value` names the one picked. */
+    value: string;
+    /** The option's name, in a few words — "Demo account". */
+    label: string;
+    /** A line under the name saying what the option means — "Practise with virtual funds". */
+    description?: string;
+}

package/dist/components/illustration-data.js

@@ -0,0 +1,7 @@
+/**
+ * The records the Illustration family's parts draw from.
+ *
+ * Exported from the package for the reason the other data shapes are: the page builds the value and
+ * hands it over, and building it without the type means writing the shape out twice.
+ */
+export {};

package/dist/components/index.d.ts

@@ -40,10 +40,16 @@ export { DataTable, type DataTableProps } from './blocks/data-table/DataTable.js
 export { dataTableParts, dataTableDefaults } from './blocks/data-table/DataTable.types.js';
 export { Divider, type DividerProps } from './core/divider/Divider.js';
 export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
+export { DocumentLink, type DocumentLinkProps } from './core/document-link/DocumentLink.js';
+export { documentLinkParts, documentLinkDefaults } from './core/document-link/DocumentLink.types.js';
+export { Documents, type DocumentsProps } from './blocks/documents/Documents.js';
+export { documentsParts, documentsDefaults } from './blocks/documents/Documents.types.js';
 export { DownloadBanner, type DownloadBannerProps } from './blocks/download-banner/DownloadBanner.js';
 export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu, type DropdownMenuProps } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { Estimator, type EstimatorProps } from './blocks/estimator/Estimator.js';
+export { estimatorParts, estimatorDefaults } from './blocks/estimator/Estimator.types.js';
 export { FaqAccordion, type FaqAccordionProps } from './blocks/faq-accordion/FaqAccordion.js';
 export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
 export { FeatureBullets, type FeatureBulletsProps } from './blocks/feature-bullets/FeatureBullets.js';
@@ -58,6 +64,8 @@ export { FeatureSplit, type FeatureSplitProps } from './blocks/feature-split/Fea
 export { featureSplitParts, featureSplitDefaults } from './blocks/feature-split/FeatureSplit.types.js';
 export { FeatureStack, type FeatureStackProps } from './blocks/feature-stack/FeatureStack.js';
 export { featureStackParts, featureStackDefaults } from './blocks/feature-stack/FeatureStack.types.js';
+export { FeatureTabs, type FeatureTabsProps } from './blocks/feature-tabs/FeatureTabs.js';
+export { featureTabsParts, featureTabsDefaults } from './blocks/feature-tabs/FeatureTabs.types.js';
 export { FilterChip, type FilterChipProps } from './core/filter-chip/FilterChip.js';
 export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
 export { Footer, type FooterProps } from './core/footer/Footer.js';
@@ -70,6 +78,14 @@ export { Icon, type IconProps } from './core/icon/Icon.js';
 export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
 export { IllustrationCard, type IllustrationCardProps } from './core/illustration-card/IllustrationCard.js';
 export { illustrationCardParts, illustrationCardDefaults } from './core/illustration-card/IllustrationCard.types.js';
+export { IllustrationCheck, type IllustrationCheckProps } from './core/illustration-check/IllustrationCheck.js';
+export { illustrationCheckParts, illustrationCheckDefaults } from './core/illustration-check/IllustrationCheck.types.js';
+export { IllustrationChoice, type IllustrationChoiceProps } from './core/illustration-choice/IllustrationChoice.js';
+export { illustrationChoiceParts } from './core/illustration-choice/IllustrationChoice.types.js';
+export { IllustrationCode, type IllustrationCodeProps } from './core/illustration-code/IllustrationCode.js';
+export { illustrationCodeParts, illustrationCodeDefaults } from './core/illustration-code/IllustrationCode.types.js';
+export { IllustrationList, type IllustrationListProps } from './core/illustration-list/IllustrationList.js';
+export { illustrationListParts } from './core/illustration-list/IllustrationList.types.js';
 export { IllustrationScene, type IllustrationSceneProps } from './core/illustration-scene/IllustrationScene.js';
 export { illustrationSceneParts, illustrationSceneDefaults } from './core/illustration-scene/IllustrationScene.types.js';
 export { ImageBanner, type ImageBannerProps } from './blocks/image-banner/ImageBanner.js';
@@ -109,6 +125,8 @@ export { PaginationDots, type PaginationDotsProps } from './core/pagination-dots
 export { paginationDotsParts, paginationDotsDefaults } from './core/pagination-dots/PaginationDots.types.js';
 export { ProductHero, type ProductHeroProps } from './blocks/product-hero/ProductHero.js';
 export { productHeroParts, productHeroDefaults } from './blocks/product-hero/ProductHero.types.js';
+export { ProgressBar, type ProgressBarProps } from './core/progress-bar/ProgressBar.js';
+export { progressBarParts, progressBarDefaults } from './core/progress-bar/ProgressBar.types.js';
 export { RemovableChip, type RemovableChipProps } from './core/removable-chip/RemovableChip.js';
 export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
 export { ResourceBanner, type ResourceBannerProps } from './blocks/resource-banner/ResourceBanner.js';
@@ -117,6 +135,8 @@ export { Row, type RowProps } from './layout/row/Row.js';
 export { rowParts, rowDefaults } from './layout/row/Row.types.js';
 export { SceneScroll, type SceneScrollProps } from './blocks/scene-scroll/SceneScroll.js';
 export { sceneScrollParts, sceneScrollDefaults } from './blocks/scene-scroll/SceneScroll.types.js';
+export { SceneScrollWord, type SceneScrollWordProps } from './blocks/scene-scroll-word/SceneScrollWord.js';
+export { sceneScrollWordParts, sceneScrollWordDefaults } from './blocks/scene-scroll-word/SceneScrollWord.types.js';
 export { Scroller, type ScrollerProps } from './layout/scroller/Scroller.js';
 export { scrollerParts, scrollerDefaults } from './layout/scroller/Scroller.types.js';
 export { SearchInput, type SearchInputProps } from './core/search-input/SearchInput.js';
@@ -135,6 +155,8 @@ export { Stack, type StackProps } from './layout/stack/Stack.js';
 export { stackParts, stackDefaults } from './layout/stack/Stack.types.js';
 export { Stats, type StatsProps } from './blocks/stats/Stats.js';
 export { statsParts, statsDefaults } from './blocks/stats/Stats.types.js';
+export { StatsCarousel, type StatsCarouselProps } from './blocks/stats-carousel/StatsCarousel.js';
+export { statsCarouselParts, statsCarouselDefaults } from './blocks/stats-carousel/StatsCarousel.types.js';
 export { StatusDot, type StatusDotProps } from './core/status-dot/StatusDot.js';
 export { statusDotParts, statusDotDefaults } from './core/status-dot/StatusDot.types.js';
 export { Steps, type StepsProps } from './blocks/steps/Steps.js';
@@ -187,9 +209,11 @@ export type { ComparisonCardsCard } from './comparison-cards-data.js';
 export type { ComparisonTableColumn, ComparisonTableRow } from './comparison-table-data.js';
 export type { DataTableColumn, DataTableRow } from './data-table-data.js';
 export type { DownloadBannerBadge, DownloadBannerQr } from './download-banner-data.js';
+export type { EstimatorResult } from './estimator-data.js';
+export type { IllustrationChoiceOption } from './illustration-data.js';
 export type { LogoTile } from './logo-data.js';
 export type { ResourceBannerLink } from './resource-banner-data.js';
-export type { SceneScrollScene } from './scene-scroll-data.js';
+export type { SceneScrollScene, SceneScrollWordScene } from './scene-scroll-data.js';
 export type { FeatureScrollStep } from './scroll-data.js';
 export type { StatsFigure } from './stats-data.js';
 export type { StepsItem } from './steps-data.js';

package/dist/components/index.js

@@ -41,10 +41,16 @@ export { DataTable } from './blocks/data-table/DataTable.js';
 export { dataTableParts, dataTableDefaults } from './blocks/data-table/DataTable.types.js';
 export { Divider } from './core/divider/Divider.js';
 export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
+export { DocumentLink } from './core/document-link/DocumentLink.js';
+export { documentLinkParts, documentLinkDefaults } from './core/document-link/DocumentLink.types.js';
+export { Documents } from './blocks/documents/Documents.js';
+export { documentsParts, documentsDefaults } from './blocks/documents/Documents.types.js';
 export { DownloadBanner } from './blocks/download-banner/DownloadBanner.js';
 export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { Estimator } from './blocks/estimator/Estimator.js';
+export { estimatorParts, estimatorDefaults } from './blocks/estimator/Estimator.types.js';
 export { FaqAccordion } from './blocks/faq-accordion/FaqAccordion.js';
 export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
 export { FeatureBullets } from './blocks/feature-bullets/FeatureBullets.js';
@@ -59,6 +65,8 @@ export { FeatureSplit } from './blocks/feature-split/FeatureSplit.js';
 export { featureSplitParts, featureSplitDefaults } from './blocks/feature-split/FeatureSplit.types.js';
 export { FeatureStack } from './blocks/feature-stack/FeatureStack.js';
 export { featureStackParts, featureStackDefaults } from './blocks/feature-stack/FeatureStack.types.js';
+export { FeatureTabs } from './blocks/feature-tabs/FeatureTabs.js';
+export { featureTabsParts, featureTabsDefaults } from './blocks/feature-tabs/FeatureTabs.types.js';
 export { FilterChip } from './core/filter-chip/FilterChip.js';
 export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
 export { Footer } from './core/footer/Footer.js';
@@ -71,6 +79,14 @@ export { Icon } from './core/icon/Icon.js';
 export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
 export { IllustrationCard } from './core/illustration-card/IllustrationCard.js';
 export { illustrationCardParts, illustrationCardDefaults } from './core/illustration-card/IllustrationCard.types.js';
+export { IllustrationCheck } from './core/illustration-check/IllustrationCheck.js';
+export { illustrationCheckParts, illustrationCheckDefaults } from './core/illustration-check/IllustrationCheck.types.js';
+export { IllustrationChoice } from './core/illustration-choice/IllustrationChoice.js';
+export { illustrationChoiceParts } from './core/illustration-choice/IllustrationChoice.types.js';
+export { IllustrationCode } from './core/illustration-code/IllustrationCode.js';
+export { illustrationCodeParts, illustrationCodeDefaults } from './core/illustration-code/IllustrationCode.types.js';
+export { IllustrationList } from './core/illustration-list/IllustrationList.js';
+export { illustrationListParts } from './core/illustration-list/IllustrationList.types.js';
 export { IllustrationScene } from './core/illustration-scene/IllustrationScene.js';
 export { illustrationSceneParts, illustrationSceneDefaults } from './core/illustration-scene/IllustrationScene.types.js';
 export { ImageBanner } from './blocks/image-banner/ImageBanner.js';
@@ -110,6 +126,8 @@ export { PaginationDots } from './core/pagination-dots/PaginationDots.js';
 export { paginationDotsParts, paginationDotsDefaults } from './core/pagination-dots/PaginationDots.types.js';
 export { ProductHero } from './blocks/product-hero/ProductHero.js';
 export { productHeroParts, productHeroDefaults } from './blocks/product-hero/ProductHero.types.js';
+export { ProgressBar } from './core/progress-bar/ProgressBar.js';
+export { progressBarParts, progressBarDefaults } from './core/progress-bar/ProgressBar.types.js';
 export { RemovableChip } from './core/removable-chip/RemovableChip.js';
 export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
 export { ResourceBanner } from './blocks/resource-banner/ResourceBanner.js';
@@ -118,6 +136,8 @@ export { Row } from './layout/row/Row.js';
 export { rowParts, rowDefaults } from './layout/row/Row.types.js';
 export { SceneScroll } from './blocks/scene-scroll/SceneScroll.js';
 export { sceneScrollParts, sceneScrollDefaults } from './blocks/scene-scroll/SceneScroll.types.js';
+export { SceneScrollWord } from './blocks/scene-scroll-word/SceneScrollWord.js';
+export { sceneScrollWordParts, sceneScrollWordDefaults } from './blocks/scene-scroll-word/SceneScrollWord.types.js';
 export { Scroller } from './layout/scroller/Scroller.js';
 export { scrollerParts, scrollerDefaults } from './layout/scroller/Scroller.types.js';
 export { SearchInput } from './core/search-input/SearchInput.js';
@@ -136,6 +156,8 @@ export { Stack } from './layout/stack/Stack.js';
 export { stackParts, stackDefaults } from './layout/stack/Stack.types.js';
 export { Stats } from './blocks/stats/Stats.js';
 export { statsParts, statsDefaults } from './blocks/stats/Stats.types.js';
+export { StatsCarousel } from './blocks/stats-carousel/StatsCarousel.js';
+export { statsCarouselParts, statsCarouselDefaults } from './blocks/stats-carousel/StatsCarousel.types.js';
 export { StatusDot } from './core/status-dot/StatusDot.js';
 export { statusDotParts, statusDotDefaults } from './core/status-dot/StatusDot.types.js';
 export { Steps } from './blocks/steps/Steps.js';

package/dist/components/layout/grid/Grid.css

@@ -32,6 +32,11 @@
   gap: var(--space-gap-3xl);
 }
 
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="gutter"] {
+  --dds-grid-gap: var(--space-grid-gutter);
+  gap: var(--space-grid-gutter);
+}
+
 :where([data-dds-context="marketing"]) .dds-grid[data-gap="lg"] {
   --dds-grid-gap: var(--space-gap-lg);
   gap: var(--space-gap-lg);

package/dist/components/layout/grid/Grid.types.d.ts

@@ -9,8 +9,9 @@ export interface GridOwnProps {
      * `xl` — Between the parts of a card, taken as a field — cells that each hold a picture as well as words. Drops one step below 768px, a phone having a third of the width to spend
      * `2xl` — Between one section of a page and the next, laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
      * `3xl` — The largest gap, for separating whole movements of a page laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
+     * `gutter` — A row of cards — the gutter every card block (FeatureCards, ComparisonCards, Tiers, TeamGrid) sets between its cards, so a grid of cards composed on a page stands as those do. Narrower on a phone, as theirs is
      */
-    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'gutter';
     /**
      * `sm` — The narrow floor, for a cell holding a logo, an icon and a word, or one short claim. Six of these clear the page's measure with its gutter still on both sides
      * `md` — The default floor, for a feature card: a heading and a line or two beneath it. Four fit the page's measure, so a field of three has room to spare

package/dist/components/scene-scroll-data.d.ts

@@ -16,6 +16,41 @@ export interface SceneScrollScene {
     title: string;
     /** A line under the title saying what it means for the reader. A sentence or two, not a paragraph. */
     description?: string;
+    /**
+     * The ink the scene's words are drawn in, decided by the photograph behind them, since nothing
+     * lies between the two: `light`, white, over a dark photograph, and `dark`, near-black, over a
+     * light one — a daylight sky. The block cannot see the photograph, so this is the author's to get
+     * right, and AA contrast is theirs to check against the part of the photograph the words sit on.
+     * `light` where it is left out.
+     */
+    ink?: 'light' | 'dark';
+    /**
+     * The photograph filling the band behind the words, cropped to fill it. Usually decoration, so
+     * `alt` is empty; a photograph that shows something the words do not say is described.
+     */
+    image: BlockImage;
+}
+/**
+ * One scene of a SceneScrollWord: the word that completes the section's shared title, the line
+ * under it, and the photograph behind them.
+ */
+export interface SceneScrollWordScene {
+    /**
+     * The scene's word, drawn between the section's `titleBefore` and `titleAfter` — "day" for
+     * "Trade all day". The two scenes' words are of about the same length, so the words around them do
+     * not move as one replaces the other.
+     */
+    word: string;
+    /** A line under the title saying what it means for the reader. A sentence or two, not a paragraph. */
+    description?: string;
+    /**
+     * The ink the scene's words are drawn in, decided by the photograph behind them, since nothing
+     * lies between the two: `light`, white, over a dark photograph, and `dark`, near-black, over a
+     * light one — a daylight sky. The block cannot see the photograph, so this is the author's to get
+     * right, and AA contrast is theirs to check against the part of the photograph the words sit on.
+     * `light` where it is left out.
+     */
+    ink?: 'light' | 'dark';
     /**
      * The photograph filling the band behind the words, cropped to fill it. Usually decoration, so
      * `alt` is empty; a photograph that shows something the words do not say is described.

package/dist/components/tiers-data.d.ts

@@ -40,8 +40,9 @@ export interface TiersItem {
     description: string;
     /**
      * What it takes to reach the tier, under the card — '3-month average commission:\n$500+'. A line
-     * break in it is kept, so the measure and the amount can sit on lines of their own. Absent for the
-     * entry tier, which a partner holds from the day they join.
+     * break in it is kept, so the measure and the amount can sit on lines of their own. Give the entry
+     * tier one too — what it takes to join, 'To join:\nSign up as a partner' — so every card has the
+     * same line under it. Left out, that tier's card has nothing under it and the row reads unfinished.
      */
     qualification?: string;
 }

package/dist/icons/accounts.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/accounts';

package/dist/icons/accounts.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/accounts';

package/dist/icons/app-stores.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/app-stores';

package/dist/icons/app-stores.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/app-stores';

package/dist/icons/currency.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/currency';

package/dist/icons/currency.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/currency';

package/dist/icons/flag.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/flag';

package/dist/icons/flag.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/flag';

package/dist/icons/illustrative.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/illustrative';

package/dist/icons/illustrative.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/illustrative';

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web';

package/dist/icons/index.js

@@ -0,0 +1,4 @@
+// Every Quill icon, re-exported so an app installs only @deriv-com/dds-marketing. Prefer a
+// group subpath (`@deriv-com/dds-marketing/icons/system`) where you can: the full index is ~1,850 icons,
+// and a dev server that does not tree-shake loads all of them.
+export * from '@deriv-com/quill-icons-web';

package/dist/icons/markets.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/markets';

package/dist/icons/markets.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/markets';

package/dist/icons/social.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/social';

package/dist/icons/social.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/social';

package/dist/icons/system.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/system';

package/dist/icons/system.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/system';

package/dist/icons/trade.d.ts

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/trade';

package/dist/icons/trade.js

@@ -0,0 +1 @@
+export * from '@deriv-com/quill-icons-web/trade';

package/dist/marketing.css

@@ -20,6 +20,8 @@
   --border-width-none: 0px;
   --border-width-strong: 2px;
   --border-width-thick: 4px;
+  --color-bg-accent-slate-subtle: #F3F5FA;
+  --color-bg-accent-slate: #181C25;
   --color-bg-active-inverse: #FFFFFF14;
   --color-bg-active-on-brand-strong: #FFFFFF14;
   --color-bg-active: #00000014;
@@ -27,7 +29,7 @@
   --color-bg-brand-active: #D2002A;
   --color-bg-brand-deep: #3F0000;
   --color-bg-brand-hover: #E82A3D;
-  --color-bg-brand-strong: #0C0C0C;
+  --color-bg-brand-strong: #181C25;
   --color-bg-brand-subtle: #FFE4E1;
   --color-bg-brand: #FF444F;
   --color-bg-danger-subtle: #FFE7E0;
@@ -53,8 +55,9 @@
   --color-bg-surface-card-light-raised: #FFFFFF;
   --color-bg-surface-card-light: #F4F5F6;
   --color-bg-surface-card-raised: #FFFFFF;
-  --color-bg-surface-card-strong-raised: #202020;
-  --color-bg-surface-card-strong: #202020;
+  --color-bg-surface-card-strong-on-brand-strong: #242934;
+  --color-bg-surface-card-strong-raised: #181C25;
+  --color-bg-surface-card-strong: #181C25;
   --color-bg-surface-glass: #FFFFFFE0;
   --color-bg-surface-inverse: #FFFFFF14;
   --color-bg-surface-modal: #FFFFFF;
@@ -72,6 +75,7 @@
   --color-bg-transparent: #FFFFFF00;
   --color-bg-warning-subtle: #FFEFCB;
   --color-bg-warning: #F59E0B;
+  --color-border-accent-slate: #181C25;
   --color-border-danger: #E3272A;
   --color-border-default: #00000029;
   --color-border-focus-inverse: #FFFFFF;
@@ -80,11 +84,13 @@
   --color-border-info: #0068FF;
   --color-border-pattern-inverse: #FFFFFF3D;
   --color-border-pattern: #0000001A;
+  --color-border-strong-inverse: #FFFFFFA3;
   --color-border-strong: #63666B;
   --color-border-subtle-inverse: #FFFFFF29;
   --color-border-subtle: #0000000F;
   --color-border-success: #00A14E;
   --color-border-warning: #F59E0B;
+  --color-fg-accent-slate: #464D5D;
   --color-fg-brand-accent: #FF444F;
   --color-fg-brand: #AA0000;
   --color-fg-danger: #C00000;
@@ -95,6 +101,7 @@
   --color-fg-muted: #63666B;
   --color-fg-on-brand-strong: #FFFFFF;
   --color-fg-on-brand: #FFFFFF;
+  --color-fg-on-media-light: #0C0C0C;
   --color-fg-on-solid: #FFFFFF;
   --color-fg-on-strong-on-brand: #FFFFFF;
   --color-fg-on-strong: #FFFFFF;
@@ -224,6 +231,7 @@
   --layer-overlay: 800;
   --layer-popup: 400;
   --motion-distance-drift: 64px;
+  --motion-distance-shake: 4px;
   --motion-duration-dramatic: 700ms;
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
@@ -318,6 +326,8 @@
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
   --size-mesh-blur: 48px;
+  --size-progressbar-track-md: 8px;
+  --size-progressbar-track-sm: 4px;
   --size-review-card-min: 320px;
   --size-rings-pitch: 64px;
   --size-rings-spotlight: 128px;
@@ -391,6 +401,8 @@
   --border-width-none: 0px;
   --border-width-strong: 2px;
   --border-width-thick: 4px;
+  --color-bg-accent-slate-subtle: #090C12;
+  --color-bg-accent-slate: #868E9F;
   --color-bg-active-inverse: #00000014;
   --color-bg-active-on-brand-strong: #FFFFFF14;
   --color-bg-active: #FFFFFF14;
@@ -398,7 +410,7 @@
   --color-bg-brand-active: #D2002A;
   --color-bg-brand-deep: #3F0000;
   --color-bg-brand-hover: #E82A3D;
-  --color-bg-brand-strong: #0C0C0C;
+  --color-bg-brand-strong: #090C12;
   --color-bg-brand-subtle: #3F0000;
   --color-bg-brand: #FF444F;
   --color-bg-danger-subtle: #390000;
@@ -424,8 +436,9 @@
   --color-bg-surface-card-light-raised: #F4F5F6;
   --color-bg-surface-card-light: #F4F5F6;
   --color-bg-surface-card-raised: #FFFFFF0F;
-  --color-bg-surface-card-strong-raised: #363636;
-  --color-bg-surface-card-strong: #202020;
+  --color-bg-surface-card-strong-on-brand-strong: #181C25;
+  --color-bg-surface-card-strong-raised: #303644;
+  --color-bg-surface-card-strong: #181C25;
   --color-bg-surface-glass: #FFFFFF1F;
   --color-bg-surface-inverse: #FFFFFF14;
   --color-bg-surface-modal: #202020;
@@ -443,6 +456,7 @@
   --color-bg-transparent: #FFFFFF00;
   --color-bg-warning-subtle: #360F00;
   --color-bg-warning: #FDAE43;
+  --color-border-accent-slate: #868E9F;
   --color-border-danger: #F6554D;
   --color-border-default: #FFFFFF29;
   --color-border-focus-inverse: #0C0C0C;
@@ -451,11 +465,13 @@
   --color-border-info: #3786FF;
   --color-border-pattern-inverse: #FFFFFF3D;
   --color-border-pattern: #FFFFFF3D;
+  --color-border-strong-inverse: #FFFFFFA3;
   --color-border-strong: #A2A7AD;
   --color-border-subtle-inverse: #FFFFFF29;
   --color-border-subtle: #FFFFFF0F;
   --color-border-success: #45B569;
   --color-border-warning: #FDAE43;
+  --color-fg-accent-slate: #9FA7B7;
   --color-fg-brand-accent: #FF444F;
   --color-fg-brand: #FF8583;
   --color-fg-danger: #FF796E;
@@ -466,6 +482,7 @@
   --color-fg-muted: #A2A7AD;
   --color-fg-on-brand-strong: #FFFFFF;
   --color-fg-on-brand: #FFFFFF;
+  --color-fg-on-media-light: #0C0C0C;
   --color-fg-on-solid: #0C0C0C;
   --color-fg-on-strong-on-brand: #FFFFFF;
   --color-fg-on-strong: #0C0C0C;
@@ -581,6 +598,7 @@
   --layer-overlay: 800;
   --layer-popup: 400;
   --motion-distance-drift: 64px;
+  --motion-distance-shake: 4px;
   --motion-duration-dramatic: 700ms;
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
@@ -675,6 +693,8 @@
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
   --size-mesh-blur: 48px;
+  --size-progressbar-track-md: 8px;
+  --size-progressbar-track-sm: 4px;
   --size-review-card-min: 320px;
   --size-rings-pitch: 64px;
   --size-rings-spotlight: 128px;