@deriv-web-design/ui 0.1.14 → 0.1.17

package/dist/index.d.mts

@@ -31,15 +31,17 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     colorScheme?: LinkColorScheme;
     /** Link label text */
     label?: string;
-    /** Optional left icon. When provided, the chevron is hidden and the label underlines on hover/active. */
+    /** Optional icon. When provided, the chevron is hidden and the label underlines on hover/active. */
     icon?: ReactNode;
+    /** Which side the `icon` sits on. Only takes effect when `icon` is provided. */
+    iconPosition?: "left" | "right";
     /** Show trailing chevron arrow. Active only when no icon is provided. */
     showChevron?: boolean;
     /** Disabled state — prevents interaction and reduces opacity */
     disabled?: boolean;
 }
 
-declare const Link: ({ colorScheme, label, icon, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
+declare const Link: ({ colorScheme, label, icon, iconPosition, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
 
 type ChipSize = "sm" | "md" | "lg";
 interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1318,6 +1320,7 @@ declare const PeopleGrid: ({ title, description, items, initialVisibleCount, exp
 /** @deprecated Use AvatarGrid instead */
 declare const Leaders: ({ title, description, items, initialVisibleCount, expandText, collapseText, className, ...props }: AvatarGridProps) => react_jsx_runtime.JSX.Element;
 
+type ImageBannerVariant = "split-left" | "split-right" | "full-bg-left" | "full-bg-right" | "chips-left" | "chips-right";
 interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant.
@@ -1325,23 +1328,34 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
      * - `"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.
+     * - `"chips-left"`: title, description, and checkmark chips on the left; collage image on the right
+     *   (matches the "Everything you need to grow your network" block on deriv.com/partners).
+     * - `"chips-right"`: mirror of `"chips-left"` — collage on the left; text and chips on the right.
      */
-    variant?: "split-left" | "split-right" | "full-bg-left" | "full-bg-right";
+    variant?: ImageBannerVariant;
     /** Section headline */
     title?: string;
     /** Supporting body copy beneath the title */
     description?: string;
-    /** CTA link label */
+    /** CTA link label — ignored for `chips-left` / `chips-right` (those variants have no CTA) */
     ctaLabel?: string;
     /** CTA link href */
     ctaHref?: string;
     /** Callback fired when the CTA link is clicked */
     onCtaClick?: () => void;
+    /**
+     * Feature chips shown under the description for `chips-left` / `chips-right`.
+     * Each string becomes a pill with a leading checkmark icon.
+     */
+    chips?: string[];
     /**
      * URL of the photo.
      * - `"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.
+     * - `"chips-left"` / `"chips-right"`: collage panel; banner height follows the image’s
+     *   intrinsic aspect ratio (defaults to the partners tier-cover collage, 1920×1440).
+     *   Prefer 4:3 assets so later images match this reference.
      */
     imageUrl?: string;
     /** Accessible alt text for the image */
@@ -1350,7 +1364,9 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
     className?: string;
 }
 
-declare const ImageBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, imageUrl, imageAlt, className, ...props }: ImageBannerProps) => react_jsx_runtime.JSX.Element;
+/** Reference collage for chips variants (1920×1440). Banner height follows this asset’s ratio. */
+declare const IMAGE_BANNER_CHIPS_DEFAULT_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69a13cf79748b347527dc74d_tier-cover.webp";
+declare const ImageBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, chips, imageUrl, imageAlt, className, ...props }: ImageBannerProps) => react_jsx_runtime.JSX.Element;
 
 interface TestimonialItem {
     /** The testimonial quote text */
@@ -2136,4 +2152,189 @@ declare const FEATURE_OFFICES_TEXT_CONTENT: {
 };
 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 };
+/** Visual accent used for the desktop connector line beside each medal. */
+type TierAccent = "bronze" | "silver" | "gold" | "platinum";
+interface TierItem {
+    /** Medal / badge image URL */
+    icon: string;
+    /** Accessible alt text for the icon. Defaults to the tier `name` when omitted. */
+    iconAlt?: string;
+    /** Tier label shown under the icon, e.g. "Bronze" */
+    name: string;
+    /** Short stage label under the name, e.g. "Launch" */
+    status: string;
+    /** Benefit headline inside the card, e.g. "Commission + 4% bonus" */
+    title: string;
+    /**
+     * Benefit body copy inside the card. Accepts a string or a ReactNode so
+     * consumers can bold key phrases (as on the Platinum tier on
+     * deriv.com/partners).
+     */
+    description: ReactNode;
+    /**
+     * Optional qualification line under the card, e.g.
+     * "3-month average commission:\\n$500+". Use `\\n` for the line break
+     * shown on the reference page. Omit for the entry tier.
+     */
+    requirement?: string;
+    /**
+     * Connector-line accent for this tier on desktop. Defaults by index when
+     * omitted (bronze → silver → gold → platinum).
+     */
+    accent?: TierAccent;
+}
+interface TiersProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Supporting copy under the title */
+    description?: string;
+    /** Ordered list of partnership tiers (typically 4) */
+    tiers: TierItem[];
+    /** Show the section-level CTA link under the tier grid (default: false) */
+    showLink?: boolean;
+    /** Label for the section-level link */
+    linkText?: string;
+    /** Destination for the section-level link */
+    linkHref?: string;
+    /** Click handler for the section-level link */
+    onLinkClick?: () => void;
+}
+
+/**
+ * Partnership-tier comparison section — centred header, a responsive
+ * track of medal tiers (with desktop connector lines), and an optional CTA.
+ * Modeled after the "Growing rewards as you scale" block on
+ * https://deriv.com/partners.
+ *
+ * Mobile (<768px): single column; each tier is a white outer card with
+ * the medal, a horizontal name/status row, a slate benefit panel, and an
+ * optional requirement. Desktop (≥992px): four equal columns with metallic
+ * connector lines through the medals.
+ */
+declare const Tiers: ({ title, description, tiers, showLink, linkText, linkHref, onLinkClick, }: TiersProps) => react_jsx_runtime.JSX.Element;
+
+interface PartnerPayoutItem {
+    /** Region or market label, e.g. "Africa". */
+    region: string;
+    /** Formatted payout amount, e.g. "$ 1,237,927.70". */
+    amount: string;
+}
+interface PartnersPayoutProps extends HTMLAttributes<HTMLElement> {
+    /** Section headline. */
+    title: string;
+    /** Reporting period shown below the headline. */
+    period: string;
+    /** Regional payout figures. */
+    payouts: PartnerPayoutItem[];
+    /** Globe image URL. */
+    imageUrl: string;
+    /** Accessible alt text. Leave empty when the globe is decorative. */
+    imageAlt?: string;
+}
+
+/**
+ * Dark partner-payout section with a responsive metric grid and globe image,
+ * modeled after the "Top partner payouts" section on deriv.com/partners.
+ */
+declare const PartnersPayout: ({ title, period, payouts, imageUrl, imageAlt, className, ...props }: PartnersPayoutProps) => react_jsx_runtime.JSX.Element;
+
+interface MasterPartnerStep {
+    /** Numbered icon image URL (e.g. a circled numeral graphic). */
+    icon: string;
+    /** Accessible alt text for the icon. Leave empty — order is already conveyed by the list. */
+    iconAlt?: string;
+    /** Step description copy. */
+    description: string;
+}
+interface MasterPartnerNote {
+    /** Bold lead-in phrase, e.g. "Here's how it works:" */
+    label: string;
+    /** Remaining sentence rendered after the bold label. */
+    text: string;
+}
+interface MasterPartnerProps {
+    /** Section headline (H2). */
+    title: string;
+    /** Intro paragraph under the title. */
+    description: string;
+    /** Optional bold-led paragraph, e.g. a worked commission example. */
+    note?: MasterPartnerNote;
+    /** Optional closing paragraph rendered after `note`. */
+    closingText?: string;
+    /** CTA button label. Rendered on desktop only; omit to hide the CTA entirely. */
+    ctaLabel?: string;
+    /** CTA destination URL. Renders the button inside an anchor when set. */
+    ctaHref?: string;
+    /** CTA click handler, used whether or not `ctaHref` is set. */
+    onCtaClick?: () => void;
+    /** Foreground image URL (e.g. a partner working at a desk). */
+    image: string;
+    /** Accessible alt text for the image. Leave empty when purely decorative. */
+    imageAlt?: string;
+    /** Ordered "how it works" steps (typically 4), each with a numbered icon. */
+    steps: MasterPartnerStep[];
+}
+
+/**
+ * "Master Partner programme" section — headline and intro copy beside a
+ * foreground image, a desktop-only coral CTA placed after the copy and
+ * before the numbered steps, and a full-width row of numbered "how it
+ * works" steps underneath. Modeled after the "Master Partner programme"
+ * block on https://deriv.com/partners.
+ *
+ * Mobile/tablet (<992px): single column (content, then image), steps stack
+ * to 1-2 columns, and the CTA button is hidden.
+ * Desktop (≥992px): content and image sit side by side, the CTA button
+ * becomes visible right after the copy, and steps lay out in a single row.
+ */
+declare const MasterPartner: ({ title, description, note, closingText, ctaLabel, ctaHref, onCtaClick, image, imageAlt, steps, }: MasterPartnerProps) => react_jsx_runtime.JSX.Element;
+
+type ResourceBannerHeadingLevel = "h2" | "h3" | "h4";
+interface ResourceBannerLink {
+    /** Unique key for the link (falls back to array index) */
+    id?: string | number;
+    /** Link label text */
+    label: string;
+    /** Destination URL */
+    href: string;
+    /**
+     * Opens in a new tab and shows the external-link icon.
+     * The reference section (deriv.com/fraud-prevention) sets this on every link.
+     * @default true
+     */
+    external?: boolean;
+}
+interface ResourceBannerProps extends HTMLAttributes<HTMLElement> {
+    /** Heading text */
+    title?: string;
+    /** Supporting paragraph below the heading */
+    description?: string;
+    /**
+     * Resource links, rendered as a vertical stack on every breakpoint.
+     * Any number is supported — there is no fixed maximum.
+     */
+    links?: ResourceBannerLink[];
+    /**
+     * Heading tag to render. Use a lower level when the surrounding page
+     * already owns the heading hierarchy.
+     * @default "h2"
+     */
+    headingLevel?: ResourceBannerHeadingLevel;
+}
+
+/**
+ * Real deriv.com copy, exported for consumers who want to reproduce the
+ * exact reference section (deriv.com/fraud-prevention → `.section_fraud_resources`).
+ *
+ * Opt-in only — the component's defaults and the Storybook stories both use
+ * generic placeholder copy (design-system Rule 6). Import this when you want
+ * the reference content specifically; don't treat it as the template's content.
+ */
+declare const RESOURCE_BANNER_DERIV_CONTENT: {
+    title: string;
+    description: string;
+    links: ResourceBannerLink[];
+};
+declare const ResourceBanner: ({ title, description, links, headingLevel: HeadingTag, className, ...props }: ResourceBannerProps) => 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, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, 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, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset };

package/dist/index.d.ts

@@ -31,15 +31,17 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     colorScheme?: LinkColorScheme;
     /** Link label text */
     label?: string;
-    /** Optional left icon. When provided, the chevron is hidden and the label underlines on hover/active. */
+    /** Optional icon. When provided, the chevron is hidden and the label underlines on hover/active. */
     icon?: ReactNode;
+    /** Which side the `icon` sits on. Only takes effect when `icon` is provided. */
+    iconPosition?: "left" | "right";
     /** Show trailing chevron arrow. Active only when no icon is provided. */
     showChevron?: boolean;
     /** Disabled state — prevents interaction and reduces opacity */
     disabled?: boolean;
 }
 
-declare const Link: ({ colorScheme, label, icon, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
+declare const Link: ({ colorScheme, label, icon, iconPosition, showChevron, disabled, children, className, onClick, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
 
 type ChipSize = "sm" | "md" | "lg";
 interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1318,6 +1320,7 @@ declare const PeopleGrid: ({ title, description, items, initialVisibleCount, exp
 /** @deprecated Use AvatarGrid instead */
 declare const Leaders: ({ title, description, items, initialVisibleCount, expandText, collapseText, className, ...props }: AvatarGridProps) => react_jsx_runtime.JSX.Element;
 
+type ImageBannerVariant = "split-left" | "split-right" | "full-bg-left" | "full-bg-right" | "chips-left" | "chips-right";
 interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant.
@@ -1325,23 +1328,34 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
      * - `"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.
+     * - `"chips-left"`: title, description, and checkmark chips on the left; collage image on the right
+     *   (matches the "Everything you need to grow your network" block on deriv.com/partners).
+     * - `"chips-right"`: mirror of `"chips-left"` — collage on the left; text and chips on the right.
      */
-    variant?: "split-left" | "split-right" | "full-bg-left" | "full-bg-right";
+    variant?: ImageBannerVariant;
     /** Section headline */
     title?: string;
     /** Supporting body copy beneath the title */
     description?: string;
-    /** CTA link label */
+    /** CTA link label — ignored for `chips-left` / `chips-right` (those variants have no CTA) */
     ctaLabel?: string;
     /** CTA link href */
     ctaHref?: string;
     /** Callback fired when the CTA link is clicked */
     onCtaClick?: () => void;
+    /**
+     * Feature chips shown under the description for `chips-left` / `chips-right`.
+     * Each string becomes a pill with a leading checkmark icon.
+     */
+    chips?: string[];
     /**
      * URL of the photo.
      * - `"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.
+     * - `"chips-left"` / `"chips-right"`: collage panel; banner height follows the image’s
+     *   intrinsic aspect ratio (defaults to the partners tier-cover collage, 1920×1440).
+     *   Prefer 4:3 assets so later images match this reference.
      */
     imageUrl?: string;
     /** Accessible alt text for the image */
@@ -1350,7 +1364,9 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
     className?: string;
 }
 
-declare const ImageBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, imageUrl, imageAlt, className, ...props }: ImageBannerProps) => react_jsx_runtime.JSX.Element;
+/** Reference collage for chips variants (1920×1440). Banner height follows this asset’s ratio. */
+declare const IMAGE_BANNER_CHIPS_DEFAULT_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69a13cf79748b347527dc74d_tier-cover.webp";
+declare const ImageBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, chips, imageUrl, imageAlt, className, ...props }: ImageBannerProps) => react_jsx_runtime.JSX.Element;
 
 interface TestimonialItem {
     /** The testimonial quote text */
@@ -2136,4 +2152,189 @@ declare const FEATURE_OFFICES_TEXT_CONTENT: {
 };
 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 };
+/** Visual accent used for the desktop connector line beside each medal. */
+type TierAccent = "bronze" | "silver" | "gold" | "platinum";
+interface TierItem {
+    /** Medal / badge image URL */
+    icon: string;
+    /** Accessible alt text for the icon. Defaults to the tier `name` when omitted. */
+    iconAlt?: string;
+    /** Tier label shown under the icon, e.g. "Bronze" */
+    name: string;
+    /** Short stage label under the name, e.g. "Launch" */
+    status: string;
+    /** Benefit headline inside the card, e.g. "Commission + 4% bonus" */
+    title: string;
+    /**
+     * Benefit body copy inside the card. Accepts a string or a ReactNode so
+     * consumers can bold key phrases (as on the Platinum tier on
+     * deriv.com/partners).
+     */
+    description: ReactNode;
+    /**
+     * Optional qualification line under the card, e.g.
+     * "3-month average commission:\\n$500+". Use `\\n` for the line break
+     * shown on the reference page. Omit for the entry tier.
+     */
+    requirement?: string;
+    /**
+     * Connector-line accent for this tier on desktop. Defaults by index when
+     * omitted (bronze → silver → gold → platinum).
+     */
+    accent?: TierAccent;
+}
+interface TiersProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Supporting copy under the title */
+    description?: string;
+    /** Ordered list of partnership tiers (typically 4) */
+    tiers: TierItem[];
+    /** Show the section-level CTA link under the tier grid (default: false) */
+    showLink?: boolean;
+    /** Label for the section-level link */
+    linkText?: string;
+    /** Destination for the section-level link */
+    linkHref?: string;
+    /** Click handler for the section-level link */
+    onLinkClick?: () => void;
+}
+
+/**
+ * Partnership-tier comparison section — centred header, a responsive
+ * track of medal tiers (with desktop connector lines), and an optional CTA.
+ * Modeled after the "Growing rewards as you scale" block on
+ * https://deriv.com/partners.
+ *
+ * Mobile (<768px): single column; each tier is a white outer card with
+ * the medal, a horizontal name/status row, a slate benefit panel, and an
+ * optional requirement. Desktop (≥992px): four equal columns with metallic
+ * connector lines through the medals.
+ */
+declare const Tiers: ({ title, description, tiers, showLink, linkText, linkHref, onLinkClick, }: TiersProps) => react_jsx_runtime.JSX.Element;
+
+interface PartnerPayoutItem {
+    /** Region or market label, e.g. "Africa". */
+    region: string;
+    /** Formatted payout amount, e.g. "$ 1,237,927.70". */
+    amount: string;
+}
+interface PartnersPayoutProps extends HTMLAttributes<HTMLElement> {
+    /** Section headline. */
+    title: string;
+    /** Reporting period shown below the headline. */
+    period: string;
+    /** Regional payout figures. */
+    payouts: PartnerPayoutItem[];
+    /** Globe image URL. */
+    imageUrl: string;
+    /** Accessible alt text. Leave empty when the globe is decorative. */
+    imageAlt?: string;
+}
+
+/**
+ * Dark partner-payout section with a responsive metric grid and globe image,
+ * modeled after the "Top partner payouts" section on deriv.com/partners.
+ */
+declare const PartnersPayout: ({ title, period, payouts, imageUrl, imageAlt, className, ...props }: PartnersPayoutProps) => react_jsx_runtime.JSX.Element;
+
+interface MasterPartnerStep {
+    /** Numbered icon image URL (e.g. a circled numeral graphic). */
+    icon: string;
+    /** Accessible alt text for the icon. Leave empty — order is already conveyed by the list. */
+    iconAlt?: string;
+    /** Step description copy. */
+    description: string;
+}
+interface MasterPartnerNote {
+    /** Bold lead-in phrase, e.g. "Here's how it works:" */
+    label: string;
+    /** Remaining sentence rendered after the bold label. */
+    text: string;
+}
+interface MasterPartnerProps {
+    /** Section headline (H2). */
+    title: string;
+    /** Intro paragraph under the title. */
+    description: string;
+    /** Optional bold-led paragraph, e.g. a worked commission example. */
+    note?: MasterPartnerNote;
+    /** Optional closing paragraph rendered after `note`. */
+    closingText?: string;
+    /** CTA button label. Rendered on desktop only; omit to hide the CTA entirely. */
+    ctaLabel?: string;
+    /** CTA destination URL. Renders the button inside an anchor when set. */
+    ctaHref?: string;
+    /** CTA click handler, used whether or not `ctaHref` is set. */
+    onCtaClick?: () => void;
+    /** Foreground image URL (e.g. a partner working at a desk). */
+    image: string;
+    /** Accessible alt text for the image. Leave empty when purely decorative. */
+    imageAlt?: string;
+    /** Ordered "how it works" steps (typically 4), each with a numbered icon. */
+    steps: MasterPartnerStep[];
+}
+
+/**
+ * "Master Partner programme" section — headline and intro copy beside a
+ * foreground image, a desktop-only coral CTA placed after the copy and
+ * before the numbered steps, and a full-width row of numbered "how it
+ * works" steps underneath. Modeled after the "Master Partner programme"
+ * block on https://deriv.com/partners.
+ *
+ * Mobile/tablet (<992px): single column (content, then image), steps stack
+ * to 1-2 columns, and the CTA button is hidden.
+ * Desktop (≥992px): content and image sit side by side, the CTA button
+ * becomes visible right after the copy, and steps lay out in a single row.
+ */
+declare const MasterPartner: ({ title, description, note, closingText, ctaLabel, ctaHref, onCtaClick, image, imageAlt, steps, }: MasterPartnerProps) => react_jsx_runtime.JSX.Element;
+
+type ResourceBannerHeadingLevel = "h2" | "h3" | "h4";
+interface ResourceBannerLink {
+    /** Unique key for the link (falls back to array index) */
+    id?: string | number;
+    /** Link label text */
+    label: string;
+    /** Destination URL */
+    href: string;
+    /**
+     * Opens in a new tab and shows the external-link icon.
+     * The reference section (deriv.com/fraud-prevention) sets this on every link.
+     * @default true
+     */
+    external?: boolean;
+}
+interface ResourceBannerProps extends HTMLAttributes<HTMLElement> {
+    /** Heading text */
+    title?: string;
+    /** Supporting paragraph below the heading */
+    description?: string;
+    /**
+     * Resource links, rendered as a vertical stack on every breakpoint.
+     * Any number is supported — there is no fixed maximum.
+     */
+    links?: ResourceBannerLink[];
+    /**
+     * Heading tag to render. Use a lower level when the surrounding page
+     * already owns the heading hierarchy.
+     * @default "h2"
+     */
+    headingLevel?: ResourceBannerHeadingLevel;
+}
+
+/**
+ * Real deriv.com copy, exported for consumers who want to reproduce the
+ * exact reference section (deriv.com/fraud-prevention → `.section_fraud_resources`).
+ *
+ * Opt-in only — the component's defaults and the Storybook stories both use
+ * generic placeholder copy (design-system Rule 6). Import this when you want
+ * the reference content specifically; don't treat it as the template's content.
+ */
+declare const RESOURCE_BANNER_DERIV_CONTENT: {
+    title: string;
+    description: string;
+    links: ResourceBannerLink[];
+};
+declare const ResourceBanner: ({ title, description, links, headingLevel: HeadingTag, className, ...props }: ResourceBannerProps) => 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, IMAGE_BANNER_CHIPS_DEFAULT_IMAGE, ImageBanner, type ImageBannerProps, type ImageBannerVariant, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, MasterPartner, type MasterPartnerNote, type MasterPartnerProps, type MasterPartnerStep, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, PARALLAX_BANNER_TEXT_CONTENT, Pagination, type PaginationProps, ParallaxBanner, type ParallaxBannerCultureCard, type ParallaxBannerProps, type PartnerPayoutItem, PartnersPayout, type PartnersPayoutProps, PeopleGrid, type PeopleGridProps, type PersonItem, RESOURCE_BANNER_DERIV_CONTENT, ResourceBanner, type ResourceBannerHeadingLevel, type ResourceBannerLink, type ResourceBannerProps, 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, type TierAccent, type TierItem, Tiers, type TiersProps, TradingCalculator, TradingCalculatorHowTo, type TradingCalculatorHowToProps, type TradingCalculatorHowToVariant, type TradingCalculatorProps, type TradingCalculatorResults, type TradingCalculatorVariant, type TradingSymbolSpec, dayNightTransitionV2Preset };