npm - @deriv-web-design/ui - Versions diffs - 0.1.26 → 0.1.28 - Mend

@deriv-web-design/ui 0.1.26 → 0.1.28

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

@@ -1241,16 +1241,34 @@ declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_ru
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyMarketCardTheme = "light" | "coral" | "dark";
+/**
+ * Section layout variant.
+ * - `default` — background image + title | description columns (image overlay)
+ * - `lottie` — solid theme card with a manual-play Lottie panel + stacked copy
+ *   (matches live `option_card … is-tactical` on tactical indices)
+ */
+type StickyMarketCardsVariant = "default" | "lottie";
 interface StickyMarketCardItem {
     /** Card heading */
     title: string;
     /** Body copy below the title */
     description: string;
     /**
-     * URL of the card's hero image.
+     * URL of the card's hero image (default variant).
+     * Ignored when the section `variant` is `"lottie"`.
      * @default — placeholder used in stories when omitted
      */
     imageUrl?: string;
+    /**
+     * `.lottie` (or animation-hosting `.json`) URL for the card media panel.
+     * Used when the section `variant` is `"lottie"`.
+     */
+    lottieSrc?: string;
+    /**
+     * Optional still frame shown while the Lottie is paused / loading
+     * (`variant: "lottie"` only).
+     */
+    lottiePosterUrl?: string;
     /**
      * Background / text colour theme.
      * light → slate-75 bg + dark text
@@ -1265,13 +1283,18 @@ interface StickyMarketCardsProps extends HTMLAttributes<HTMLElement> {
     sectionTitle: string;
     /** Optional section description */
     sectionDescription?: string;
+    /**
+     * Card layout mode.
+     * @default "default"
+     */
+    variant?: StickyMarketCardsVariant;
     /**
      * Ordered list of cards (first item = back of stack, last = front).
      */
     items: StickyMarketCardItem[];
 }
-declare const StickyMarketCards: ({ sectionTitle, sectionDescription, items, className, ...props }: StickyMarketCardsProps) => react_jsx_runtime.JSX.Element;
+declare const StickyMarketCards: ({ sectionTitle, sectionDescription, variant, items, className, ...props }: StickyMarketCardsProps) => react_jsx_runtime.JSX.Element;
 /** Column width variant */
 type TableColumnWidth = "main" | "normal" | "big";
@@ -2826,4 +2849,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_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, isLottieSrc };
+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, type StickyMarketCardsVariant, 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, isLottieSrc };

package/dist/index.d.ts CHANGED Viewed

@@ -1241,16 +1241,34 @@ declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_ru
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyMarketCardTheme = "light" | "coral" | "dark";
+/**
+ * Section layout variant.
+ * - `default` — background image + title | description columns (image overlay)
+ * - `lottie` — solid theme card with a manual-play Lottie panel + stacked copy
+ *   (matches live `option_card … is-tactical` on tactical indices)
+ */
+type StickyMarketCardsVariant = "default" | "lottie";
 interface StickyMarketCardItem {
     /** Card heading */
     title: string;
     /** Body copy below the title */
     description: string;
     /**
-     * URL of the card's hero image.
+     * URL of the card's hero image (default variant).
+     * Ignored when the section `variant` is `"lottie"`.
      * @default — placeholder used in stories when omitted
      */
     imageUrl?: string;
+    /**
+     * `.lottie` (or animation-hosting `.json`) URL for the card media panel.
+     * Used when the section `variant` is `"lottie"`.
+     */
+    lottieSrc?: string;
+    /**
+     * Optional still frame shown while the Lottie is paused / loading
+     * (`variant: "lottie"` only).
+     */
+    lottiePosterUrl?: string;
     /**
      * Background / text colour theme.
      * light → slate-75 bg + dark text
@@ -1265,13 +1283,18 @@ interface StickyMarketCardsProps extends HTMLAttributes<HTMLElement> {
     sectionTitle: string;
     /** Optional section description */
     sectionDescription?: string;
+    /**
+     * Card layout mode.
+     * @default "default"
+     */
+    variant?: StickyMarketCardsVariant;
     /**
      * Ordered list of cards (first item = back of stack, last = front).
      */
     items: StickyMarketCardItem[];
 }
-declare const StickyMarketCards: ({ sectionTitle, sectionDescription, items, className, ...props }: StickyMarketCardsProps) => react_jsx_runtime.JSX.Element;
+declare const StickyMarketCards: ({ sectionTitle, sectionDescription, variant, items, className, ...props }: StickyMarketCardsProps) => react_jsx_runtime.JSX.Element;
 /** Column width variant */
 type TableColumnWidth = "main" | "normal" | "big";
