@deriv-web-design/ui 0.1.28 → 0.1.30
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 +11 -43
- package/components.manifest.json +1 -17
- package/dist/index.css +2 -116
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +3 -26
- package/dist/index.d.ts +3 -26
- package/dist/index.js +79 -138
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +152 -211
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1241,34 +1241,16 @@ declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_ru
|
|
|
1241
1241
|
|
|
1242
1242
|
/** Visual colour theme for each card — matches the Figma palette. */
|
|
1243
1243
|
type StickyMarketCardTheme = "light" | "coral" | "dark";
|
|
1244
|
-
/**
|
|
1245
|
-
* Section layout variant.
|
|
1246
|
-
* - `default` — background image + title | description columns (image overlay)
|
|
1247
|
-
* - `lottie` — solid theme card with a manual-play Lottie panel + stacked copy
|
|
1248
|
-
* (matches live `option_card … is-tactical` on tactical indices)
|
|
1249
|
-
*/
|
|
1250
|
-
type StickyMarketCardsVariant = "default" | "lottie";
|
|
1251
1244
|
interface StickyMarketCardItem {
|
|
1252
1245
|
/** Card heading */
|
|
1253
1246
|
title: string;
|
|
1254
1247
|
/** Body copy below the title */
|
|
1255
1248
|
description: string;
|
|
1256
1249
|
/**
|
|
1257
|
-
* URL of the card's hero image
|
|
1258
|
-
* Ignored when the section `variant` is `"lottie"`.
|
|
1250
|
+
* URL of the card's hero image.
|
|
1259
1251
|
* @default — placeholder used in stories when omitted
|
|
1260
1252
|
*/
|
|
1261
1253
|
imageUrl?: string;
|
|
1262
|
-
/**
|
|
1263
|
-
* `.lottie` (or animation-hosting `.json`) URL for the card media panel.
|
|
1264
|
-
* Used when the section `variant` is `"lottie"`.
|
|
1265
|
-
*/
|
|
1266
|
-
lottieSrc?: string;
|
|
1267
|
-
/**
|
|
1268
|
-
* Optional still frame shown while the Lottie is paused / loading
|
|
1269
|
-
* (`variant: "lottie"` only).
|
|
1270
|
-
*/
|
|
1271
|
-
lottiePosterUrl?: string;
|
|
1272
1254
|
/**
|
|
1273
1255
|
* Background / text colour theme.
|
|
1274
1256
|
* light → slate-75 bg + dark text
|
|
@@ -1283,18 +1265,13 @@ interface StickyMarketCardsProps extends HTMLAttributes<HTMLElement> {
|
|
|
1283
1265
|
sectionTitle: string;
|
|
1284
1266
|
/** Optional section description */
|
|
1285
1267
|
sectionDescription?: string;
|
|
1286
|
-
/**
|
|
1287
|
-
* Card layout mode.
|
|
1288
|
-
* @default "default"
|
|
1289
|
-
*/
|
|
1290
|
-
variant?: StickyMarketCardsVariant;
|
|
1291
1268
|
/**
|
|
1292
1269
|
* Ordered list of cards (first item = back of stack, last = front).
|
|
1293
1270
|
*/
|
|
1294
1271
|
items: StickyMarketCardItem[];
|
|
1295
1272
|
}
|
|
1296
1273
|
|
|
1297
|
-
declare const StickyMarketCards: ({ sectionTitle, sectionDescription,
|
|
1274
|
+
declare const StickyMarketCards: ({ sectionTitle, sectionDescription, items, className, ...props }: StickyMarketCardsProps) => react_jsx_runtime.JSX.Element;
|
|
1298
1275
|
|
|
1299
1276
|
/** Column width variant */
|
|
1300
1277
|
type TableColumnWidth = "main" | "normal" | "big";
|
|
@@ -2849,4 +2826,4 @@ interface AffiliatesSliderProps extends HTMLAttributes<HTMLElement> {
|
|
|
2849
2826
|
|
|
2850
2827
|
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;
|
|
2851
2828
|
|
|
2852
|
-
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,
|
|
2829
|
+
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -1241,34 +1241,16 @@ declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_ru
|
|
|
1241
1241
|
|
|
1242
1242
|
/** Visual colour theme for each card — matches the Figma palette. */
|
|
1243
1243
|
type StickyMarketCardTheme = "light" | "coral" | "dark";
|
|
1244
|
-
/**
|
|
1245
|
-
* Section layout variant.
|
|
1246
|
-
* - `default` — background image + title | description columns (image overlay)
|
|
1247
|
-
* - `lottie` — solid theme card with a manual-play Lottie panel + stacked copy
|
|
1248
|
-
* (matches live `option_card … is-tactical` on tactical indices)
|
|
1249
|
-
*/
|
|
1250
|
-
type StickyMarketCardsVariant = "default" | "lottie";
|
|
1251
1244
|
interface StickyMarketCardItem {
|
|
1252
1245
|
/** Card heading */
|
|
1253
1246
|
title: string;
|
|
1254
1247
|
/** Body copy below the title */
|
|
1255
1248
|
description: string;
|
|
1256
1249
|
/**
|
|
1257
|
-
* URL of the card's hero image
|
|
1258
|
-
* Ignored when the section `variant` is `"lottie"`.
|
|
1250
|
+
* URL of the card's hero image.
|
|
1259
1251
|
* @default — placeholder used in stories when omitted
|
|
1260
1252
|
*/
|
|
1261
1253
|
imageUrl?: string;
|
|
1262
|
-
/**
|
|
1263
|
-
* `.lottie` (or animation-hosting `.json`) URL for the card media panel.
|
|
1264
|
-
* Used when the section `variant` is `"lottie"`.
|
|
1265
|
-
*/
|
|
1266
|
-
lottieSrc?: string;
|
|
1267
|
-
/**
|
|
1268
|
-
* Optional still frame shown while the Lottie is paused / loading
|
|
1269
|
-
* (`variant: "lottie"` only).
|
|
1270
|
-
*/
|
|
1271
|
-
lottiePosterUrl?: string;
|
|
1272
1254
|
/**
|
|
1273
1255
|
* Background / text colour theme.
|
|
1274
1256
|
* light → slate-75 bg + dark text
|
|
@@ -1283,18 +1265,13 @@ interface StickyMarketCardsProps extends HTMLAttributes<HTMLElement> {
|
|
|
1283
1265
|
sectionTitle: string;
|
|
1284
1266
|
/** Optional section description */
|
|
1285
1267
|
sectionDescription?: string;
|
|
1286
|
-
/**
|
|
1287
|
-
* Card layout mode.
|
|
1288
|
-
* @default "default"
|
|
1289
|
-
*/
|
|
1290
|
-
variant?: StickyMarketCardsVariant;
|
|
1291
1268
|
/**
|
|
1292
1269
|
* Ordered list of cards (first item = back of stack, last = front).
|
|
1293
1270
|
*/
|
|
1294
1271
|
items: StickyMarketCardItem[];
|
|
1295
1272
|
}
|
|
1296
1273
|
|
|
1297
|
-
declare const StickyMarketCards: ({ sectionTitle, sectionDescription,
|
|
1274
|
+
declare const StickyMarketCards: ({ sectionTitle, sectionDescription, items, className, ...props }: StickyMarketCardsProps) => react_jsx_runtime.JSX.Element;
|
|
1298
1275
|
|
|
1299
1276
|
/** Column width variant */
|
|
1300
1277
|
type TableColumnWidth = "main" | "normal" | "big";
|
|
@@ -2849,4 +2826,4 @@ interface AffiliatesSliderProps extends HTMLAttributes<HTMLElement> {
|
|
|
2849
2826
|
|
|
2850
2827
|
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;
|
|
2851
2828
|
|
|
2852
|
-
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,
|
|
2829
|
+
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 };
|
package/dist/index.js
CHANGED
|
@@ -3857,6 +3857,7 @@ var Navbar = ({
|
|
|
3857
3857
|
const [mobileOpen, setMobileOpen] = (0, import_react17.useState)(false);
|
|
3858
3858
|
const [mobileExpanded, setMobileExpanded] = (0, import_react17.useState)(null);
|
|
3859
3859
|
const [scrolled, setScrolled] = (0, import_react17.useState)(false);
|
|
3860
|
+
const [isDesktop, setIsDesktop] = (0, import_react17.useState)(false);
|
|
3860
3861
|
const [langDropdownOpen, setLangDropdownOpen] = (0, import_react17.useState)(false);
|
|
3861
3862
|
const [mobileLangOpen, setMobileLangOpen] = (0, import_react17.useState)(false);
|
|
3862
3863
|
const hoverTimeoutRef = (0, import_react17.useRef)(null);
|
|
@@ -3878,6 +3879,13 @@ var Navbar = ({
|
|
|
3878
3879
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
3879
3880
|
return () => window.removeEventListener("scroll", onScroll);
|
|
3880
3881
|
}, []);
|
|
3882
|
+
(0, import_react17.useEffect)(() => {
|
|
3883
|
+
const mq = window.matchMedia("(min-width: 992px)");
|
|
3884
|
+
const onChange = () => setIsDesktop(mq.matches);
|
|
3885
|
+
onChange();
|
|
3886
|
+
mq.addEventListener("change", onChange);
|
|
3887
|
+
return () => mq.removeEventListener("change", onChange);
|
|
3888
|
+
}, []);
|
|
3881
3889
|
(0, import_react17.useEffect)(() => {
|
|
3882
3890
|
const onKey = (e) => {
|
|
3883
3891
|
if (e.key === "Escape") {
|
|
@@ -3942,6 +3950,8 @@ var Navbar = ({
|
|
|
3942
3950
|
hoverTimeoutRef.current = setTimeout(() => setOpenDropdown(null), 120);
|
|
3943
3951
|
}, [clearHoverTimeout]);
|
|
3944
3952
|
const activeDropdownItem = navItems.find((item) => item.label === openDropdown);
|
|
3953
|
+
const pillCopyInert = !scrolled;
|
|
3954
|
+
const outerCopyInert = scrolled && isDesktop;
|
|
3945
3955
|
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
3946
3956
|
"nav",
|
|
3947
3957
|
{
|
|
@@ -3949,9 +3959,27 @@ var Navbar = ({
|
|
|
3949
3959
|
...props,
|
|
3950
3960
|
children: [
|
|
3951
3961
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__bar", children: [
|
|
3952
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3962
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3963
|
+
"a",
|
|
3964
|
+
{
|
|
3965
|
+
href: logoHref,
|
|
3966
|
+
className: "navbar__logo",
|
|
3967
|
+
"aria-label": "Home",
|
|
3968
|
+
inert: outerCopyInert || void 0,
|
|
3969
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: resolvedLogo, alt: "Logo" })
|
|
3970
|
+
}
|
|
3971
|
+
),
|
|
3953
3972
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "navbar__nav-center", ref: pillAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__pill", children: [
|
|
3954
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3973
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3974
|
+
"a",
|
|
3975
|
+
{
|
|
3976
|
+
href: logoHref,
|
|
3977
|
+
className: "navbar__pill-logo",
|
|
3978
|
+
"aria-label": "Home",
|
|
3979
|
+
inert: pillCopyInert || void 0,
|
|
3980
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: logoSrcDark ?? logoSrc, alt: "Logo" })
|
|
3981
|
+
}
|
|
3982
|
+
),
|
|
3955
3983
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__nav-group", children: [
|
|
3956
3984
|
navItems.map((item) => {
|
|
3957
3985
|
if (item.external) {
|
|
@@ -4019,10 +4047,17 @@ var Navbar = ({
|
|
|
4019
4047
|
}
|
|
4020
4048
|
)
|
|
4021
4049
|
] }),
|
|
4022
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4051
|
+
"div",
|
|
4052
|
+
{
|
|
4053
|
+
className: "navbar__pill-actions",
|
|
4054
|
+
inert: pillCopyInert || void 0,
|
|
4055
|
+
children: [
|
|
4056
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { colorScheme: "black", variant: "secondary", label: loginLabel }) }),
|
|
4057
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
4058
|
+
]
|
|
4059
|
+
}
|
|
4060
|
+
)
|
|
4026
4061
|
] }) }),
|
|
4027
4062
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_framer_motion2.AnimatePresence, { children: openDropdown && activeDropdownItem?.dropdown && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4028
4063
|
DropdownPanel,
|
|
@@ -4068,17 +4103,24 @@ var Navbar = ({
|
|
|
4068
4103
|
)
|
|
4069
4104
|
}
|
|
4070
4105
|
) }),
|
|
4071
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4072
|
-
|
|
4073
|
-
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
|
|
4078
|
-
|
|
4079
|
-
|
|
4080
|
-
|
|
4081
|
-
|
|
4106
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
4107
|
+
"div",
|
|
4108
|
+
{
|
|
4109
|
+
className: "navbar__actions",
|
|
4110
|
+
inert: outerCopyInert || void 0,
|
|
4111
|
+
children: [
|
|
4112
|
+
loginHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: loginHref, className: "navbar__actions-login", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4113
|
+
Button,
|
|
4114
|
+
{
|
|
4115
|
+
colorScheme: theme === "dark" ? "white" : "black",
|
|
4116
|
+
variant: "secondary",
|
|
4117
|
+
label: loginLabel
|
|
4118
|
+
}
|
|
4119
|
+
) }),
|
|
4120
|
+
ctaHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: ctaHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { colorScheme: "coral", variant: "primary", label: ctaLabel }) })
|
|
4121
|
+
]
|
|
4122
|
+
}
|
|
4123
|
+
),
|
|
4082
4124
|
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "navbar__mobile-actions", children: [
|
|
4083
4125
|
loginHref && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("a", { href: loginHref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
4084
4126
|
Button,
|
|
@@ -5053,89 +5095,15 @@ var TextScroll = ({ text, className }) => {
|
|
|
5053
5095
|
var import_react21 = require("react");
|
|
5054
5096
|
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
5055
5097
|
var PLACEHOLDER_IMAGE3 = "https://cdn.prod.website-files.com/68da5c86c91c54f39c86c28a/69b9309379ac08e59ca8210a_1f3f555da9a5cbb13a6fe1bf0d5fe1b6_placeholder-image.webp";
|
|
5056
|
-
function safeHref(value) {
|
|
5057
|
-
if (!value) return null;
|
|
5058
|
-
if (value.startsWith("/") && !value.startsWith("//")) return value;
|
|
5059
|
-
try {
|
|
5060
|
-
const url = new URL(value);
|
|
5061
|
-
return url.protocol === "https:" ? value : null;
|
|
5062
|
-
} catch {
|
|
5063
|
-
return null;
|
|
5064
|
-
}
|
|
5065
|
-
}
|
|
5066
|
-
function safeLottieSrc(value) {
|
|
5067
|
-
const href = safeHref(value);
|
|
5068
|
-
if (!href || !isLottieSrc(href)) return null;
|
|
5069
|
-
return href;
|
|
5070
|
-
}
|
|
5071
|
-
function PlaybackGlyph({ playing }) {
|
|
5072
|
-
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { className: "smc__control-icon", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
|
|
5073
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { className: "smc__control-disc", cx: "32", cy: "32", r: "32" }),
|
|
5074
|
-
playing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
5075
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { className: "smc__control-glyph", x: "23", y: "21", width: "6", height: "22", rx: "2" }),
|
|
5076
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("rect", { className: "smc__control-glyph", x: "35", y: "21", width: "6", height: "22", rx: "2" })
|
|
5077
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5078
|
-
"path",
|
|
5079
|
-
{
|
|
5080
|
-
className: "smc__control-glyph",
|
|
5081
|
-
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"
|
|
5082
|
-
}
|
|
5083
|
-
)
|
|
5084
|
-
] });
|
|
5085
|
-
}
|
|
5086
|
-
function LottiePanel({ item, index, playing, onToggle }) {
|
|
5087
|
-
const src = safeLottieSrc(item.lottieSrc);
|
|
5088
|
-
const posterSrc = safeHref(item.lottiePosterUrl);
|
|
5089
|
-
const controlId = `smc-lottie-${index}-${item.title}`.replace(/[^a-zA-Z0-9_-]/g, "-").slice(0, 80);
|
|
5090
|
-
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__lottie", children: [
|
|
5091
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { id: controlId, className: "smc__lottie-media", "aria-hidden": "true", children: src ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5092
|
-
DotLottieInView,
|
|
5093
|
-
{
|
|
5094
|
-
src,
|
|
5095
|
-
enabled: playing,
|
|
5096
|
-
loop: true,
|
|
5097
|
-
className: "smc__lottie-player",
|
|
5098
|
-
style: { alignItems: "stretch", justifyContent: "stretch" },
|
|
5099
|
-
poster: posterSrc ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: posterSrc, alt: "", loading: "lazy", decoding: "async" }) : void 0
|
|
5100
|
-
}
|
|
5101
|
-
) : null }),
|
|
5102
|
-
posterSrc && !playing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5103
|
-
"img",
|
|
5104
|
-
{
|
|
5105
|
-
className: "smc__lottie-poster",
|
|
5106
|
-
src: posterSrc,
|
|
5107
|
-
alt: "",
|
|
5108
|
-
"aria-hidden": "true",
|
|
5109
|
-
loading: "lazy",
|
|
5110
|
-
decoding: "async"
|
|
5111
|
-
}
|
|
5112
|
-
) : null,
|
|
5113
|
-
src ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5114
|
-
"button",
|
|
5115
|
-
{
|
|
5116
|
-
type: "button",
|
|
5117
|
-
className: `smc__playback-toggle${playing ? " smc__playback-toggle--playing" : ""}`,
|
|
5118
|
-
"aria-controls": controlId,
|
|
5119
|
-
"aria-pressed": playing,
|
|
5120
|
-
"aria-label": `${playing ? "Pause" : "Play"} ${item.title} animation`,
|
|
5121
|
-
onClick: onToggle,
|
|
5122
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlaybackGlyph, { playing })
|
|
5123
|
-
}
|
|
5124
|
-
) : null
|
|
5125
|
-
] });
|
|
5126
|
-
}
|
|
5127
5098
|
var StickyMarketCards = ({
|
|
5128
5099
|
sectionTitle,
|
|
5129
5100
|
sectionDescription,
|
|
5130
|
-
variant = "default",
|
|
5131
5101
|
items,
|
|
5132
5102
|
className,
|
|
5133
5103
|
...props
|
|
5134
5104
|
}) => {
|
|
5135
5105
|
const cardRefs = (0, import_react21.useRef)([]);
|
|
5136
5106
|
const cardInnerRefs = (0, import_react21.useRef)([]);
|
|
5137
|
-
const [playing, setPlaying] = (0, import_react21.useState)({});
|
|
5138
|
-
const isLottie = variant === "lottie";
|
|
5139
5107
|
(0, import_react21.useEffect)(() => {
|
|
5140
5108
|
if (typeof window === "undefined") return;
|
|
5141
5109
|
let rafId = 0;
|
|
@@ -5202,14 +5170,14 @@ var StickyMarketCards = ({
|
|
|
5202
5170
|
return () => {
|
|
5203
5171
|
window.removeEventListener("resize", syncHeights);
|
|
5204
5172
|
};
|
|
5205
|
-
}, [items.length
|
|
5173
|
+
}, [items.length]);
|
|
5206
5174
|
const n = items.length;
|
|
5207
5175
|
const maxStack = 4;
|
|
5208
5176
|
const baseIndex = Math.max(0, n - maxStack);
|
|
5209
5177
|
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5210
5178
|
"section",
|
|
5211
5179
|
{
|
|
5212
|
-
className: ["smc",
|
|
5180
|
+
className: ["smc", className].filter(Boolean).join(" "),
|
|
5213
5181
|
...props,
|
|
5214
5182
|
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__inner", children: [
|
|
5215
5183
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__header-wrap", children: [
|
|
@@ -5238,11 +5206,10 @@ var StickyMarketCards = ({
|
|
|
5238
5206
|
},
|
|
5239
5207
|
className: [
|
|
5240
5208
|
"smc__card-inner",
|
|
5241
|
-
`smc__card-inner--${theme}
|
|
5242
|
-
|
|
5243
|
-
].filter(Boolean).join(" "),
|
|
5209
|
+
`smc__card-inner--${theme}`
|
|
5210
|
+
].join(" "),
|
|
5244
5211
|
children: [
|
|
5245
|
-
|
|
5212
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-bg", children: [
|
|
5246
5213
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5247
5214
|
"img",
|
|
5248
5215
|
{
|
|
@@ -5261,37 +5228,11 @@ var StickyMarketCards = ({
|
|
|
5261
5228
|
].join(" ")
|
|
5262
5229
|
}
|
|
5263
5230
|
)
|
|
5264
|
-
] })
|
|
5265
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.
|
|
5266
|
-
"div",
|
|
5267
|
-
{
|
|
5268
|
-
|
|
5269
|
-
"smc__card-content",
|
|
5270
|
-
isLottie ? "smc__card-content--lottie" : null
|
|
5271
|
-
].filter(Boolean).join(" "),
|
|
5272
|
-
children: isLottie ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
5273
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5274
|
-
LottiePanel,
|
|
5275
|
-
{
|
|
5276
|
-
item,
|
|
5277
|
-
index: i,
|
|
5278
|
-
playing: Boolean(playing[i]),
|
|
5279
|
-
onToggle: () => setPlaying((prev) => ({
|
|
5280
|
-
...prev,
|
|
5281
|
-
[i]: !prev[i]
|
|
5282
|
-
}))
|
|
5283
|
-
}
|
|
5284
|
-
),
|
|
5285
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-text", children: [
|
|
5286
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { className: "smc__card-title", children: item.title }),
|
|
5287
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "smc__card-desc", children: item.description })
|
|
5288
|
-
] })
|
|
5289
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
5290
|
-
/* @__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 }) }),
|
|
5291
|
-
/* @__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 }) })
|
|
5292
|
-
] })
|
|
5293
|
-
}
|
|
5294
|
-
)
|
|
5231
|
+
] }),
|
|
5232
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "smc__card-content", children: [
|
|
5233
|
+
/* @__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 }) }),
|
|
5234
|
+
/* @__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 }) })
|
|
5235
|
+
] })
|
|
5295
5236
|
]
|
|
5296
5237
|
}
|
|
5297
5238
|
)
|
|
@@ -8701,7 +8642,7 @@ var OPTIONS_TYPES_PLACEHOLDER_ITEMS = [
|
|
|
8701
8642
|
platforms: [{ label: "Platform" }]
|
|
8702
8643
|
}
|
|
8703
8644
|
];
|
|
8704
|
-
function
|
|
8645
|
+
function safeHref(value) {
|
|
8705
8646
|
if (!value) return null;
|
|
8706
8647
|
if (value.startsWith("/") && !value.startsWith("//")) return value;
|
|
8707
8648
|
try {
|
|
@@ -8711,8 +8652,8 @@ function safeHref2(value) {
|
|
|
8711
8652
|
return null;
|
|
8712
8653
|
}
|
|
8713
8654
|
}
|
|
8714
|
-
function
|
|
8715
|
-
const href =
|
|
8655
|
+
function safeLottieSrc(value) {
|
|
8656
|
+
const href = safeHref(value);
|
|
8716
8657
|
if (!href) return null;
|
|
8717
8658
|
try {
|
|
8718
8659
|
const pathname = href.startsWith("/") ? href : new URL(href).pathname;
|
|
@@ -8744,7 +8685,7 @@ var iconPaths = {
|
|
|
8744
8685
|
]
|
|
8745
8686
|
};
|
|
8746
8687
|
function MetaIcon({ icon, iconUrl }) {
|
|
8747
|
-
const imageSrc =
|
|
8688
|
+
const imageSrc = safeHref(iconUrl);
|
|
8748
8689
|
if (imageSrc) {
|
|
8749
8690
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
8750
8691
|
"img",
|
|
@@ -8768,7 +8709,7 @@ function MetaIcon({ icon, iconUrl }) {
|
|
|
8768
8709
|
}
|
|
8769
8710
|
function MetaList({ items = [] }) {
|
|
8770
8711
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "ot__meta-list", children: items.map((item, index) => {
|
|
8771
|
-
const href =
|
|
8712
|
+
const href = safeHref(item.href);
|
|
8772
8713
|
const content = /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
|
|
8773
8714
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MetaIcon, { icon: item.icon, iconUrl: item.iconUrl }),
|
|
8774
8715
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: item.label })
|
|
@@ -8776,7 +8717,7 @@ function MetaList({ items = [] }) {
|
|
|
8776
8717
|
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}`);
|
|
8777
8718
|
}) });
|
|
8778
8719
|
}
|
|
8779
|
-
function
|
|
8720
|
+
function PlaybackGlyph({ playing }) {
|
|
8780
8721
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { className: "ot__control-icon", viewBox: "0 0 64 64", "aria-hidden": "true", children: [
|
|
8781
8722
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("circle", { className: "ot__control-disc", cx: "32", cy: "32", r: "32" }),
|
|
8782
8723
|
playing ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
|
|
@@ -8797,8 +8738,8 @@ function AnimationCard({
|
|
|
8797
8738
|
playing,
|
|
8798
8739
|
onToggle
|
|
8799
8740
|
}) {
|
|
8800
|
-
const src =
|
|
8801
|
-
const posterSrc =
|
|
8741
|
+
const src = safeLottieSrc(animation.src);
|
|
8742
|
+
const posterSrc = safeHref(animation.posterUrl);
|
|
8802
8743
|
const controlId = `ot-animation-${itemId}-${animation.id ?? animation.label}`.replace(/[^a-zA-Z0-9_-]/g, "-");
|
|
8803
8744
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "ot__animation-card", children: [
|
|
8804
8745
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { id: controlId, className: "ot__animation-media", "aria-hidden": "true", children: src ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
@@ -8830,7 +8771,7 @@ function AnimationCard({
|
|
|
8830
8771
|
"aria-pressed": playing,
|
|
8831
8772
|
"aria-label": `${playing ? "Pause" : "Play"} ${animation.label} animation`,
|
|
8832
8773
|
onClick: onToggle,
|
|
8833
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
8774
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(PlaybackGlyph, { playing })
|
|
8834
8775
|
}
|
|
8835
8776
|
) : null
|
|
8836
8777
|
] });
|
|
@@ -8959,7 +8900,7 @@ function TogglePanel({
|
|
|
8959
8900
|
onKeyDown: onSwitchKeyDown,
|
|
8960
8901
|
children: animations.map((animation, index) => {
|
|
8961
8902
|
const isActive = index === safeIndex;
|
|
8962
|
-
const iconUrl =
|
|
8903
|
+
const iconUrl = safeHref(animation.iconUrl);
|
|
8963
8904
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
8964
8905
|
"button",
|
|
8965
8906
|
{
|