@deriv-web-design/ui 0.1.13 → 0.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/block-registry.json +435 -8
- package/components.manifest.json +217 -5
- package/dist/index.css +822 -8
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +155 -4
- package/dist/index.d.ts +155 -4
- package/dist/index.js +255 -25
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +251 -25
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1318,6 +1318,7 @@ declare const PeopleGrid: ({ title, description, items, initialVisibleCount, exp
|
|
|
1318
1318
|
/** @deprecated Use AvatarGrid instead */
|
|
1319
1319
|
declare const Leaders: ({ title, description, items, initialVisibleCount, expandText, collapseText, className, ...props }: AvatarGridProps) => react_jsx_runtime.JSX.Element;
|
|
1320
1320
|
|
|
1321
|
+
type ImageBannerVariant = "split-left" | "split-right" | "full-bg-left" | "full-bg-right" | "chips-left" | "chips-right";
|
|
1321
1322
|
interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
|
|
1322
1323
|
/**
|
|
1323
1324
|
* Layout variant.
|
|
@@ -1325,23 +1326,34 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
|
|
|
1325
1326
|
* - `"split-right"`: image fills the left-hand panel; text on the right.
|
|
1326
1327
|
* - `"full-bg-left"`: image covers the entire card as a background; text overlaid on the left.
|
|
1327
1328
|
* - `"full-bg-right"`: image covers the entire card as a background; text overlaid on the right.
|
|
1329
|
+
* - `"chips-left"`: title, description, and checkmark chips on the left; collage image on the right
|
|
1330
|
+
* (matches the "Everything you need to grow your network" block on deriv.com/partners).
|
|
1331
|
+
* - `"chips-right"`: mirror of `"chips-left"` — collage on the left; text and chips on the right.
|
|
1328
1332
|
*/
|
|
1329
|
-
variant?:
|
|
1333
|
+
variant?: ImageBannerVariant;
|
|
1330
1334
|
/** Section headline */
|
|
1331
1335
|
title?: string;
|
|
1332
1336
|
/** Supporting body copy beneath the title */
|
|
1333
1337
|
description?: string;
|
|
1334
|
-
/** CTA link label */
|
|
1338
|
+
/** CTA link label — ignored for `chips-left` / `chips-right` (those variants have no CTA) */
|
|
1335
1339
|
ctaLabel?: string;
|
|
1336
1340
|
/** CTA link href */
|
|
1337
1341
|
ctaHref?: string;
|
|
1338
1342
|
/** Callback fired when the CTA link is clicked */
|
|
1339
1343
|
onCtaClick?: () => void;
|
|
1344
|
+
/**
|
|
1345
|
+
* Feature chips shown under the description for `chips-left` / `chips-right`.
|
|
1346
|
+
* Each string becomes a pill with a leading checkmark icon.
|
|
1347
|
+
*/
|
|
1348
|
+
chips?: string[];
|
|
1340
1349
|
/**
|
|
1341
1350
|
* URL of the photo.
|
|
1342
1351
|
* - `"split-left"`: fills the right-hand panel; stacks below text on mobile.
|
|
1343
1352
|
* - `"split-right"`: fills the left-hand panel; stacks above text on mobile.
|
|
1344
1353
|
* - `"full-bg-left"` / `"full-bg-right"`: covers the entire card as a background image.
|
|
1354
|
+
* - `"chips-left"` / `"chips-right"`: collage panel; banner height follows the image’s
|
|
1355
|
+
* intrinsic aspect ratio (defaults to the partners tier-cover collage, 1920×1440).
|
|
1356
|
+
* Prefer 4:3 assets so later images match this reference.
|
|
1345
1357
|
*/
|
|
1346
1358
|
imageUrl?: string;
|
|
1347
1359
|
/** Accessible alt text for the image */
|
|
@@ -1350,7 +1362,9 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
|
|
|
1350
1362
|
className?: string;
|
|
1351
1363
|
}
|
|
1352
1364
|
|
|
1353
|
-
|
|
1365
|
+
/** Reference collage for chips variants (1920×1440). Banner height follows this asset’s ratio. */
|
|
1366
|
+
declare const IMAGE_BANNER_CHIPS_DEFAULT_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69a13cf79748b347527dc74d_tier-cover.webp";
|
|
1367
|
+
declare const ImageBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, chips, imageUrl, imageAlt, className, ...props }: ImageBannerProps) => react_jsx_runtime.JSX.Element;
|
|
1354
1368
|
|
|
1355
1369
|
interface TestimonialItem {
|
|
1356
1370
|
/** The testimonial quote text */
|
|
@@ -2136,4 +2150,141 @@ declare const FEATURE_OFFICES_TEXT_CONTENT: {
|
|
|
2136
2150
|
};
|
|
2137
2151
|
declare const FeatureOffices: ({ title, regions, activeRegionId, defaultActiveRegionId, onRegionChange, offices, linkText, className, ...props }: FeatureOfficesProps) => react_jsx_runtime.JSX.Element;
|
|
2138
2152
|
|
|
2139
|
-
|
|
2153
|
+
/** Visual accent used for the desktop connector line beside each medal. */
|
|
2154
|
+
type TierAccent = "bronze" | "silver" | "gold" | "platinum";
|
|
2155
|
+
interface TierItem {
|
|
2156
|
+
/** Medal / badge image URL */
|
|
2157
|
+
icon: string;
|
|
2158
|
+
/** Accessible alt text for the icon. Defaults to the tier `name` when omitted. */
|
|
2159
|
+
iconAlt?: string;
|
|
2160
|
+
/** Tier label shown under the icon, e.g. "Bronze" */
|
|
2161
|
+
name: string;
|
|
2162
|
+
/** Short stage label under the name, e.g. "Launch" */
|
|
2163
|
+
status: string;
|
|
2164
|
+
/** Benefit headline inside the card, e.g. "Commission + 4% bonus" */
|
|
2165
|
+
title: string;
|
|
2166
|
+
/**
|
|
2167
|
+
* Benefit body copy inside the card. Accepts a string or a ReactNode so
|
|
2168
|
+
* consumers can bold key phrases (as on the Platinum tier on
|
|
2169
|
+
* deriv.com/partners).
|
|
2170
|
+
*/
|
|
2171
|
+
description: ReactNode;
|
|
2172
|
+
/**
|
|
2173
|
+
* Optional qualification line under the card, e.g.
|
|
2174
|
+
* "3-month average commission:\\n$500+". Use `\\n` for the line break
|
|
2175
|
+
* shown on the reference page. Omit for the entry tier.
|
|
2176
|
+
*/
|
|
2177
|
+
requirement?: string;
|
|
2178
|
+
/**
|
|
2179
|
+
* Connector-line accent for this tier on desktop. Defaults by index when
|
|
2180
|
+
* omitted (bronze → silver → gold → platinum).
|
|
2181
|
+
*/
|
|
2182
|
+
accent?: TierAccent;
|
|
2183
|
+
}
|
|
2184
|
+
interface TiersProps {
|
|
2185
|
+
/** Section headline (H2) */
|
|
2186
|
+
title: string;
|
|
2187
|
+
/** Supporting copy under the title */
|
|
2188
|
+
description?: string;
|
|
2189
|
+
/** Ordered list of partnership tiers (typically 4) */
|
|
2190
|
+
tiers: TierItem[];
|
|
2191
|
+
/** Show the section-level CTA link under the tier grid (default: false) */
|
|
2192
|
+
showLink?: boolean;
|
|
2193
|
+
/** Label for the section-level link */
|
|
2194
|
+
linkText?: string;
|
|
2195
|
+
/** Destination for the section-level link */
|
|
2196
|
+
linkHref?: string;
|
|
2197
|
+
/** Click handler for the section-level link */
|
|
2198
|
+
onLinkClick?: () => void;
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2201
|
+
/**
|
|
2202
|
+
* Partnership-tier comparison section — centred header, a responsive
|
|
2203
|
+
* track of medal tiers (with desktop connector lines), and an optional CTA.
|
|
2204
|
+
* Modeled after the "Growing rewards as you scale" block on
|
|
2205
|
+
* https://deriv.com/partners.
|
|
2206
|
+
*
|
|
2207
|
+
* Mobile (<768px): single column; each tier is a white outer card with
|
|
2208
|
+
* the medal, a horizontal name/status row, a slate benefit panel, and an
|
|
2209
|
+
* optional requirement. Desktop (≥992px): four equal columns with metallic
|
|
2210
|
+
* connector lines through the medals.
|
|
2211
|
+
*/
|
|
2212
|
+
declare const Tiers: ({ title, description, tiers, showLink, linkText, linkHref, onLinkClick, }: TiersProps) => react_jsx_runtime.JSX.Element;
|
|
2213
|
+
|
|
2214
|
+
interface PartnerPayoutItem {
|
|
2215
|
+
/** Region or market label, e.g. "Africa". */
|
|
2216
|
+
region: string;
|
|
2217
|
+
/** Formatted payout amount, e.g. "$ 1,237,927.70". */
|
|
2218
|
+
amount: string;
|
|
2219
|
+
}
|
|
2220
|
+
interface PartnersPayoutProps extends HTMLAttributes<HTMLElement> {
|
|
2221
|
+
/** Section headline. */
|
|
2222
|
+
title: string;
|
|
2223
|
+
/** Reporting period shown below the headline. */
|
|
2224
|
+
period: string;
|
|
2225
|
+
/** Regional payout figures. */
|
|
2226
|
+
payouts: PartnerPayoutItem[];
|
|
2227
|
+
/** Globe image URL. */
|
|
2228
|
+
imageUrl: string;
|
|
2229
|
+
/** Accessible alt text. Leave empty when the globe is decorative. */
|
|
2230
|
+
imageAlt?: string;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
/**
|
|
2234
|
+
* Dark partner-payout section with a responsive metric grid and globe image,
|
|
2235
|
+
* modeled after the "Top partner payouts" section on deriv.com/partners.
|
|
2236
|
+
*/
|
|
2237
|
+
declare const PartnersPayout: ({ title, period, payouts, imageUrl, imageAlt, className, ...props }: PartnersPayoutProps) => react_jsx_runtime.JSX.Element;
|
|
2238
|
+
|
|
2239
|
+
interface MasterPartnerStep {
|
|
2240
|
+
/** Numbered icon image URL (e.g. a circled numeral graphic). */
|
|
2241
|
+
icon: string;
|
|
2242
|
+
/** Accessible alt text for the icon. Leave empty — order is already conveyed by the list. */
|
|
2243
|
+
iconAlt?: string;
|
|
2244
|
+
/** Step description copy. */
|
|
2245
|
+
description: string;
|
|
2246
|
+
}
|
|
2247
|
+
interface MasterPartnerNote {
|
|
2248
|
+
/** Bold lead-in phrase, e.g. "Here's how it works:" */
|
|
2249
|
+
label: string;
|
|
2250
|
+
/** Remaining sentence rendered after the bold label. */
|
|
2251
|
+
text: string;
|
|
2252
|
+
}
|
|
2253
|
+
interface MasterPartnerProps {
|
|
2254
|
+
/** Section headline (H2). */
|
|
2255
|
+
title: string;
|
|
2256
|
+
/** Intro paragraph under the title. */
|
|
2257
|
+
description: string;
|
|
2258
|
+
/** Optional bold-led paragraph, e.g. a worked commission example. */
|
|
2259
|
+
note?: MasterPartnerNote;
|
|
2260
|
+
/** Optional closing paragraph rendered after `note`. */
|
|
2261
|
+
closingText?: string;
|
|
2262
|
+
/** CTA button label. Rendered on desktop only; omit to hide the CTA entirely. */
|
|
2263
|
+
ctaLabel?: string;
|
|
2264
|
+
/** CTA destination URL. Renders the button inside an anchor when set. */
|
|
2265
|
+
ctaHref?: string;
|
|
2266
|
+
/** CTA click handler, used whether or not `ctaHref` is set. */
|
|
2267
|
+
onCtaClick?: () => void;
|
|
2268
|
+
/** Foreground image URL (e.g. a partner working at a desk). */
|
|
2269
|
+
image: string;
|
|
2270
|
+
/** Accessible alt text for the image. Leave empty when purely decorative. */
|
|
2271
|
+
imageAlt?: string;
|
|
2272
|
+
/** Ordered "how it works" steps (typically 4), each with a numbered icon. */
|
|
2273
|
+
steps: MasterPartnerStep[];
|
|
2274
|
+
}
|
|
2275
|
+
|
|
2276
|
+
/**
|
|
2277
|
+
* "Master Partner programme" section — headline and intro copy beside a
|
|
2278
|
+
* foreground image, a desktop-only coral CTA placed after the copy and
|
|
2279
|
+
* before the numbered steps, and a full-width row of numbered "how it
|
|
2280
|
+
* works" steps underneath. Modeled after the "Master Partner programme"
|
|
2281
|
+
* block on https://deriv.com/partners.
|
|
2282
|
+
*
|
|
2283
|
+
* Mobile/tablet (<992px): single column (content, then image), steps stack
|
|
2284
|
+
* to 1-2 columns, and the CTA button is hidden.
|
|
2285
|
+
* Desktop (≥992px): content and image sit side by side, the CTA button
|
|
2286
|
+
* becomes visible right after the copy, and steps lay out in a single row.
|
|
2287
|
+
*/
|
|
2288
|
+
declare const MasterPartner: ({ title, description, note, closingText, ctaLabel, ctaHref, onCtaClick, image, imageAlt, steps, }: MasterPartnerProps) => react_jsx_runtime.JSX.Element;
|
|
2289
|
+
|
|
2290
|
+
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, 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
CHANGED
|
@@ -1318,6 +1318,7 @@ declare const PeopleGrid: ({ title, description, items, initialVisibleCount, exp
|
|
|
1318
1318
|
/** @deprecated Use AvatarGrid instead */
|
|
1319
1319
|
declare const Leaders: ({ title, description, items, initialVisibleCount, expandText, collapseText, className, ...props }: AvatarGridProps) => react_jsx_runtime.JSX.Element;
|
|
1320
1320
|
|
|
1321
|
+
type ImageBannerVariant = "split-left" | "split-right" | "full-bg-left" | "full-bg-right" | "chips-left" | "chips-right";
|
|
1321
1322
|
interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
|
|
1322
1323
|
/**
|
|
1323
1324
|
* Layout variant.
|
|
@@ -1325,23 +1326,34 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
|
|
|
1325
1326
|
* - `"split-right"`: image fills the left-hand panel; text on the right.
|
|
1326
1327
|
* - `"full-bg-left"`: image covers the entire card as a background; text overlaid on the left.
|
|
1327
1328
|
* - `"full-bg-right"`: image covers the entire card as a background; text overlaid on the right.
|
|
1329
|
+
* - `"chips-left"`: title, description, and checkmark chips on the left; collage image on the right
|
|
1330
|
+
* (matches the "Everything you need to grow your network" block on deriv.com/partners).
|
|
1331
|
+
* - `"chips-right"`: mirror of `"chips-left"` — collage on the left; text and chips on the right.
|
|
1328
1332
|
*/
|
|
1329
|
-
variant?:
|
|
1333
|
+
variant?: ImageBannerVariant;
|
|
1330
1334
|
/** Section headline */
|
|
1331
1335
|
title?: string;
|
|
1332
1336
|
/** Supporting body copy beneath the title */
|
|
1333
1337
|
description?: string;
|
|
1334
|
-
/** CTA link label */
|
|
1338
|
+
/** CTA link label — ignored for `chips-left` / `chips-right` (those variants have no CTA) */
|
|
1335
1339
|
ctaLabel?: string;
|
|
1336
1340
|
/** CTA link href */
|
|
1337
1341
|
ctaHref?: string;
|
|
1338
1342
|
/** Callback fired when the CTA link is clicked */
|
|
1339
1343
|
onCtaClick?: () => void;
|
|
1344
|
+
/**
|
|
1345
|
+
* Feature chips shown under the description for `chips-left` / `chips-right`.
|
|
1346
|
+
* Each string becomes a pill with a leading checkmark icon.
|
|
1347
|
+
*/
|
|
1348
|
+
chips?: string[];
|
|
1340
1349
|
/**
|
|
1341
1350
|
* URL of the photo.
|
|
1342
1351
|
* - `"split-left"`: fills the right-hand panel; stacks below text on mobile.
|
|
1343
1352
|
* - `"split-right"`: fills the left-hand panel; stacks above text on mobile.
|
|
1344
1353
|
* - `"full-bg-left"` / `"full-bg-right"`: covers the entire card as a background image.
|
|
1354
|
+
* - `"chips-left"` / `"chips-right"`: collage panel; banner height follows the image’s
|
|
1355
|
+
* intrinsic aspect ratio (defaults to the partners tier-cover collage, 1920×1440).
|
|
1356
|
+
* Prefer 4:3 assets so later images match this reference.
|
|
1345
1357
|
*/
|
|
1346
1358
|
imageUrl?: string;
|
|
1347
1359
|
/** Accessible alt text for the image */
|
|
@@ -1350,7 +1362,9 @@ interface ImageBannerProps extends HTMLAttributes<HTMLElement> {
|
|
|
1350
1362
|
className?: string;
|
|
1351
1363
|
}
|
|
1352
1364
|
|
|
1353
|
-
|
|
1365
|
+
/** Reference collage for chips variants (1920×1440). Banner height follows this asset’s ratio. */
|
|
1366
|
+
declare const IMAGE_BANNER_CHIPS_DEFAULT_IMAGE = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69a13cf79748b347527dc74d_tier-cover.webp";
|
|
1367
|
+
declare const ImageBanner: ({ variant, title, description, ctaLabel, ctaHref, onCtaClick, chips, imageUrl, imageAlt, className, ...props }: ImageBannerProps) => react_jsx_runtime.JSX.Element;
|
|
1354
1368
|
|
|
1355
1369
|
interface TestimonialItem {
|
|
1356
1370
|
/** The testimonial quote text */
|
|
@@ -2136,4 +2150,141 @@ declare const FEATURE_OFFICES_TEXT_CONTENT: {
|
|
|
2136
2150
|
};
|
|
2137
2151
|
declare const FeatureOffices: ({ title, regions, activeRegionId, defaultActiveRegionId, onRegionChange, offices, linkText, className, ...props }: FeatureOfficesProps) => react_jsx_runtime.JSX.Element;
|
|
2138
2152
|
|
|
2139
|
-
|
|
2153
|
+
/** Visual accent used for the desktop connector line beside each medal. */
|
|
2154
|
+
type TierAccent = "bronze" | "silver" | "gold" | "platinum";
|
|
2155
|
+
interface TierItem {
|
|
2156
|
+
/** Medal / badge image URL */
|
|
2157
|
+
icon: string;
|
|
2158
|
+
/** Accessible alt text for the icon. Defaults to the tier `name` when omitted. */
|
|
2159
|
+
iconAlt?: string;
|
|
2160
|
+
/** Tier label shown under the icon, e.g. "Bronze" */
|
|
2161
|
+
name: string;
|
|
2162
|
+
/** Short stage label under the name, e.g. "Launch" */
|
|
2163
|
+
status: string;
|
|
2164
|
+
/** Benefit headline inside the card, e.g. "Commission + 4% bonus" */
|
|
2165
|
+
title: string;
|
|
2166
|
+
/**
|
|
2167
|
+
* Benefit body copy inside the card. Accepts a string or a ReactNode so
|
|
2168
|
+
* consumers can bold key phrases (as on the Platinum tier on
|
|
2169
|
+
* deriv.com/partners).
|
|
2170
|
+
*/
|
|
2171
|
+
description: ReactNode;
|
|
2172
|
+
/**
|
|
2173
|
+
* Optional qualification line under the card, e.g.
|
|
2174
|
+
* "3-month average commission:\\n$500+". Use `\\n` for the line break
|
|
2175
|
+
* shown on the reference page. Omit for the entry tier.
|
|
2176
|
+
*/
|
|
2177
|
+
requirement?: string;
|
|
2178
|
+
/**
|
|
2179
|
+
* Connector-line accent for this tier on desktop. Defaults by index when
|
|
2180
|
+
* omitted (bronze → silver → gold → platinum).
|
|
2181
|
+
*/
|
|
2182
|
+
accent?: TierAccent;
|
|
2183
|
+
}
|
|
2184
|
+
interface TiersProps {
|
|
2185
|
+
/** Section headline (H2) */
|
|
2186
|
+
title: string;
|
|
2187
|
+
/** Supporting copy under the title */
|
|
2188
|
+
description?: string;
|
|
2189
|
+
/** Ordered list of partnership tiers (typically 4) */
|
|
2190
|
+
tiers: TierItem[];
|
|
2191
|
+
/** Show the section-level CTA link under the tier grid (default: false) */
|
|
2192
|
+
showLink?: boolean;
|
|
2193
|
+
/** Label for the section-level link */
|
|
2194
|
+
linkText?: string;
|
|
2195
|
+
/** Destination for the section-level link */
|
|
2196
|
+
linkHref?: string;
|
|
2197
|
+
/** Click handler for the section-level link */
|
|
2198
|
+
onLinkClick?: () => void;
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2201
|
+
/**
|
|
2202
|
+
* Partnership-tier comparison section — centred header, a responsive
|
|
2203
|
+
* track of medal tiers (with desktop connector lines), and an optional CTA.
|
|
2204
|
+
* Modeled after the "Growing rewards as you scale" block on
|
|
2205
|
+
* https://deriv.com/partners.
|
|
2206
|
+
*
|
|
2207
|
+
* Mobile (<768px): single column; each tier is a white outer card with
|
|
2208
|
+
* the medal, a horizontal name/status row, a slate benefit panel, and an
|
|
2209
|
+
* optional requirement. Desktop (≥992px): four equal columns with metallic
|
|
2210
|
+
* connector lines through the medals.
|
|
2211
|
+
*/
|
|
2212
|
+
declare const Tiers: ({ title, description, tiers, showLink, linkText, linkHref, onLinkClick, }: TiersProps) => react_jsx_runtime.JSX.Element;
|
|
2213
|
+
|
|
2214
|
+
interface PartnerPayoutItem {
|
|
2215
|
+
/** Region or market label, e.g. "Africa". */
|
|
2216
|
+
region: string;
|
|
2217
|
+
/** Formatted payout amount, e.g. "$ 1,237,927.70". */
|
|
2218
|
+
amount: string;
|
|
2219
|
+
}
|
|
2220
|
+
interface PartnersPayoutProps extends HTMLAttributes<HTMLElement> {
|
|
2221
|
+
/** Section headline. */
|
|
2222
|
+
title: string;
|
|
2223
|
+
/** Reporting period shown below the headline. */
|
|
2224
|
+
period: string;
|
|
2225
|
+
/** Regional payout figures. */
|
|
2226
|
+
payouts: PartnerPayoutItem[];
|
|
2227
|
+
/** Globe image URL. */
|
|
2228
|
+
imageUrl: string;
|
|
2229
|
+
/** Accessible alt text. Leave empty when the globe is decorative. */
|
|
2230
|
+
imageAlt?: string;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
/**
|
|
2234
|
+
* Dark partner-payout section with a responsive metric grid and globe image,
|
|
2235
|
+
* modeled after the "Top partner payouts" section on deriv.com/partners.
|
|
2236
|
+
*/
|
|
2237
|
+
declare const PartnersPayout: ({ title, period, payouts, imageUrl, imageAlt, className, ...props }: PartnersPayoutProps) => react_jsx_runtime.JSX.Element;
|
|
2238
|
+
|
|
2239
|
+
interface MasterPartnerStep {
|
|
2240
|
+
/** Numbered icon image URL (e.g. a circled numeral graphic). */
|
|
2241
|
+
icon: string;
|
|
2242
|
+
/** Accessible alt text for the icon. Leave empty — order is already conveyed by the list. */
|
|
2243
|
+
iconAlt?: string;
|
|
2244
|
+
/** Step description copy. */
|
|
2245
|
+
description: string;
|
|
2246
|
+
}
|
|
2247
|
+
interface MasterPartnerNote {
|
|
2248
|
+
/** Bold lead-in phrase, e.g. "Here's how it works:" */
|
|
2249
|
+
label: string;
|
|
2250
|
+
/** Remaining sentence rendered after the bold label. */
|
|
2251
|
+
text: string;
|
|
2252
|
+
}
|
|
2253
|
+
interface MasterPartnerProps {
|
|
2254
|
+
/** Section headline (H2). */
|
|
2255
|
+
title: string;
|
|
2256
|
+
/** Intro paragraph under the title. */
|
|
2257
|
+
description: string;
|
|
2258
|
+
/** Optional bold-led paragraph, e.g. a worked commission example. */
|
|
2259
|
+
note?: MasterPartnerNote;
|
|
2260
|
+
/** Optional closing paragraph rendered after `note`. */
|
|
2261
|
+
closingText?: string;
|
|
2262
|
+
/** CTA button label. Rendered on desktop only; omit to hide the CTA entirely. */
|
|
2263
|
+
ctaLabel?: string;
|
|
2264
|
+
/** CTA destination URL. Renders the button inside an anchor when set. */
|
|
2265
|
+
ctaHref?: string;
|
|
2266
|
+
/** CTA click handler, used whether or not `ctaHref` is set. */
|
|
2267
|
+
onCtaClick?: () => void;
|
|
2268
|
+
/** Foreground image URL (e.g. a partner working at a desk). */
|
|
2269
|
+
image: string;
|
|
2270
|
+
/** Accessible alt text for the image. Leave empty when purely decorative. */
|
|
2271
|
+
imageAlt?: string;
|
|
2272
|
+
/** Ordered "how it works" steps (typically 4), each with a numbered icon. */
|
|
2273
|
+
steps: MasterPartnerStep[];
|
|
2274
|
+
}
|
|
2275
|
+
|
|
2276
|
+
/**
|
|
2277
|
+
* "Master Partner programme" section — headline and intro copy beside a
|
|
2278
|
+
* foreground image, a desktop-only coral CTA placed after the copy and
|
|
2279
|
+
* before the numbered steps, and a full-width row of numbered "how it
|
|
2280
|
+
* works" steps underneath. Modeled after the "Master Partner programme"
|
|
2281
|
+
* block on https://deriv.com/partners.
|
|
2282
|
+
*
|
|
2283
|
+
* Mobile/tablet (<992px): single column (content, then image), steps stack
|
|
2284
|
+
* to 1-2 columns, and the CTA button is hidden.
|
|
2285
|
+
* Desktop (≥992px): content and image sit side by side, the CTA button
|
|
2286
|
+
* becomes visible right after the copy, and steps lay out in a single row.
|
|
2287
|
+
*/
|
|
2288
|
+
declare const MasterPartner: ({ title, description, note, closingText, ctaLabel, ctaHref, onCtaClick, image, imageAlt, steps, }: MasterPartnerProps) => react_jsx_runtime.JSX.Element;
|
|
2289
|
+
|
|
2290
|
+
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, 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 };
|