@@ -2826,4 +2849,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_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, isLottieSrc };
+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, type StickyMarketCardsVariant, 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, isLottieSrc };

package/dist/index.js CHANGED Viewed

@@ -1291,7 +1291,7 @@ var FaqAccordion = ({
         open: openIndex === index,
         onToggle: handleToggle(index),
         showTopDivider: false,
-        showBottomDivider: true,
+        showBottomDivider: index < items.length - 1,
         children: item.answer
       },
       `${item.question}-${index}`
@@ -5053,15 +5053,89 @@ var TextScroll = ({ text, className }) => {
 var import_react21 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var PLACEHOLDER_IMAGE3 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
+function safeHref(value) {
+  if (!value) return null;
+  if (value.startsWith("/") && !value.startsWith("//")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" ? value : null;
+  } catch {
+    return null;
+  }
+}
+function safeLottieSrc(value) {
+  const href = safeHref(value);
+  if (!href || !isLottieSrc(href)) return null;
+  return href;
+}
+function PlaybackGlyph({ playing }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { className: "smc__control-icon", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { className: "smc__control-disc", cx: "32", cy: "32", r: "32" }),
+    playing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { className: "smc__control-glyph", x: "23", y: "21", width: "6", height: "22", rx: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { className: "smc__control-glyph", x: "35", y: "21", width: "6", height: "22", rx: "2" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "path",
+      {
+        className: "smc__control-glyph",
+        d: "M26.5058 19.9527L42.7058 29.8527C43.4933 30.359 43.9996 31.259 43.9996 32.159C43.9996 33.1152 43.4933 34.0152 42.7058 34.4652L26.5058 44.3652C25.6621 44.8715 24.5933 44.9277 23.7496 44.4215C22.9058 43.9715 22.3996 43.0715 22.3996 42.059V22.259C22.3996 21.3027 22.9058 20.4027 23.7496 19.9527C24.5933 19.4465 25.6621 19.4465 26.5058 19.9527Z"
+      }
+    )
+  ] });
+}
+function LottiePanel({ item, index, playing, onToggle }) {
+  const src = safeLottieSrc(item.lottieSrc);
+  const posterSrc = safeHref(item.lottiePosterUrl);
+  const controlId = `smc-lottie-${index}-${item.title}`.replace(/[^a-zA-Z0-9_-]/g, "-").slice(0, 80);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__lottie", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { id: controlId, className: "smc__lottie-media", "aria-hidden": "true", children: src ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      DotLottieInView,
+      {
+        src,
+        enabled: playing,
+        loop: true,
+        className: "smc__lottie-player",
+        style: { alignItems: "stretch", justifyContent: "stretch" },
+        poster: posterSrc ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: posterSrc, alt: "", loading: "lazy", decoding: "async" }) : void 0
+      }
+    ) : null }),
+    posterSrc && !playing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "img",
+      {
+        className: "smc__lottie-poster",
+        src: posterSrc,
+        alt: "",
+        "aria-hidden": "true",
+        loading: "lazy",
+        decoding: "async"
+      }
+    ) : null,
+    src ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "button",
+      {
+        type: "button",
+        className: `smc__playback-toggle${playing ? " smc__playback-toggle--playing" : ""}`,
+        "aria-controls": controlId,
+        "aria-pressed": playing,
+        "aria-label": `${playing ? "Pause" : "Play"} ${item.title} animation`,
+        onClick: onToggle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlaybackGlyph, { playing })
+      }
+    ) : null
+  ] });
+}
 var StickyMarketCards = ({
   sectionTitle,
   sectionDescription,
+  variant = "default",
   items,
   className,
   ...props
 }) => {
   const cardRefs = (0, import_react21.useRef)([]);
   const cardInnerRefs = (0, import_react21.useRef)([]);
+  const [playing, setPlaying] = (0, import_react21.useState)({});
+  const isLottie = variant === "lottie";
   (0, import_react21.useEffect)(() => {
     if (typeof window === "undefined") return;
     let rafId = 0;
@@ -5128,14 +5202,14 @@ var StickyMarketCards = ({
     return () => {
       window.removeEventListener("resize", syncHeights);
     };
-  }, [items.length]);
+  }, [items.length, variant]);
   const n = items.length;
   const maxStack = 4;
   const baseIndex = Math.max(0, n - maxStack);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "section",
     {
-      className: ["smc", className].filter(Boolean).join(" "),
+      className: ["smc", isLottie ? "smc--lottie" : null, className].filter(Boolean).join(" "),
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__inner", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__header-wrap", children: [
@@ -5164,10 +5238,11 @@ var StickyMarketCards = ({
                   },
                   className: [
                     "smc__card-inner",
-                    `smc__card-inner--${theme}`
-                  ].join(" "),
+                    `smc__card-inner--${theme}`,
+                    isLottie ? "smc__card-inner--lottie" : null
+                  ].filter(Boolean).join(" "),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-bg", children: [
+                    !isLottie ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-bg", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                         "img",
                         {
@@ -5186,11 +5261,37 @@ var StickyMarketCards = ({
                           ].join(" ")
                         }
                       )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-content", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "smc__card-title-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "smc__card-title", children: item.title }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "smc__card-desc-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "smc__card-desc", children: item.description }) })
-                    ] })
+                    ] }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                      "div",
+                      {
+                        className: [
+                          "smc__card-content",
+                          isLottie ? "smc__card-content--lottie" : null
+                        ].filter(Boolean).join(" "),
+                        children: isLottie ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                            LottiePanel,
+                            {
+                              item,
+                              index: i,
+                              playing: Boolean(playing[i]),
+                              onToggle: () => setPlaying((prev) => ({
+                                ...prev,
+                                [i]: !prev[i]
+                              }))
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-text", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "smc__card-title", children: item.title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "smc__card-desc", children: item.description })
+                          ] })
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "smc__card-title-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "smc__card-title", children: item.title }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "smc__card-desc-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "smc__card-desc", children: item.description }) })
+                        ] })
+                      }
+                    )
                   ]
                 }
               )
@@ -8600,7 +8701,7 @@ var OPTIONS_TYPES_PLACEHOLDER_ITEMS = [
     platforms: [{ label: "Platform" }]
   }
 ];
-function safeHref(value) {
+function safeHref2(value) {
   if (!value) return null;
   if (value.startsWith("/") && !value.startsWith("//")) return value;
   try {
@@ -8610,8 +8711,8 @@ function safeHref(value) {
     return null;
   }
 }
-function safeLottieSrc(value) {
-  const href = safeHref(value);
+function safeLottieSrc2(value) {
+  const href = safeHref2(value);
   if (!href) return null;
   try {
     const pathname = href.startsWith("/") ? href : new URL(href).pathname;
@@ -8643,7 +8744,7 @@ var iconPaths = {
   ]
 };
 function MetaIcon({ icon, iconUrl }) {
-  const imageSrc = safeHref(iconUrl);
+  const imageSrc = safeHref2(iconUrl);
   if (imageSrc) {
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "img",
@@ -8667,7 +8768,7 @@ function MetaIcon({ icon, iconUrl }) {
 }
 function MetaList({ items = [] }) {
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "ot__meta-list", children: items.map((item, index) => {
-    const href = safeHref(item.href);
+    const href = safeHref2(item.href);
     const content = /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MetaIcon, { icon: item.icon, iconUrl: item.iconUrl }),
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: item.label })
@@ -8675,7 +8776,7 @@ function MetaList({ items = [] }) {
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("li", { children: href ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("a", { href, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: content }) }, `${item.label}-${index}`);
   }) });
 }
-function PlaybackGlyph({ playing }) {
+function PlaybackGlyph2({ playing }) {
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { className: "ot__control-icon", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("circle", { className: "ot__control-disc", cx: "32", cy: "32", r: "32" }),
     playing ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
@@ -8696,8 +8797,8 @@ function AnimationCard({
   playing,
   onToggle
 }) {
-  const src = safeLottieSrc(animation.src);
-  const posterSrc = safeHref(animation.posterUrl);
+  const src = safeLottieSrc2(animation.src);
+  const posterSrc = safeHref2(animation.posterUrl);
   const controlId = `ot-animation-${itemId}-${animation.id ?? animation.label}`.replace(/[^a-zA-Z0-9_-]/g, "-");
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__animation-card", children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { id: controlId, className: "ot__animation-media", "aria-hidden": "true", children: src ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -8729,7 +8830,7 @@ function AnimationCard({
         "aria-pressed": playing,
         "aria-label": `${playing ? "Pause" : "Play"} ${animation.label} animation`,
         onClick: onToggle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(PlaybackGlyph, { playing })
+        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(PlaybackGlyph2, { playing })
       }
     ) : null
   ] });
@@ -8858,7 +8959,7 @@ function TogglePanel({
           onKeyDown: onSwitchKeyDown,
           children: animations.map((animation, index) => {
             const isActive = index === safeIndex;
-            const iconUrl = safeHref(animation.iconUrl);
+            const iconUrl = safeHref2(animation.iconUrl);
             return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               "button",
               {