@deriv-web-design/ui 0.1.5 → 0.1.8

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ChangeEvent, ComponentProps } from 'react';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
 type ButtonColorScheme = "coral" | "black" | "white";
@@ -96,6 +96,10 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "cl
     status?: TextFieldStatus;
     /** Applied to the outermost field container */
     className?: string;
+    /** Optional label rendered inside the field box, stacked above the
+     *  input (rather than as a separate element above the box). Omit for
+     *  the default single-row field with no in-box label. */
+    label?: ReactNode;
 }
 
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
@@ -107,10 +111,25 @@ interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
     variant?: SearchFieldVariant;
     /** Visual validation state. Defaults to "neutral". */
     status?: SearchFieldStatus;
+    /** Shows the leading search (magnifying-glass) icon. Defaults to `true`.
+     *  Set to `false` for icon-less search bars (e.g. a Help Centre style
+     *  search field where the placeholder text alone signals its purpose). */
+    showSearchIcon?: boolean;
     /** Called when the clear (×) button is clicked.
      *  In controlled mode, update your value state here.
      *  In uncontrolled mode the input is cleared automatically. */
     onClear?: () => void;
+    /** Optional label rendered inside the field box, stacked above the
+     *  input (rather than as a separate element above the box). Omit for
+     *  the default single-row field with no in-box label. */
+    label?: ReactNode;
+    /** Optional trailing content rendered after the input/clear button —
+     *  e.g. a chevron when this field doubles as a combobox trigger. */
+    trailingSlot?: ReactNode;
+    /** Suppresses the built-in clear (×) button regardless of value —
+     *  useful when `trailingSlot` already conveys the field's affordance
+     *  (e.g. a combobox chevron) and a clear control isn't wanted. */
+    hideClearButton?: boolean;
     className?: string;
 }
 
@@ -472,6 +491,14 @@ interface FooterAiSummaryProps {
     /** List of AI app items */
     items: FooterAiSummaryItem[];
 }
+interface FooterTradeOnProps {
+    /** Badge image source — a self-contained graphic (background + logo + wordmark baked in) */
+    imageSrc: string;
+    /** Image alt text */
+    imageAlt: string;
+    /** Link href */
+    href?: string;
+}
 interface FooterProps extends HTMLAttributes<HTMLElement> {
     /** Deriv logo image source */
     logoSrc: string;
@@ -487,10 +514,19 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
     socialLinks?: FooterSocialLink[];
     /** Deriv GO promotion banner */
     derivGo?: FooterDerivGoProps;
+    /** "Trade on TradingView" promotion banner */
+    tradingView?: FooterTradeOnProps;
     /** "Investors in People" badge image source */
     investorsInPeopleSrc?: string;
     /** Alt text for the Investors in People badge */
     investorsInPeopleAlt?: string;
+    /**
+     * Moves the "Investors in People" badge into the header row (desktop
+     * only, replacing the AI summary bar's slot) and centers the social
+     * icons between the logo and the badge, instead of showing the badge
+     * in the sidebar/stacked position below the nav.
+     */
+    investorsInPeopleInHeader?: boolean;
     /** Legal / licence text block (supports ReactNode for inline links) */
     licenseText?: ReactNode;
     /** Risk-warning paragraph text */
@@ -504,7 +540,7 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
     aiSummary?: FooterAiSummaryProps;
 }
 
-declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, investorsInPeopleSrc, investorsInPeopleAlt, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
+declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, tradingView, investorsInPeopleSrc, investorsInPeopleAlt, investorsInPeopleInHeader, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
 type HeroVariant = "split" | "centered" | "showcase";
 interface HeroButtonProps {
@@ -565,7 +601,7 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
 
 declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
 
-type HeaderVariant = "visuals" | "minimal";
+type HeaderVariant = "visuals" | "minimal" | "dark" | "dark-search";
 interface HeaderButtonProps {
     /** Button label text */
     label: string;
@@ -574,13 +610,30 @@ interface HeaderButtonProps {
     /** Link href — renders an anchor if provided */
     href?: string;
 }
+interface HeaderSearchProps {
+    /** Placeholder text for the search input. Defaults to "Search". */
+    placeholder?: string;
+    /** Controlled input value */
+    value?: string;
+    /** Change handler for controlled usage */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Called when the clear (×) button is pressed */
+    onClear?: () => void;
+    /** Called on Enter keypress with the current input value */
+    onSubmit?: (value: string) => void;
+}
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant:
      *
-     * - "visuals" — light grey bg + SVG grid, center-aligned text, floating visuals left & right,
-     *               parallax scroll effect on visuals, min-height 540px
-     * - "minimal" — same as visuals but without the floating graphics
+     * - "visuals"     — light grey bg + SVG grid, center-aligned text, floating visuals left & right,
+     *                   parallax scroll effect on visuals, min-height 540px
+     * - "minimal"     — same as visuals but without the floating graphics
+     * - "dark"        — dark navy bg + SVG grid, center-aligned text, no floating visuals,
+     *                   min-height 420px on mobile/tablet, 460px on desktop (shorter than
+     *                   the light variants)
+     * - "dark-search" — same as "dark" plus a search field below the text, for pages such as
+     *                   the Help Centre index
      */
     variant: HeaderVariant;
     /** Optional eyebrow / subtitle above the title */
@@ -591,27 +644,32 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
     description?: string;
     /**
      * Primary CTA button (coral).
-     * Shown on both variants.
+     * Shown on all variants.
      */
     primaryButton?: HeaderButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on both variants.
+     * Shown on all variants.
      */
     secondaryButton?: HeaderButtonProps;
     /**
-     * Left floating visual for the Visuals variant.
+     * Left floating visual for the "visuals" variant.
      * Accepts a ReactNode or image URL string.
      */
     leftVisual?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant.
+     * Right floating visual for the "visuals" variant.
      * Accepts a ReactNode or image URL string.
      */
     rightVisual?: ReactNode | string;
+    /**
+     * Search field configuration for the "dark-search" variant (e.g. Help Centre header).
+     * The field always renders for that variant; this prop only customises it.
+     */
+    search?: HeaderSearchProps;
 }
 
-declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, search, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -1156,6 +1214,43 @@ interface TableProps extends HTMLAttributes<HTMLDivElement> {
 
 declare const Table: ({ sectionTitle, columns, rows, mainColumnKey, pageSize, searchPlaceholder, infoText, className, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
 
+/** Visual column-count variant */
+type DynamicTableVariant = "Three columns" | "Four columns";
+/** Single column definition */
+interface DynamicTableColumnDef {
+    /** Unique key matching the row data field */
+    key: string;
+    /**
+     * Header label text.
+     * Pass an array for multi-line headers (e.g. ["Spread", "reduction"]).
+     */
+    header: string | string[];
+}
+/**
+ * A single row of table data.
+ * Values are plain strings, newline-separated strings, or string arrays
+ * (each item renders on its own line).
+ */
+interface DynamicTableRowData {
+    [key: string]: string | string[] | undefined;
+}
+interface DynamicTableProps extends HTMLAttributes<HTMLElement> {
+    /** Optional section title rendered above the table */
+    sectionTitle?: string;
+    /**
+     * Column-count variant.
+     * - `Three columns` — one label column + two comparison columns
+     * - `Four columns` — one label column + three comparison columns
+     */
+    variant?: DynamicTableVariant;
+    /** Column definitions (order matters). Extra columns beyond the variant are ignored. */
+    columns: DynamicTableColumnDef[];
+    /** Row data */
+    rows: DynamicTableRowData[];
+}
+
+declare const DynamicTable: ({ sectionTitle, variant, columns, rows, className, ...props }: DynamicTableProps) => react_jsx_runtime.JSX.Element;
+
 interface PersonItem {
     /** Person's full name */
     name: string;
@@ -1202,10 +1297,12 @@ declare const Leaders: ({ title, description, items, initialVisibleCount, expand
 interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant.
-     * - `"split"` (default): image fills the right-hand panel; text on the left.
-     * - `"full-bg"`: image covers the entire card as a background; text overlaid on top.
+     * - `"split-left"` (default): text on the left; image fills the right-hand panel.
+     * - `"split-right"`: image fills the left-hand panel; text on the right.
+     * - `"full-bg-left"`: image covers the entire card as a background; text overlaid on the left.
+     * - `"full-bg-right"`: image covers the entire card as a background; text overlaid on the right.
      */
-    variant?: "split" | "full-bg";
+    variant?: "split-left" | "split-right" | "full-bg-left" | "full-bg-right";
     /** Section headline */
     title?: string;
     /** Supporting body copy beneath the title */
@@ -1218,8 +1315,9 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
     onCtaClick?: () => void;
     /**
      * URL of the photo.
-     * - `"split"`: fills the right-hand panel; stacks below text on mobile.
-     * - `"full-bg"`: covers the entire card as a background image.
+     * - `"split-left"`: fills the right-hand panel; stacks below text on mobile.
+     * - `"split-right"`: fills the left-hand panel; stacks above text on mobile.
+     * - `"full-bg-left"` / `"full-bg-right"`: covers the entire card as a background image.
      */
     imageUrl?: string;
     /** Accessible alt text for the image */
@@ -1239,17 +1337,43 @@ interface TestimonialItem {
     authorLocation?: string;
     /** Optional author avatar image URL */
     avatarUrl?: string;
+    /**
+     * `trustpilot` variant only — star rating out of 5 shown on the card.
+     * Supports halves (e.g. `4.5`). Defaults to `5`.
+     */
+    rating?: number;
+    /**
+     * `trustpilot` variant only — link to the full review on Trustpilot.
+     * When omitted, the card links to `trustpilotUrl` instead.
+     */
+    reviewUrl?: string;
 }
 interface TestimonialProps {
     /** Section heading */
     title?: string;
-    /** Array of testimonial items to display in the carousel */
+    /** Array of testimonial items to display */
     items: TestimonialItem[];
     /** Optional CSS class name applied to the outer section */
     className?: string;
+    /**
+     * Visual style.
+     * - `default` (default): single-slide auto-advancing quote carousel with dot pagination.
+     * - `trustpilot`: horizontally-scrollable row of star-rated review cards, a "Trustpilot"
+     *   rating badge, and prev/next controls — modeled after deriv.com's homepage
+     *   "What our customers say" section.
+     */
+    variant?: "default" | "trustpilot";
+    /**
+     * `trustpilot` variant only — URL to the brand's Trustpilot profile page.
+     * Used by the footer rating badge link, and as the fallback link for any
+     * item without its own `reviewUrl`.
+     */
+    trustpilotUrl?: string;
+    /** `trustpilot` variant only — overall TrustScore shown in the footer badge (out of 5). */
+    trustpilotScore?: number;
 }
 
-declare const Testimonial: ({ title, items, className, ...props }: TestimonialProps) => react_jsx_runtime.JSX.Element | null;
+declare const Testimonial: (props: TestimonialProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ArticleHeroArticle {
     /** Article title */
@@ -1399,6 +1523,113 @@ declare const FEATURE_AWARDS_TEXT_CONTENT: {
 declare const DEFAULT_AWARDS: AwardItem[];
 declare const FeatureAwards: ({ title, awards, autoScrollDuration, className, ...props }: FeatureAwardsProps) => react_jsx_runtime.JSX.Element | null;
 
+interface FeatureBlogPost {
+    /** Post headline */
+    title: string;
+    /** Post summary / dek text */
+    summary: string;
+    /** Card thumbnail image */
+    thumbnail: string;
+    thumbnailAlt?: string;
+    /** Publish date label, e.g. "July 24, 2026" */
+    date?: string;
+    /** Category label, e.g. "Company" */
+    category?: string;
+    /** Link target — wraps the card in an anchor when set */
+    href?: string;
+    /** Click handler — used when `href` is not set */
+    onClick?: () => void;
+}
+interface FeatureBlogProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading. Defaults to "Deriv press releases". */
+    title?: string;
+    /** Posts rendered as a responsive card grid. */
+    posts: FeatureBlogPost[];
+    /** Show the "See all" link below the grid (default: true) */
+    showLink?: boolean;
+    /** Label for the "See all" link (default: "See all press releases") */
+    linkText?: string;
+    /** Href for the "See all" link */
+    linkHref?: string;
+    onLinkClick?: () => void;
+    /** Extra class name merged onto the root `<section>`. */
+    className?: string;
+}
+
+declare const FEATURE_BLOG_TEXT_CONTENT: {
+    title: string;
+    linkText: string;
+};
+declare const FeatureBlog: ({ title, posts, showLink, linkText, linkHref, onLinkClick, className, ...props }: FeatureBlogProps) => react_jsx_runtime.JSX.Element | null;
+
+interface FeatureBlogCategoryTab {
+    /** Stable identifier — must match `FeatureBlogCategoryPost.category` for filtering to work. CMS-managed. */
+    id: string;
+    /** Tab label shown in the pill row. CMS-managed. */
+    label: string;
+}
+interface FeatureBlogCategoryPost {
+    /** Post headline */
+    title: string;
+    /** Post summary / dek text */
+    summary: string;
+    /** Card thumbnail image */
+    thumbnail: string;
+    thumbnailAlt?: string;
+    /** Publish date label, e.g. "July 24, 2026" */
+    date?: string;
+    /** Category tab id this post belongs to (matches a `categories[].id`). Posts also always match the "all" tab. */
+    category: string;
+    /** Category chip label shown on the card. Defaults to the matching tab's `label` when omitted. */
+    categoryLabel?: string;
+    /**
+     * Destination URL. Absolute `http(s)://` URLs are treated as external and
+     * open in a new tab (`target="_blank" rel="noopener noreferrer"`);
+     * relative/internal paths (e.g. "/newsroom/my-article") navigate as a
+     * normal same-tab inner-page link.
+     */
+    href?: string;
+    /** Click handler — used when `href` is not set (renders a `<button>`) */
+    onClick?: () => void;
+}
+interface FeatureBlogCategoriesProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading. Defaults to "Deriv press releases". */
+    title?: string;
+    /** Category tabs, CMS-managed. An "all" tab is always prepended automatically. */
+    categories: FeatureBlogCategoryTab[];
+    /** Id used internally for the auto-prepended "show everything" tab (default: "all") */
+    allCategoryId?: string;
+    /** Label for the auto-prepended "show everything" tab (default: "View all") */
+    allCategoryLabel?: string;
+    /** Controlled active category tab id */
+    activeCategoryId?: string;
+    /** Initial active tab id for uncontrolled usage (default: `allCategoryId`) */
+    defaultActiveCategoryId?: string;
+    /** Called whenever a different tab is selected */
+    onCategoryChange?: (id: string) => void;
+    /** All posts — filtered client-side by the active tab and search query */
+    posts: FeatureBlogCategoryPost[];
+    /** Placeholder text for the search field (default: "Search") */
+    searchPlaceholder?: string;
+    /** Accessible label for the search field (defaults to `searchPlaceholder`) */
+    searchAriaLabel?: string;
+    /** Called on every keystroke in the search field with the current value */
+    onSearchChange?: (value: string) => void;
+    /** Message shown when no posts match the active tab + search query */
+    emptyStateText?: string;
+    /** Extra class name merged onto the root `<section>`. */
+    className?: string;
+}
+
+declare const FEATURE_BLOG_CATEGORIES_TEXT_CONTENT: {
+    title: string;
+    allCategoryId: string;
+    allCategoryLabel: string;
+    searchPlaceholder: string;
+    emptyStateText: string;
+};
+declare const FeatureBlogCategories: ({ title, categories, allCategoryId, allCategoryLabel, activeCategoryId, defaultActiveCategoryId, onCategoryChange, posts, searchPlaceholder, searchAriaLabel, onSearchChange, emptyStateText, className, ...props }: FeatureBlogCategoriesProps) => react_jsx_runtime.JSX.Element;
+
 interface HelpCentreCategoryItem {
     /** Stable identifier for the category (e.g. used for anchors or filtering) */
     id?: string;
@@ -1515,4 +1746,362 @@ interface HelpCenterPageProps {
 
 declare const HelpCenterPage: ({ categoryTitle, questions, activeQuestionId, defaultActiveQuestionId, onQuestionSelect, contentTitle, content, searchPlaceholder, searchAriaLabel, onSearchChange, searchNoResultsText, articlesSheetTitle, className, }: HelpCenterPageProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, DEFAULT_AWARDS, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
+type FeatureBlogContentBlockType = "heading" | "paragraph" | "list" | "quote" | "image";
+interface FeatureBlogContentBlock {
+    /** Block kind — "heading"/"paragraph"/"quote" use `text`, "list" uses `items`, "image" uses `image` */
+    type: FeatureBlogContentBlockType;
+    /** Text content for "heading" / "paragraph" / "quote" blocks */
+    text?: string;
+    /**
+     * Heading level for "heading" blocks (default: 2). Only level-2 headings
+     * are collected into the table of contents — level-3 headings render
+     * inline as sub-sections but are not listed.
+     */
+    level?: 2 | 3;
+    /** Stable anchor id for a "heading" block; auto-generated (slugified) from `text` when omitted */
+    id?: string;
+    /** List entries for "list" blocks */
+    items?: string[];
+    /** Render a "list" block as `<ol>` instead of `<ul>` (default: false) */
+    ordered?: boolean;
+    /** Citation / source line for "quote" blocks */
+    cite?: string;
+    /** Image source for "image" blocks */
+    image?: string;
+    imageAlt?: string;
+    /** Optional caption rendered below an "image" block */
+    caption?: string;
+}
+type FeatureBlogSharePlatform = "facebook" | "twitter" | "linkedin" | "telegram";
+interface FeatureBlogAuthor {
+    /** Author display name */
+    name: string;
+    /** Author avatar image */
+    avatar?: string;
+    avatarAlt?: string;
+}
+interface FeatureBlogPageProps {
+    /** Small category label rendered above the title (e.g. "Press releases") */
+    category?: string;
+    /** Article headline, rendered as the page's `<h1>` (required) */
+    title: string;
+    /** Publish date label shown in the meta row (e.g. "July 24, 2026") */
+    publishDate?: string;
+    /** Article author, shown in the meta row next to the publish date */
+    author?: FeatureBlogAuthor;
+    /** Hero image rendered below the title / meta row */
+    heroImage?: string;
+    heroImageAlt?: string;
+    /** Main article body, rendered from plain data blocks (required, at least 1 item) */
+    content: FeatureBlogContentBlock[];
+    /** Table of contents card heading (default: "Contents") */
+    tocTitle?: string;
+    /** Whether the table of contents starts expanded (default: true) */
+    tocDefaultOpen?: boolean;
+    /** Hide the table of contents entirely (default: false) — e.g. for very short articles with no level-2 headings */
+    hideToc?: boolean;
+    /** "Share article" label above the share icons (default: "Share article") */
+    shareTitle?: string;
+    /** Canonical URL used to build every share link and for "copy link"; sharing is hidden when omitted */
+    shareUrl?: string;
+    /** Text passed to platforms that accept share text (X/Twitter, Telegram); defaults to `title` */
+    shareText?: string;
+    /** Which social platforms to show, in order (default: all four) */
+    sharePlatforms?: FeatureBlogSharePlatform[];
+    /** Hide the share row entirely (default: false) */
+    hideShare?: boolean;
+    /** Fired whenever a share icon (including "copy link") is activated */
+    onShare?: (platform: FeatureBlogSharePlatform | "copy") => void;
+    /** Label shown briefly after "copy link" succeeds (default: "Copied!") */
+    copiedLabel?: string;
+    /** Additional CSS class on the outer `<section>` */
+    className?: string;
+}
+
+declare const FeatureBlogPage: ({ category, title, publishDate, author, heroImage, heroImageAlt, content, tocTitle, tocDefaultOpen, hideToc, shareTitle, shareUrl, shareText, sharePlatforms, hideShare, onShare, copiedLabel, className, }: FeatureBlogPageProps) => react_jsx_runtime.JSX.Element;
+
+interface ParallaxBannerCultureCard {
+    /** Card heading, e.g. "Integrity" */
+    title: string;
+    /** Supporting copy beneath the title */
+    description: string;
+}
+interface ParallaxBannerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Layout variant.
+     * - `"default"`: banner card plus a grid of culture/value cards beneath it.
+     * - `"banner-only"`: just the banner card — no cards grid.
+     */
+    variant?: "default" | "banner-only";
+    /** Banner headline. Defaults to "Our culture". */
+    title?: string;
+    /** Supporting copy beneath the headline */
+    description?: string;
+    /** CTA link label. Defaults to "Culture at Deriv". */
+    ctaLabel?: string;
+    /** CTA link href */
+    ctaHref?: string;
+    /** Callback fired when the CTA link is clicked */
+    onCtaClick?: () => void;
+    /** URL of the photo shown in the banner's image panel */
+    imageUrl?: string;
+    /** Accessible alt text for the banner photo */
+    imageAlt?: string;
+    /**
+     * Four (or more) short value/culture cards rendered in a grid below the
+     * banner. Ignored when `variant` is `"banner-only"`. Defaults to
+     * `DEFAULT_CULTURE_CARDS`.
+     */
+    cards?: ParallaxBannerCultureCard[];
+    /**
+     * Enables the subtle scroll-linked parallax on the banner photo.
+     * Automatically disabled when the user has `prefers-reduced-motion` set.
+     * Defaults to `true`.
+     */
+    enableParallax?: boolean;
+    /** Extra class name merged onto the root `<section>` */
+    className?: string;
+}
+
+declare const PARALLAX_BANNER_TEXT_CONTENT: {
+    title: string;
+    description: string;
+    ctaLabel: string;
+};
+declare const DEFAULT_CULTURE_CARDS: ParallaxBannerCultureCard[];
+declare const ParallaxBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, imageUrl, imageAlt, cards, enableParallax, className, ...props }: ParallaxBannerProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * One instrument's live trading specification, in the shape returned by
+ * Deriv's public `dynamic_trading_specs.json` feed. Only the fields the
+ * calculator actually reads are declared; the feed includes more (index
+ * signature keeps those from causing type errors when passed straight
+ * through from `fetch`).
+ */
+interface TradingSymbolSpec {
+    /** Trading symbol code, e.g. "EURUSD", "1HZ100V", "AAPL.US". */
+    symbol: string;
+    /** Human-readable instrument name, e.g. "Euro vs US Dollar". */
+    description: string;
+    /** Grouping used for the symbol dropdown, e.g. "Forex - Major". */
+    asset_class: string;
+    /** Broad market bucket, e.g. "forex", "synthetic_index", "stocks". */
+    market: string;
+    /** Currency the contract size is denominated in. */
+    base_currency: string;
+    /** Currency profit/loss (and swap) is settled in. */
+    profit_currency: string;
+    /** Units of the underlying per 1 lot. */
+    contract_size: number;
+    /** Minimum price increment shown to traders (pip). */
+    pip_size: number;
+    /** Smallest raw price increment (point). */
+    point_size: number;
+    /** Effective leverage, e.g. `500` for "1 : 500". */
+    effective_leverage: number;
+    /** How swap/rollover is charged, e.g. "In points" or a percentage-terms mode. */
+    swap_mode: string;
+    /** Long-position swap rate, unit depends on `swap_mode`. */
+    swap_rate_long: number;
+    /** Short-position swap rate, unit depends on `swap_mode`. */
+    swap_rate_short: number;
+    /** Weekday that charges a triple ("three-day") swap, if any. */
+    three_day_swap?: string;
+    /** Whether swap is charged over weekends. */
+    weekend_swaps?: string;
+    /** Most recent traded/ask price — used to prefill "Asset price". */
+    ask_last: number;
+    /** Minimum tradable volume, in lots. */
+    volume_min: number;
+    /** Maximum tradable volume, in lots. */
+    volume_limit: number;
+    [key: string]: unknown;
+}
+/** Computed output of a single "Calculate" run. */
+interface TradingCalculatorResults {
+    marginRequired: number;
+    tradeVolume: number;
+    pipValue: number;
+    /** `null` when the instrument's `swap_mode` isn't one the formulas cover ("N/A"). */
+    swapChargeLong: number | null;
+    swapChargeShort: number | null;
+}
+/**
+ * Which deriv.com/trading-calculators page this instance mirrors. All four
+ * variants share the same "Calculator" inputs, the same live data sources,
+ * and the same underlying formulas — they only differ in which result(s) the
+ * "Results" panel surfaces, matching each reference page's own focused
+ * results panel:
+ *  - `"main"` — every result (margin, trade volume, pip value, long/short
+ *    swap) in one combined panel, for a general-purpose "Trading calculators"
+ *    page that covers all three calculations at once.
+ *  - `"margin"` — only "Margin Required", mirroring
+ *    https://deriv.com/trading-calculators/margin-calculator
+ *  - `"pip"` — only "Pip value", mirroring
+ *    https://deriv.com/trading-calculators/pip-calculator
+ *  - `"swap"` — only "Swap Charge Long"/"Swap Charge Short" plus the swap
+ *    rate/type/three-day/weekend info rows, mirroring
+ *    https://deriv.com/trading-calculators/swap-calculator
+ */
+type TradingCalculatorVariant = "main" | "margin" | "pip" | "swap";
+interface TradingCalculatorProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Which single-purpose calculator page this instance mirrors — controls
+     * which result(s) the "Results" panel shows. See
+     * `TradingCalculatorVariant` for what each value maps to.
+     * @default "main"
+     */
+    variant?: TradingCalculatorVariant;
+    /**
+     * Live instrument specs (contract size, leverage, swap rates, live price...).
+     * When omitted, the component fetches them itself from `symbolsEndpoint` on
+     * mount. Pass this to supply your own data — tests, Storybook, SSR, or a
+     * project-side proxy/cache in front of the feed.
+     */
+    symbols?: TradingSymbolSpec[];
+    /**
+     * JSON endpoint returning an array of `TradingSymbolSpec`. This is Deriv's
+     * own public, unauthenticated feed — the same one deriv.com/trading-calculators
+     * uses — refreshed continuously server-side.
+     * @default "https://deriv-static-pricingfeedv2.firebaseio.com/n8n/row/prod/dynamic_trading_specs.json"
+     */
+    symbolsEndpoint?: string;
+    /**
+     * Deriv's public WebSocket API endpoint, used to fetch live USD exchange
+     * rates when a selected instrument's base/profit currency isn't already
+     * USD. `app_id=1089` is Deriv's public demo app id (safe to ship — it is
+     * not a secret, only a rate-limited API client identifier); register your
+     * own at https://api.deriv.com for production traffic volumes. Pass `null`
+     * to disable live conversion — non-USD instruments then show "N/A" for any
+     * value that would have required it, instead of a silently wrong number.
+     * @default "wss://ws.derivws.com/websockets/v3?app_id=1089"
+     */
+    exchangeRateWsUrl?: string | null;
+    /** Symbol code to preselect on mount once symbols have loaded, e.g. "EURUSD". */
+    defaultSymbol?: string;
+    /** Extra class name merged onto the root `<section>`. */
+    className?: string;
+}
+
+declare const DEFAULT_SYMBOLS_ENDPOINT = "https://deriv-static-pricingfeedv2.firebaseio.com/n8n/row/prod/dynamic_trading_specs.json";
+declare const DEFAULT_EXCHANGE_RATE_WS_URL = "wss://ws.derivws.com/websockets/v3?app_id=1089";
+declare const TradingCalculator: ({ variant, symbols: symbolsProp, symbolsEndpoint, exchangeRateWsUrl, defaultSymbol, className, ...props }: TradingCalculatorProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Which deriv.com/trading-calculators "How to calculate…" explainer this
+ * instance mirrors:
+ *  - `"margin"` — https://deriv.com/trading-calculators/margin-calculator
+ *  - `"pip"` — https://deriv.com/trading-calculators/pip-calculator
+ *  - `"swap-points"` / `"swap-percentage"` —
+ *    https://deriv.com/trading-calculators/swap-calculator, which itself
+ *    ships two formulas behind an "In points" / "In percentage" tab switch.
+ *    Both variants render that same interactive tab switch (a visitor can
+ *    still click between the two after load) — they only differ in which
+ *    formula is shown/active first.
+ */
+type TradingCalculatorHowToVariant = "margin" | "pip" | "swap-points" | "swap-percentage";
+/** Which of the swap variants' two formulas is active. Mirrors the `swap-*` half of `TradingCalculatorHowToVariant`. */
+type SwapCalculationMode = "points" | "percentage";
+/**
+ * One token inside a calculation strip (the boxed row of numbers that walks
+ * through an example calculation, e.g. "0.25 x 100,000 x 1.10634 = 27,658.5").
+ * Plain connective text — operators (`"x"`, `"÷"`), `"="`, or bracket
+ * fragments (`"[0.2"`) — omits `label`. A value that should show a connector
+ * dot + caption underneath (matching the reference page's annotated
+ * calculation graphic) sets one, e.g. `{ text: "0.25", label: "Lots" }`.
+ */
+interface CalculationToken {
+    /** Text rendered for this token, e.g. "0.25", "x", "=", "27,658.5". */
+    text: string;
+    /** Caption shown below this token, connected by a small dot + line. */
+    label?: string;
+}
+/** One block of the "Formula" column, rendered in order. */
+type FormulaBlock = 
+/** A regular paragraph, e.g. "Volume is calculated based on the following formula:". */
+{
+    type: "text";
+    content: string;
+}
+/** A smaller, muted footnote paragraph, e.g. definitions marked with `*`/`**`. */
+ | {
+    type: "footnote";
+    content: string;
+}
+/** A labelled bullet list, e.g. "Forex: Lots x Contract size x BSE/USD*". */
+ | {
+    type: "bullets";
+    items: {
+        term: string;
+        content: string;
+    }[];
+};
+interface TradingCalculatorHowToProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Which deriv.com "How to calculate…" page this instance mirrors.
+     * @default "margin"
+     */
+    variant?: TradingCalculatorHowToVariant;
+    /** Section heading. Defaults to the canonical heading for `variant`, e.g. "How to calculate margin requirements". */
+    title?: string;
+    /** Section description, shown under the title. Defaults to the canonical copy for `variant`. */
+    description?: string;
+    /** Extra class name merged onto the root `<section>`. */
+    className?: string;
+}
+
+declare const TradingCalculatorHowTo: ({ variant, title, description, className, ...props }: TradingCalculatorHowToProps) => react_jsx_runtime.JSX.Element;
+
+interface FeatureOfficeRegion {
+    /** Stable identifier — must match `FeatureOffice.region` for filtering to work. CMS-managed. */
+    id: string;
+    /** Tab label shown in the pill row. CMS-managed. */
+    label: string;
+}
+interface FeatureOffice {
+    /** Region tab id this office belongs to (matches a `regions[].id`). */
+    region: string;
+    /** Flag image shown above the office name (real flag artwork, not an emoji). */
+    flagImage: string;
+    /** Alt text for the flag image. Defaults to `country` when omitted. */
+    flagAlt?: string;
+    /** City name, e.g. "London". */
+    city: string;
+    /** Country name, e.g. "United Kingdom". */
+    country: string;
+    /** Full postal address. Use "\n" to break the address onto multiple lines. */
+    address: string;
+    /**
+     * Destination URL for the "See location" link (typically a map link).
+     * When omitted, the office card renders with no link.
+     */
+    href?: string;
+    /** Overrides the default "See location" link label for this office. */
+    linkText?: string;
+}
+interface FeatureOfficesProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading. Defaults to "Our offices". */
+    title?: string;
+    /** Region tabs, CMS-managed. At least one is required. */
+    regions: FeatureOfficeRegion[];
+    /** Controlled active region tab id */
+    activeRegionId?: string;
+    /** Initial active tab id for uncontrolled usage (default: `regions[0].id`) */
+    defaultActiveRegionId?: string;
+    /** Called whenever a different region tab is selected */
+    onRegionChange?: (id: string) => void;
+    /** All offices — filtered client-side by the active region tab. */
+    offices: FeatureOffice[];
+    /** Default label for each office's "See location" link. */
+    linkText?: string;
+    /** Extra class name merged onto the root `<section>`. */
+    className?: string;
+}
+
+declare const FEATURE_OFFICES_TEXT_CONTENT: {
+    title: string;
+    linkText: string;
+};
+declare const FeatureOffices: ({ title, regions, activeRegionId, defaultActiveRegionId, onRegionChange, offices, linkText, className, ...props }: FeatureOfficesProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, Accordion, type AccordionProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CORAL_BANNER_DERIV_SLIDES, CTABanner, type CTABannerProps, type CalculationToken, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, CoralBanner, type CoralBannerButton, type CoralBannerProps, type CoralBannerSlide, DEFAULT_AWARDS, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_TEXT_CONTENT, FEATURE_OFFICES_TEXT_CONTENT, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureAwards, type FeatureAwardsProps, FeatureBlog, type FeatureBlogAuthor, FeatureBlogCategories, type FeatureBlogCategoriesProps, type FeatureBlogCategoryPost, type FeatureBlogCategoryTab, type FeatureBlogContentBlock, type FeatureBlogContentBlockType, FeatureBlogPage, type FeatureBlogPageProps, type FeatureBlogPost, type FeatureBlogProps, type FeatureBlogSharePlatform, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, type FeatureOffice, type FeatureOfficeRegion, FeatureOffices, type FeatureOfficesProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, FeatureSplit, type FeatureSplitImagePosition, type FeatureSplitProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, type FormulaBlock, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, type HelpCenterContentBlock, type HelpCenterContentBlockType, HelpCenterPage, type HelpCenterPageProps, type HelpCenterQuestionItem, HelpCentreCategories, type HelpCentreCategoriesProps, type HelpCentreCategoryItem, HelpCentreSubCategories, type HelpCentreSubCategoriesProps, type HelpCentreSubCategoryItem, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, type SwapCalculationMode, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset };