npm - @deriv-web-design/ui - Versions diffs - 0.1.21 → 0.1.23 - Mend

@deriv-web-design/ui 0.1.21 → 0.1.23

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.

Files changed (11) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -2409,7 +2409,7 @@ declare const RESOURCE_BANNER_DERIV_CONTENT: {
 };
 declare const ResourceBanner: ({ title, description, links, headingLevel: HeadingTag, className, ...props }: ResourceBannerProps) => react_jsx_runtime.JSX.Element;
-type OptionsTypesVariant = "tabs" | "single";
+type OptionsTypesVariant = "tabs" | "single" | "toggle";
 type OptionsTypesIcon = "forex" | "stock-indices" | "commodities" | "derived-indices" | "cryptocurrencies" | "deriv-trader" | "deriv-bot" | "smarttrader";
 interface OptionsTypesAnimation {
     /** Stable key for playback state. */
@@ -2423,6 +2423,13 @@ interface OptionsTypesAnimation {
     src: string;
     /** Still image covering the card until playback starts. */
     posterUrl?: string;
+    /**
+     * HTTPS URL to a glyph shown on this animation's switch control in the
+     * `toggle` variant. The control is icon-only when supplied and falls back
+     * to `label` text when it is not; either way `label` names the control for
+     * assistive technology. Ignored by the other variants.
+     */
+    iconUrl?: string;
 }
 interface OptionsTypesMetaItem {
     /** Visible market or platform name. */
@@ -2454,6 +2461,10 @@ interface OptionsTypesProps extends Omit<HTMLAttributes<HTMLElement>, "title" |
     /**
      * `tabs` shows a selectable list of option types.
      * `single` shows one option in a media/content split.
+     * `toggle` shows one option as a single media well whose animation is
+     * swapped by an icon switch above the card heading, with the copy beside
+     * it. Use it when the animations are two views of the same idea (up/down,
+     * before/after) rather than two separate things worth showing at once.
      * @default "tabs"
      */
     variant?: OptionsTypesVariant;
@@ -2485,6 +2496,16 @@ declare const OPTIONS_TYPES_ACCUMULATOR_CONTENT: OptionsTypesProps;
 declare const OPTIONS_TYPES_VANILLA_CONTENT: OptionsTypesProps;
 declare const OPTIONS_TYPES_TURBO_CONTENT: OptionsTypesProps;
 declare const OPTIONS_TYPES_MULTIPLIERS_CONTENT: OptionsTypesProps;
+/**
+ * EU multipliers — `.section_multipliers_types` on
+ * deriv.com/eu/trade/multipliers.
+ *
+ * The EU section differs from the ROW one above in three ways: the two clips
+ * are two views of one idea rather than two things to show at once, so they
+ * share a single well behind an Up/Down switch (`variant: "toggle"`); the card
+ * carries its own heading; and there are no availability lists.
+ */
+declare const OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT: OptionsTypesProps;
 type EntityInfoSectionHeadingLevel = "h2" | "h3" | "h4";
 interface EntityInfoSectionLink {
@@ -2789,4 +2810,4 @@ interface AffiliatesSliderProps extends HTMLAttributes<HTMLElement> {
 declare const AffiliatesSlider: ({ title, description, min, max, step, defaultValue, value, onValueChange, referralsLabel, incomeLabel, incomePerReferral, currencySymbol, tickValues, disclaimer, disclaimerIconSrc, disclaimerIconAlt, sliderLabel, className, ...props }: AffiliatesSliderProps) => react_jsx_runtime.JSX.Element;
-export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, 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, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, DEFAULT_AWARDS, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, 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, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, 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, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, 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 };
+export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, 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, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, DEFAULT_AWARDS, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, 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, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, 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, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, 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 CHANGED Viewed

@@ -2409,7 +2409,7 @@ declare const RESOURCE_BANNER_DERIV_CONTENT: {
 };
 declare const ResourceBanner: ({ title, description, links, headingLevel: HeadingTag, className, ...props }: ResourceBannerProps) => react_jsx_runtime.JSX.Element;
-type OptionsTypesVariant = "tabs" | "single";
+type OptionsTypesVariant = "tabs" | "single" | "toggle";
 type OptionsTypesIcon = "forex" | "stock-indices" | "commodities" | "derived-indices" | "cryptocurrencies" | "deriv-trader" | "deriv-bot" | "smarttrader";
 interface OptionsTypesAnimation {
     /** Stable key for playback state. */
@@ -2423,6 +2423,13 @@ interface OptionsTypesAnimation {
     src: string;
     /** Still image covering the card until playback starts. */
     posterUrl?: string;
+    /**
+     * HTTPS URL to a glyph shown on this animation's switch control in the
+     * `toggle` variant. The control is icon-only when supplied and falls back
+     * to `label` text when it is not; either way `label` names the control for
+     * assistive technology. Ignored by the other variants.
+     */
+    iconUrl?: string;
 }
 interface OptionsTypesMetaItem {
     /** Visible market or platform name. */
@@ -2454,6 +2461,10 @@ interface OptionsTypesProps extends Omit<HTMLAttributes<HTMLElement>, "title" |
     /**
      * `tabs` shows a selectable list of option types.
      * `single` shows one option in a media/content split.
+     * `toggle` shows one option as a single media well whose animation is
+     * swapped by an icon switch above the card heading, with the copy beside
+     * it. Use it when the animations are two views of the same idea (up/down,
+     * before/after) rather than two separate things worth showing at once.
      * @default "tabs"
      */
     variant?: OptionsTypesVariant;
@@ -2485,6 +2496,16 @@ declare const OPTIONS_TYPES_ACCUMULATOR_CONTENT: OptionsTypesProps;
 declare const OPTIONS_TYPES_VANILLA_CONTENT: OptionsTypesProps;
 declare const OPTIONS_TYPES_TURBO_CONTENT: OptionsTypesProps;
 declare const OPTIONS_TYPES_MULTIPLIERS_CONTENT: OptionsTypesProps;
+/**
+ * EU multipliers — `.section_multipliers_types` on
+ * deriv.com/eu/trade/multipliers.
+ *
+ * The EU section differs from the ROW one above in three ways: the two clips
+ * are two views of one idea rather than two things to show at once, so they
+ * share a single well behind an Up/Down switch (`variant: "toggle"`); the card
+ * carries its own heading; and there are no availability lists.
+ */
+declare const OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT: OptionsTypesProps;
 type EntityInfoSectionHeadingLevel = "h2" | "h3" | "h4";
 interface EntityInfoSectionLink {
@@ -2789,4 +2810,4 @@ interface AffiliatesSliderProps extends HTMLAttributes<HTMLElement> {
 declare const AffiliatesSlider: ({ title, description, min, max, step, defaultValue, value, onValueChange, referralsLabel, incomeLabel, incomePerReferral, currencySymbol, tickValues, disclaimer, disclaimerIconSrc, disclaimerIconAlt, sliderLabel, className, ...props }: AffiliatesSliderProps) => react_jsx_runtime.JSX.Element;
-export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, 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, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, DEFAULT_AWARDS, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, 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, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, 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, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, 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 };
+export { AVATAR_DATA, Accordion, type AccordionProps, AffiliatesSlider, type AffiliatesSliderProps, 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, CountryLinkGrid, type CountryLinkGridHeadingLevel, type CountryLinkGridItem, type CountryLinkGridProps, DEFAULT_AWARDS, DEFAULT_CULTURE_CARDS, DEFAULT_EXCHANGE_RATE_WS_URL, DEFAULT_SYMBOLS_ENDPOINT, DayNightTransition, type DayNightTransitionProps, DocumentChips, type DocumentChipsDocument, type DocumentChipsGroup, type DocumentChipsHeadingLevel, type DocumentChipsLanguageLink, type DocumentChipsProps, type DocumentChipsVariant, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, DynamicTable, type DynamicTableColumnDef, type DynamicTableProps, type DynamicTableRowData, type DynamicTableVariant, EntityInfoSection, type EntityInfoSectionHeadingLevel, type EntityInfoSectionLink, type EntityInfoSectionProps, 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, LanguageSelectModal, type LanguageSelectModalOption, type LanguageSelectModalProps, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, LinkModal, type LinkModalProps, 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, OPTIONS_TYPES_ACCUMULATOR_CONTENT, OPTIONS_TYPES_DIGITAL_CONTENT, OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT, OPTIONS_TYPES_MULTIPLIERS_CONTENT, OPTIONS_TYPES_PLACEHOLDER_ITEMS, OPTIONS_TYPES_TURBO_CONTENT, OPTIONS_TYPES_VANILLA_CONTENT, OptionsTypes, type OptionsTypesAnimation, type OptionsTypesIcon, type OptionsTypesItem, type OptionsTypesMetaItem, type OptionsTypesProps, type OptionsTypesVariant, 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.js CHANGED Viewed

@@ -92,6 +92,7 @@ __export(index_exports, {
   Navbar: () => Navbar,
   OPTIONS_TYPES_ACCUMULATOR_CONTENT: () => OPTIONS_TYPES_ACCUMULATOR_CONTENT,
   OPTIONS_TYPES_DIGITAL_CONTENT: () => OPTIONS_TYPES_DIGITAL_CONTENT,
+  OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT: () => OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT,
   OPTIONS_TYPES_MULTIPLIERS_CONTENT: () => OPTIONS_TYPES_MULTIPLIERS_CONTENT,
   OPTIONS_TYPES_PLACEHOLDER_ITEMS: () => OPTIONS_TYPES_PLACEHOLDER_ITEMS,
   OPTIONS_TYPES_TURBO_CONTENT: () => OPTIONS_TYPES_TURBO_CONTENT,
@@ -8761,6 +8762,126 @@ function OptionPanel({
     metadata
   ] });
 }
+function TogglePanel({
+  item,
+  idPrefix,
+  marketsLabel,
+  platformsLabel,
+  playing,
+  setPlaying
+}) {
+  const animations = item.animations;
+  const [activeIndex, setActiveIndex] = (0, import_react34.useState)(0);
+  const switchRefs = (0, import_react34.useRef)([]);
+  const safeIndex = Math.min(activeIndex, Math.max(animations.length - 1, 0));
+  (0, import_react34.useEffect)(() => {
+    setPlaying({});
+  }, [safeIndex, setPlaying]);
+  const hasMarkets = Boolean(item.markets && item.markets.length > 0);
+  const hasPlatforms = Boolean(item.platforms && item.platforms.length > 0);
+  const onSwitchKeyDown = (event) => {
+    const last = animations.length - 1;
+    let next = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      next = safeIndex === last ? 0 : safeIndex + 1;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      next = safeIndex === 0 ? last : safeIndex - 1;
+    } else if (event.key === "Home") {
+      next = 0;
+    } else if (event.key === "End") {
+      next = last;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setActiveIndex(next);
+    switchRefs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__option ot__option--toggle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ot__toggle-media", children: animations.map((animation, index) => {
+      const key = `${item.id}-${animation.id ?? index}`;
+      const isActive = index === safeIndex;
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        "div",
+        {
+          className: "ot__toggle-pane",
+          id: `${idPrefix}-media-${index}`,
+          role: "tabpanel",
+          "aria-labelledby": `${idPrefix}-switch-${index}`,
+          hidden: !isActive,
+          children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            AnimationCard,
+            {
+              animation,
+              itemId: item.id,
+              playing: Boolean(playing[key]),
+              onToggle: () => setPlaying((current) => ({
+                ...current,
+                [key]: !current[key]
+              }))
+            }
+          ) : null
+        },
+        key
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__toggle-side", children: [
+      animations.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        "div",
+        {
+          className: "ot__toggle-switch",
+          role: "tablist",
+          "aria-label": `${item.title} views`,
+          onKeyDown: onSwitchKeyDown,
+          children: animations.map((animation, index) => {
+            const isActive = index === safeIndex;
+            const iconUrl = safeHref(animation.iconUrl);
+            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "button",
+              {
+                ref: (node) => {
+                  switchRefs.current[index] = node;
+                },
+                type: "button",
+                role: "tab",
+                id: `${idPrefix}-switch-${index}`,
+                "aria-controls": `${idPrefix}-media-${index}`,
+                "aria-selected": isActive,
+                "aria-label": animation.label,
+                tabIndex: isActive ? 0 : -1,
+                className: `ot__toggle-option${isActive ? " ot__toggle-option--active" : ""}`,
+                onClick: () => setActiveIndex(index),
+                children: iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                  "img",
+                  {
+                    className: "ot__toggle-icon",
+                    src: iconUrl,
+                    alt: "",
+                    "aria-hidden": "true",
+                    loading: "lazy",
+                    decoding: "async"
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ot__toggle-option-label", children: animation.label })
+              },
+              `${item.id}-switch-${animation.id ?? index}`
+            );
+          })
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h3", { className: "ot__toggle-title", children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ot__description", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: item.description }) }),
+      hasMarkets || hasPlatforms ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__metadata", children: [
+        hasMarkets ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__meta-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h4", { children: marketsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MetaList, { items: item.markets })
+        ] }) : null,
+        hasPlatforms ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__meta-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h4", { children: platformsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MetaList, { items: item.platforms })
+        ] }) : null
+      ] }) : null
+    ] })
+  ] });
+}
 function OptionsTypes({
   variant = "tabs",
   heading = "Section title goes here",
@@ -8834,7 +8955,17 @@ function OptionsTypes({
         },
         item.id
       );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    }) }) : variant === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      TogglePanel,
+      {
+        item: usableItems[0],
+        idPrefix: tabPrefix,
+        marketsLabel,
+        platformsLabel,
+        playing,
+        setPlaying
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       OptionPanel,
       {
         item: usableItems[0],
@@ -9075,6 +9206,31 @@ var OPTIONS_TYPES_MULTIPLIERS_CONTENT = {
     }
   ]
 };
+var OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT = {
+  variant: "toggle",
+  heading: "How do multipliers work",
+  items: [
+    {
+      id: "eu-multipliers",
+      title: "Multipliers",
+      description: "Choose a multiplier (up to 30x) and predict if the market price will go up or down compared to the entry price. Your potential payout grows the further the market price moves in your predicted direction, boosted by the multiplier. Losses are limited to the initial amount you put into the contract.",
+      animations: [
+        {
+          id: "up",
+          label: "Up",
+          src: `${WEBFLOW_CDN}/6630e305e7f044e7deae8a90_Web%20Trade%20Clip%20-%20Multipliers%20(Up).lottie`,
+          iconUrl: `${WEBFLOW_ICON_CDN}/68e4859893e33d078096e151_66585fe0e1dc7e70cc75dec1_multipliers-up-sm.svg`
+        },
+        {
+          id: "down",
+          label: "Down",
+          src: `${WEBFLOW_CDN}/6630e3055be526fd74f10190_Web%20Trade%20Clip%20-%20Multipliers%20(Down).lottie`,
+          iconUrl: `${WEBFLOW_ICON_CDN}/68e4859893e33d078096e155_66585fe0e1dc7e70cc75dee8_multipliers-down-sm.svg`
+        }
+      ]
+    }
+  ]
+};
 // templates/EntityInfoSection/EntityInfoSection.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
@@ -9769,6 +9925,7 @@ var AffiliatesSlider = ({
   Navbar,
   OPTIONS_TYPES_ACCUMULATOR_CONTENT,
   OPTIONS_TYPES_DIGITAL_CONTENT,
+  OPTIONS_TYPES_EU_MULTIPLIERS_CONTENT,
   OPTIONS_TYPES_MULTIPLIERS_CONTENT,
   OPTIONS_TYPES_PLACEHOLDER_ITEMS,
   OPTIONS_TYPES_TURBO_CONTENT,