@deriv-web-design/ui 0.0.17 → 0.0.21

package/dist/index.d.mts

@@ -257,6 +257,25 @@ interface PaginationProps {
 
 declare const Pagination: ({ currentPage, totalPages, onPageChange, className, }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
+interface TabItem {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Display label for the tab */
+    label: string;
+}
+interface TabsProps {
+    /** Array of tab items to display */
+    items: TabItem[];
+    /** The currently active tab ID */
+    activeId: string;
+    /** Callback fired when a tab is clicked */
+    onChange: (id: string) => void;
+    /** Optional CSS class name */
+    className?: string;
+}
+
+declare const Tabs: ({ items, activeId, onChange, className, ...props }: TabsProps) => react_jsx_runtime.JSX.Element;
+
 interface FeatureCardItem {
     title: string;
     description: string;
@@ -280,6 +299,14 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
+/** Shell style for a card in the Two Cards layout */
+type FeatureCardSecondaryTwoTone = "light" | "dark";
+/** Platform shortcut row (Two Cards variant) */
+interface FeatureCardSecondaryPlatformLink {
+    label: string;
+    iconSrc: string;
+    href?: string;
+}
 interface FeatureCardSecondaryItem {
     title: string;
     description: string;
@@ -288,8 +315,22 @@ interface FeatureCardSecondaryItem {
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
+    /** Large variants (two / one card): main CTA href */
+    linkHref?: string;
+    /** Two Cards variant: light or dark card shell */
+    colorScheme?: FeatureCardSecondaryTwoTone;
+    /** Large variants: platform links under the CTA */
+    platforms?: FeatureCardSecondaryPlatformLink[];
+    /** Large variants: label above platform row (default: "Available on") */
+    platformsHeading?: string;
+    /** Large variants: feature illustration */
+    image?: string;
+    imageAlt?: string;
 }
+type FeatureCardsSecondaryLayoutVariant = "default" | "twoCards" | "oneCard";
 interface FeatureCardsSecondaryProps {
+    /** Default: secondary icon cards grid. Two Cards / One Card: large feature blocks with optional platform links and image. */
+    variant?: FeatureCardsSecondaryLayoutVariant;
     sectionTitle: string;
     sectionDescription?: string;
     showLink?: boolean;
@@ -298,7 +339,22 @@ interface FeatureCardsSecondaryProps {
     cards: FeatureCardSecondaryItem[];
 }
 
-declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+declare const FeatureCardsSecondary: ({ variant, sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element | null;
+
+interface FeatureBulletsProps {
+    /** Title of the section */
+    title: string;
+    /** Array of bullet points to display */
+    bullets: string[];
+    /** URL for the image */
+    image: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Position of the image relative to the text on desktop */
+    imagePosition?: "left" | "right";
+}
+
+declare const FeatureBullets: ({ title, bullets, image, imageAlt, imagePosition, }: FeatureBulletsProps) => react_jsx_runtime.JSX.Element;
 
 interface FooterLinkItem {
     /** Link label text */
@@ -900,4 +956,120 @@ interface TextScrollProps {
 
 declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
+/** Visual colour theme for each card — matches the Figma palette. */
+type StickyMarketCardTheme = "light" | "coral" | "dark";
+interface StickyMarketCardItem {
+    /** Card heading */
+    title: string;
+    /** Body copy below the title */
+    description: string;
+    /**
+     * URL of the card's hero image.
+     * @default — placeholder used in stories when omitted
+     */
+    imageUrl?: string;
+    /**
+     * Background / text colour theme.
+     * light → slate-75 bg + dark text
+     * coral → coral-500 bg + white text
+     * dark  → slate-1200 bg + white text
+     * @default "dark"
+     */
+    theme?: StickyMarketCardTheme;
+}
+interface StickyMarketCardsProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading rendered as H2 */
+    sectionTitle: string;
+    /** Optional section description */
+    sectionDescription?: string;
+    /**
+     * 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;
+
+/** Column width variant */
+type TableColumnWidth = "main" | "normal" | "big";
+/** Single column definition */
+interface TableColumnDef {
+    /** Unique key matching the row data field */
+    key: string;
+    /**
+     * Header label text.
+     * Pass an array for multi-line headers (e.g. ["Contract", "size"]).
+     */
+    header: string | string[];
+    /** Tooltip shown on header hover */
+    tooltip?: {
+        heading: string;
+        description: string;
+    };
+    /**
+     * Column width variant:
+     *   main   → first/instrument column (wider, sticky, icon support)
+     *   normal → default column
+     *   big    → wide column (e.g. Trading hours)
+     */
+    width?: TableColumnWidth;
+}
+/**
+ * A single row of table data.
+ * All values are plain strings.
+ * To show an icon in the main column, add a `${key}_iconUrl` entry.
+ * Example: { instrument: "AUDCAD", instrument_iconUrl: "https://..." }
+ */
+interface TableRowData {
+    [key: string]: string;
+}
+interface TableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional section title rendered above the table */
+    sectionTitle?: string;
+    /** Column definitions (order matters) */
+    columns: TableColumnDef[];
+    /** Row data */
+    rows: TableRowData[];
+    /**
+     * Key of the main (instrument) column.
+     * Defaults to the first column with width "main", or the first column.
+     */
+    mainColumnKey?: string;
+    /** Rows displayed per page (default: 10) */
+    pageSize?: number;
+    /** Search input placeholder (default: "Search") */
+    searchPlaceholder?: string;
+    /** Optional info text shown next to pagination */
+    infoText?: string;
+}
+
+declare const Table: ({ sectionTitle, columns, rows, mainColumnKey, pageSize, searchPlaceholder, infoText, className, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
+
+interface LeaderItem {
+    /** Leader's full name */
+    name: string;
+    /** Leader's job title or role */
+    role: string;
+    /** URL to the leader's profile image */
+    imageUrl: string;
+    /** URL to the leader's LinkedIn profile */
+    linkedinUrl?: string;
+}
+interface LeadersProps {
+    /** Section title (e.g., "Our leaders") */
+    title?: string;
+    /** Array of leader data objects */
+    items: LeaderItem[];
+    /** Number of items to show initially before expanding (default: 8) */
+    initialVisibleCount?: number;
+    /** Text for the expand button (default: "View all") */
+    expandText?: string;
+    /** Text for the collapse button (default: "View less") */
+    collapseText?: string;
+    /** Optional CSS class name */
+    className?: string;
+}
+
+declare const Leaders: ({ title, items, initialVisibleCount, expandText, collapseText, className, ...props }: LeadersProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, Accordion, type AccordionProps, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, FeatureBullets, type FeatureBulletsProps, type FeatureCardItem, type FeatureCardSecondaryItem, type FeatureCardSecondaryPlatformLink, type FeatureCardSecondaryTwoTone, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryLayoutVariant, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, 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, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };

package/dist/index.d.ts

@@ -257,6 +257,25 @@ interface PaginationProps {
 
 declare const Pagination: ({ currentPage, totalPages, onPageChange, className, }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
+interface TabItem {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Display label for the tab */
+    label: string;
+}
+interface TabsProps {
+    /** Array of tab items to display */
+    items: TabItem[];
+    /** The currently active tab ID */
+    activeId: string;
+    /** Callback fired when a tab is clicked */
+    onChange: (id: string) => void;
+    /** Optional CSS class name */
+    className?: string;
+}
+
+declare const Tabs: ({ items, activeId, onChange, className, ...props }: TabsProps) => react_jsx_runtime.JSX.Element;
+
 interface FeatureCardItem {
     title: string;
     description: string;
@@ -280,6 +299,14 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
+/** Shell style for a card in the Two Cards layout */
+type FeatureCardSecondaryTwoTone = "light" | "dark";
+/** Platform shortcut row (Two Cards variant) */
+interface FeatureCardSecondaryPlatformLink {
+    label: string;
+    iconSrc: string;
+    href?: string;
+}
 interface FeatureCardSecondaryItem {
     title: string;
     description: string;
@@ -288,8 +315,22 @@ interface FeatureCardSecondaryItem {
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
+    /** Large variants (two / one card): main CTA href */
+    linkHref?: string;
+    /** Two Cards variant: light or dark card shell */
+    colorScheme?: FeatureCardSecondaryTwoTone;
+    /** Large variants: platform links under the CTA */
+    platforms?: FeatureCardSecondaryPlatformLink[];
+    /** Large variants: label above platform row (default: "Available on") */
+    platformsHeading?: string;
+    /** Large variants: feature illustration */
+    image?: string;
+    imageAlt?: string;
 }
+type FeatureCardsSecondaryLayoutVariant = "default" | "twoCards" | "oneCard";
 interface FeatureCardsSecondaryProps {
+    /** Default: secondary icon cards grid. Two Cards / One Card: large feature blocks with optional platform links and image. */
+    variant?: FeatureCardsSecondaryLayoutVariant;
     sectionTitle: string;
     sectionDescription?: string;
     showLink?: boolean;
@@ -298,7 +339,22 @@ interface FeatureCardsSecondaryProps {
     cards: FeatureCardSecondaryItem[];
 }
 
-declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+declare const FeatureCardsSecondary: ({ variant, sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element | null;
+
+interface FeatureBulletsProps {
+    /** Title of the section */
+    title: string;
+    /** Array of bullet points to display */
+    bullets: string[];
+    /** URL for the image */
+    image: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Position of the image relative to the text on desktop */
+    imagePosition?: "left" | "right";
+}
+
+declare const FeatureBullets: ({ title, bullets, image, imageAlt, imagePosition, }: FeatureBulletsProps) => react_jsx_runtime.JSX.Element;
 
 interface FooterLinkItem {
     /** Link label text */
@@ -900,4 +956,120 @@ interface TextScrollProps {
 
 declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
+/** Visual colour theme for each card — matches the Figma palette. */
+type StickyMarketCardTheme = "light" | "coral" | "dark";
+interface StickyMarketCardItem {
+    /** Card heading */
+    title: string;
+    /** Body copy below the title */
+    description: string;
+    /**
+     * URL of the card's hero image.
+     * @default — placeholder used in stories when omitted
+     */
+    imageUrl?: string;
+    /**
+     * Background / text colour theme.
+     * light → slate-75 bg + dark text
+     * coral → coral-500 bg + white text
+     * dark  → slate-1200 bg + white text
+     * @default "dark"
+     */
+    theme?: StickyMarketCardTheme;
+}
+interface StickyMarketCardsProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading rendered as H2 */
+    sectionTitle: string;
+    /** Optional section description */
+    sectionDescription?: string;
+    /**
+     * 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;
+
+/** Column width variant */
+type TableColumnWidth = "main" | "normal" | "big";
+/** Single column definition */
+interface TableColumnDef {
+    /** Unique key matching the row data field */
+    key: string;
+    /**
+     * Header label text.
+     * Pass an array for multi-line headers (e.g. ["Contract", "size"]).
+     */
+    header: string | string[];
+    /** Tooltip shown on header hover */
+    tooltip?: {
+        heading: string;
+        description: string;
+    };
+    /**
+     * Column width variant:
+     *   main   → first/instrument column (wider, sticky, icon support)
+     *   normal → default column
+     *   big    → wide column (e.g. Trading hours)
+     */
+    width?: TableColumnWidth;
+}
+/**
+ * A single row of table data.
+ * All values are plain strings.
+ * To show an icon in the main column, add a `${key}_iconUrl` entry.
+ * Example: { instrument: "AUDCAD", instrument_iconUrl: "https://..." }
+ */
+interface TableRowData {
+    [key: string]: string;
+}
+interface TableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional section title rendered above the table */
+    sectionTitle?: string;
+    /** Column definitions (order matters) */
+    columns: TableColumnDef[];
+    /** Row data */
+    rows: TableRowData[];
+    /**
+     * Key of the main (instrument) column.
+     * Defaults to the first column with width "main", or the first column.
+     */
+    mainColumnKey?: string;
+    /** Rows displayed per page (default: 10) */
+    pageSize?: number;
+    /** Search input placeholder (default: "Search") */
+    searchPlaceholder?: string;
+    /** Optional info text shown next to pagination */
+    infoText?: string;
+}
+
+declare const Table: ({ sectionTitle, columns, rows, mainColumnKey, pageSize, searchPlaceholder, infoText, className, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
+
+interface LeaderItem {
+    /** Leader's full name */
+    name: string;
+    /** Leader's job title or role */
+    role: string;
+    /** URL to the leader's profile image */
+    imageUrl: string;
+    /** URL to the leader's LinkedIn profile */
+    linkedinUrl?: string;
+}
+interface LeadersProps {
+    /** Section title (e.g., "Our leaders") */
+    title?: string;
+    /** Array of leader data objects */
+    items: LeaderItem[];
+    /** Number of items to show initially before expanding (default: 8) */
+    initialVisibleCount?: number;
+    /** Text for the expand button (default: "View all") */
+    expandText?: string;
+    /** Text for the collapse button (default: "View less") */
+    collapseText?: string;
+    /** Optional CSS class name */
+    className?: string;
+}
+
+declare const Leaders: ({ title, items, initialVisibleCount, expandText, collapseText, className, ...props }: LeadersProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, Accordion, type AccordionProps, 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, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, FeatureBullets, type FeatureBulletsProps, type FeatureCardItem, type FeatureCardSecondaryItem, type FeatureCardSecondaryPlatformLink, type FeatureCardSecondaryTwoTone, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryLayoutVariant, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, 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, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };