@deriv-web-design/ui 0.1.6 → 0.1.8

package/dist/index.d.ts

@@ -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>>;
@@ -115,6 +119,17 @@ interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
      *  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;
 }
 
@@ -476,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;
@@ -491,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 */
@@ -508,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 {
@@ -1182,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;
@@ -1228,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 */
@@ -1244,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 */
@@ -1799,4 +1871,237 @@ declare const PARALLAX_BANNER_TEXT_CONTENT: {
 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 };
+/**
+ * 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 };