@deriv-web-design/ui 0.1.4 → 0.1.6

package/dist/index.d.ts

@@ -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";
@@ -107,6 +107,10 @@ 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. */
@@ -565,7 +569,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 +578,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 +612,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+" */
@@ -1239,17 +1265,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 */
@@ -1318,4 +1370,433 @@ interface ArticleSectionProps {
 
 declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => 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, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, 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, 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 };
+interface CoralBannerButton {
+    /** Button label */
+    label: string;
+    /** Link href — rendered as an `<a>` wrapping the button when provided */
+    href?: string;
+    /** Click handler (used when no `href` is provided) */
+    onClick?: () => void;
+}
+interface CoralBannerSlide {
+    /** Unique key for the slide (falls back to array index) */
+    id?: string | number;
+    /**
+     * Headline. Use `"\n"` to force a manual line break
+     * (matches the reference banner's two-line "Join 3M+ / global traders" layout).
+     */
+    title: string;
+    /** Supporting paragraph below the title */
+    description?: string;
+    /** Primary CTA — rendered as a solid black pill button */
+    primaryButton?: CoralBannerButton;
+    /** Optional secondary CTA — rendered as a white pill button */
+    secondaryButton?: CoralBannerButton;
+}
+interface CoralBannerProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * `static`   — renders a single, non-interactive slide (no arrows/dots/autoplay).
+     * `carousel` — renders `slides` in a swipeable, auto-advancing slider
+     *              (horizontal slide transition, dot pagination, prev/next arrows),
+     *              matching the banner used on deriv.com and deriv.com/markets/forex.
+     */
+    variant?: "static" | "carousel";
+    /** Slide content. `static` variant renders only `slides[0]`. */
+    slides?: CoralBannerSlide[];
+    /** Auto-advance slides (carousel only) */
+    autoplay?: boolean;
+    /** Milliseconds between auto-advances (carousel only). Reference site uses `2000`. */
+    autoplayDelay?: number;
+    /** Slide transition duration in ms. Reference site uses `330`. */
+    transitionDuration?: number;
+    /** Loop back to the first slide after the last (carousel only) */
+    infinite?: boolean;
+    /** Show the prev/next arrow controls (carousel only, 2+ slides) */
+    showArrows?: boolean;
+    /** Show the dot pagination (carousel only, 2+ slides) */
+    showDots?: boolean;
+}
+
+/**
+ * Real deriv.com copy, exported for consumers who want to reproduce the
+ * exact reference banner (deriv.com homepage / deriv.com/markets/forex footer promo).
+ */
+declare const CORAL_BANNER_DERIV_SLIDES: CoralBannerSlide[];
+declare const CoralBanner: ({ variant, slides, autoplay, autoplayDelay, transitionDuration, infinite, showArrows, showDots, className, ...props }: CoralBannerProps) => react_jsx_runtime.JSX.Element;
+
+interface AwardItem {
+    /** Main award name, e.g. "Best Trade Execution Award (MEA)" */
+    title: string;
+    /** Issuing body and year, e.g. "UF Awards 2025" */
+    subtitle: string;
+}
+interface FeatureAwardsProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading. Defaults to "Our awards". */
+    title?: string;
+    /** Ordered list of awards to display. Defaults to `DEFAULT_AWARDS`. */
+    awards?: AwardItem[];
+    /**
+     * Seconds for one full auto-scroll loop on mobile (< 768px) —
+     * lower is faster. Mobile always auto-scrolls; this only tunes
+     * the speed. Defaults to `32`.
+     */
+    autoScrollDuration?: number;
+    /** Extra class name merged onto the root `<section>`. */
+    className?: string;
+}
+
+declare const FEATURE_AWARDS_TEXT_CONTENT: {
+    title: string;
+};
+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;
+    /** Category label shown under the icon */
+    title: string;
+    /** Icon shown above the title — an image URL or a custom ReactNode (e.g. inline SVG) */
+    icon?: string | ReactNode;
+    /** Alt text when `icon` is an image URL (default: "") */
+    iconAlt?: string;
+    /** Destination URL — renders the tile as a link */
+    href?: string;
+    /** Click handler — renders the tile as a button when no `href` is given */
+    onClick?: () => void;
+}
+interface HelpCentreCategoriesProps {
+    /** Optional H2 heading above the grid */
+    sectionTitle?: string;
+    /** Optional copy under the heading */
+    sectionDescription?: string;
+    /** Category tiles */
+    categories: HelpCentreCategoryItem[];
+}
+
+declare const HelpCentreCategories: ({ sectionTitle, sectionDescription, categories, }: HelpCentreCategoriesProps) => react_jsx_runtime.JSX.Element;
+
+interface HelpCentreSubCategoryItem {
+    /** Stable identifier for the question (e.g. used as the React key) */
+    id?: string;
+    /** The FAQ question shown on the card */
+    question: string;
+    /** Destination URL — renders the card as a link */
+    href?: string;
+    /** Click handler — renders the card as a button when no `href` is given */
+    onClick?: () => void;
+}
+interface HelpCentreSubCategoriesProps {
+    /** Large H1 category title shown above the search field (e.g. "Account") */
+    title: string;
+    /** Placeholder text for the search field (default: "Search") */
+    searchPlaceholder?: string;
+    /** Accessible label for the search field (default: matches `searchPlaceholder`) */
+    searchAriaLabel?: string;
+    /** FAQ question cards for this category (at least 1 item) */
+    items: HelpCentreSubCategoryItem[];
+    /**
+     * Message shown when a search query matches no items. `{query}` is
+     * replaced with the current search text. Default: `No results found for "{query}"`
+     */
+    noResultsText?: string;
+    /** Called whenever the search input value changes */
+    onSearchChange?: (value: string) => void;
+}
+
+declare const HelpCentreSubCategories: ({ title, searchPlaceholder, searchAriaLabel, items, noResultsText, onSearchChange, }: HelpCentreSubCategoriesProps) => react_jsx_runtime.JSX.Element;
+
+type HelpCenterContentBlockType = "heading" | "paragraph" | "list";
+interface HelpCenterContentBlock {
+    /** Block kind — "heading" and "paragraph" use `text`, "list" uses `items` */
+    type: HelpCenterContentBlockType;
+    /** Text content for "heading" / "paragraph" blocks */
+    text?: string;
+    /** Heading level for "heading" blocks (default: 2 — the page title itself is always the `<h1>`) */
+    level?: 2 | 3;
+    /** List entries for "list" blocks */
+    items?: string[];
+    /** Render a "list" block as `<ol>` instead of `<ul>` (default: false) */
+    ordered?: boolean;
+}
+interface HelpCenterQuestionItem {
+    /** Stable identifier for the question — used as the React key and for active-state matching */
+    id: string;
+    /** The FAQ question shown in the sidebar table / mobile sheet */
+    question: string;
+    /** Destination URL — renders the row as a link (real multi-page navigation) */
+    href?: string;
+    /** Click handler, called in addition to selecting the row */
+    onClick?: () => void;
+    /** Optional per-question title, used to swap the main content column in-place when no `href` is given */
+    contentTitle?: string;
+    /** Optional per-question content blocks, used to swap the main content column in-place when no `href` is given */
+    content?: HelpCenterContentBlock[];
+}
+interface HelpCenterPageProps {
+    /** Category name shown above the question table and on the mobile dropdown trigger (e.g. "Account") */
+    categoryTitle: string;
+    /** Every question belonging to this category, rendered as a single-select table/list */
+    questions: HelpCenterQuestionItem[];
+    /** Controlled id of the currently selected/highlighted question */
+    activeQuestionId?: string;
+    /** Initial selected question id for uncontrolled usage (default: first item in `questions`) */
+    defaultActiveQuestionId?: string;
+    /** Called whenever a different question is selected (click on a row without `href`, or via keyboard) */
+    onQuestionSelect?: (id: string) => void;
+    /** Main content column heading (CMS-supplied answer title, rendered as the page's `<h1>`) */
+    contentTitle: string;
+    /** Main content column body (CMS-supplied rich content, rendered from plain data blocks) */
+    content: HelpCenterContentBlock[];
+    /** Placeholder text for the top 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 a search query matches no questions. `{query}` is
+     * replaced with the current search text. Default: `No results found for "{query}"`
+     */
+    searchNoResultsText?: string;
+    /** Title of the mobile "browse questions" bottom sheet (default: "Articles in this section") */
+    articlesSheetTitle?: string;
+    /** Additional CSS class on the outer section */
+    className?: string;
+}
+
+declare const HelpCenterPage: ({ categoryTitle, questions, activeQuestionId, defaultActiveQuestionId, onQuestionSelect, contentTitle, content, searchPlaceholder, searchAriaLabel, onSearchChange, searchNoResultsText, articlesSheetTitle, className, }: HelpCenterPageProps) => react_jsx_runtime.JSX.Element;
+
+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;
+
+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, DEFAULT_CULTURE_CARDS, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_AWARDS_TEXT_CONTENT, FEATURE_BLOG_CATEGORIES_TEXT_CONTENT, FEATURE_BLOG_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, 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, 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, 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 };