@deriv-web-design/ui 0.0.21 → 0.0.22

package/dist/index.d.mts

@@ -276,6 +276,33 @@ interface TabsProps {
 
 declare const Tabs: ({ items, activeId, onChange, className, ...props }: TabsProps) => react_jsx_runtime.JSX.Element;
 
+interface FaqItem {
+    /** The question shown in the accordion header */
+    question: string;
+    /** The answer revealed when expanded */
+    answer: string;
+}
+type FaqAccordionColorScheme = "white" | "slate";
+interface FaqAccordionProps {
+    /** Section headline */
+    title: string;
+    /** FAQ items */
+    items: FaqItem[];
+    /** Background color scheme (default: "white") */
+    colorScheme?: FaqAccordionColorScheme;
+}
+
+declare const FaqAccordion: ({ title, items, colorScheme, }: FaqAccordionProps) => react_jsx_runtime.JSX.Element;
+
+type FeatureCardsLayoutVariant = "default" | "twoCards" | "oneCard";
+/** Platform shortcut row (Two Cards / One Card variants) */
+interface FeatureCardPlatformLink {
+    label: string;
+    iconSrc: string;
+    href?: string;
+}
+/** Shell colour for a card in the Two Cards layout */
+type FeatureCardTwoTone = "light" | "dark";
 interface FeatureCardItem {
     title: string;
     description: string;
@@ -285,29 +312,31 @@ interface FeatureCardItem {
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
+    /** Two Cards / One Card variants: main CTA href */
+    linkHref?: string;
+    /** Two Cards variant: light or dark card shell */
+    twoTone?: FeatureCardTwoTone;
+    /** Two Cards / One Card variants: platform links under the CTA */
+    platforms?: FeatureCardPlatformLink[];
+    /** Two Cards / One Card variants: label above platform row (default: "Available on") */
+    platformsHeading?: string;
 }
 interface FeatureCardsProps {
+    /** Default: primary card grid. twoCards / oneCard: large feature blocks with optional platform links and image. */
+    variant?: FeatureCardsLayoutVariant;
     sectionTitle: string;
     sectionDescription?: string;
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
-    /** Controls the visual style of all cards in the grid */
+    /** Controls the visual style of all cards in the default grid */
     cardColorScheme?: CardPrimaryStyle;
     cards: FeatureCardItem[];
 }
 
-declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
+declare const FeatureCards: ({ variant, sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element | null;
 
-/** 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 {
+interface FeatureCardIconItem {
     title: string;
     description: string;
     icon?: ReactNode;
@@ -315,31 +344,17 @@ 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;
+interface FeatureCardsIconProps {
     sectionTitle: string;
     sectionDescription?: string;
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
-    cards: FeatureCardSecondaryItem[];
+    cards: FeatureCardIconItem[];
 }
 
-declare const FeatureCardsSecondary: ({ variant, sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element | null;
+declare const FeatureCardsIcon: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsIconProps) => react_jsx_runtime.JSX.Element;
 
 interface FeatureBulletsProps {
     /** Title of the section */
@@ -464,7 +479,7 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
 
 declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, investorsInPeopleSrc, investorsInPeopleAlt, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
-type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
+type HeroVariant = "split" | "centered" | "showcase";
 interface HeroButtonProps {
     /** Button label text */
     label: string;
@@ -481,8 +496,6 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
      * - "centered" — full background image, center-aligned text, 100vh
      * - "showcase" — dark bg + full-bleed bg image, center-aligned text, large product image
      *                below buttons, smaller floating image below that.
-     * - "visuals"  — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
-     * - "minimal"  — same as visuals but without floating graphics
      */
     variant: HeroVariant;
     /** Optional eyebrow / subtitle above the title */
@@ -498,14 +511,12 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
     primaryButton?: HeroButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on Split, Centered and Showcase variants.
+     * Shown on all variants.
      */
     secondaryButton?: HeroButtonProps;
     /**
      * Background image URL.
-     * - "split"    — used as the full-bleed background behind the overlay
-     * - "centered" — used as the full-bleed background behind the overlay
-     * - "showcase" — used as the full-bleed background behind the overlay
+     * Used as the full-bleed background behind the overlay on all three variants.
      */
     backgroundImageSrc?: string;
     /**
@@ -514,28 +525,66 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
      */
     heroImage?: ReactNode | string;
     /**
-     * Left floating visual for the Visuals variant.
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
      * Accepts a ReactNode or image URL string.
      */
-    leftVisual?: ReactNode | string;
+    productImage?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant.
+     * Smaller floating image shown below the productImage in the Showcase variant.
      * Accepts a ReactNode or image URL string.
      */
-    rightVisual?: ReactNode | string;
+    floatingImage?: ReactNode | string;
+}
+
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+
+type HeaderVariant = "visuals" | "minimal";
+interface HeaderButtonProps {
+    /** Button label text */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Link href — renders an anchor if provided */
+    href?: string;
+}
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
     /**
-     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Layout variant:
+     *
+     * - "visuals" — light grey bg + SVG grid, center-aligned text, floating visuals left & right,
+     *               parallax scroll effect on visuals, min-height 540px
+     * - "minimal" — same as visuals but without the floating graphics
+     */
+    variant: HeaderVariant;
+    /** Optional eyebrow / subtitle above the title */
+    subtitle?: string;
+    /** Main heading */
+    title: string;
+    /** Body copy below the title */
+    description?: string;
+    /**
+     * Primary CTA button (coral).
+     * Shown on both variants.
+     */
+    primaryButton?: HeaderButtonProps;
+    /**
+     * Secondary CTA button (white outline).
+     * Shown on both variants.
+     */
+    secondaryButton?: HeaderButtonProps;
+    /**
+     * Left floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
-    productImage?: ReactNode | string;
+    leftVisual?: ReactNode | string;
     /**
-     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Right floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
-    floatingImage?: ReactNode | string;
+    rightVisual?: ReactNode | string;
 }
 
-declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -1072,4 +1121,4 @@ interface LeadersProps {
 
 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 };
+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, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, 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

@@ -276,6 +276,33 @@ interface TabsProps {
 
 declare const Tabs: ({ items, activeId, onChange, className, ...props }: TabsProps) => react_jsx_runtime.JSX.Element;
 
+interface FaqItem {
+    /** The question shown in the accordion header */
+    question: string;
+    /** The answer revealed when expanded */
+    answer: string;
+}
+type FaqAccordionColorScheme = "white" | "slate";
+interface FaqAccordionProps {
+    /** Section headline */
+    title: string;
+    /** FAQ items */
+    items: FaqItem[];
+    /** Background color scheme (default: "white") */
+    colorScheme?: FaqAccordionColorScheme;
+}
+
+declare const FaqAccordion: ({ title, items, colorScheme, }: FaqAccordionProps) => react_jsx_runtime.JSX.Element;
+
+type FeatureCardsLayoutVariant = "default" | "twoCards" | "oneCard";
+/** Platform shortcut row (Two Cards / One Card variants) */
+interface FeatureCardPlatformLink {
+    label: string;
+    iconSrc: string;
+    href?: string;
+}
+/** Shell colour for a card in the Two Cards layout */
+type FeatureCardTwoTone = "light" | "dark";
 interface FeatureCardItem {
     title: string;
     description: string;
@@ -285,29 +312,31 @@ interface FeatureCardItem {
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
+    /** Two Cards / One Card variants: main CTA href */
+    linkHref?: string;
+    /** Two Cards variant: light or dark card shell */
+    twoTone?: FeatureCardTwoTone;
+    /** Two Cards / One Card variants: platform links under the CTA */
+    platforms?: FeatureCardPlatformLink[];
+    /** Two Cards / One Card variants: label above platform row (default: "Available on") */
+    platformsHeading?: string;
 }
 interface FeatureCardsProps {
+    /** Default: primary card grid. twoCards / oneCard: large feature blocks with optional platform links and image. */
+    variant?: FeatureCardsLayoutVariant;
     sectionTitle: string;
     sectionDescription?: string;
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
-    /** Controls the visual style of all cards in the grid */
+    /** Controls the visual style of all cards in the default grid */
     cardColorScheme?: CardPrimaryStyle;
     cards: FeatureCardItem[];
 }
 
-declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
+declare const FeatureCards: ({ variant, sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element | null;
 
-/** 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 {
+interface FeatureCardIconItem {
     title: string;
     description: string;
     icon?: ReactNode;
@@ -315,31 +344,17 @@ 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;
+interface FeatureCardsIconProps {
     sectionTitle: string;
     sectionDescription?: string;
     showLink?: boolean;
     linkText?: string;
     onLinkClick?: () => void;
-    cards: FeatureCardSecondaryItem[];
+    cards: FeatureCardIconItem[];
 }
 
-declare const FeatureCardsSecondary: ({ variant, sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element | null;
+declare const FeatureCardsIcon: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsIconProps) => react_jsx_runtime.JSX.Element;
 
 interface FeatureBulletsProps {
     /** Title of the section */
@@ -464,7 +479,7 @@ interface FooterProps extends HTMLAttributes<HTMLElement> {
 
 declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, investorsInPeopleSrc, investorsInPeopleAlt, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
-type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
+type HeroVariant = "split" | "centered" | "showcase";
 interface HeroButtonProps {
     /** Button label text */
     label: string;
@@ -481,8 +496,6 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
      * - "centered" — full background image, center-aligned text, 100vh
      * - "showcase" — dark bg + full-bleed bg image, center-aligned text, large product image
      *                below buttons, smaller floating image below that.
-     * - "visuals"  — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
-     * - "minimal"  — same as visuals but without floating graphics
      */
     variant: HeroVariant;
     /** Optional eyebrow / subtitle above the title */
@@ -498,14 +511,12 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
     primaryButton?: HeroButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on Split, Centered and Showcase variants.
+     * Shown on all variants.
      */
     secondaryButton?: HeroButtonProps;
     /**
      * Background image URL.
-     * - "split"    — used as the full-bleed background behind the overlay
-     * - "centered" — used as the full-bleed background behind the overlay
-     * - "showcase" — used as the full-bleed background behind the overlay
+     * Used as the full-bleed background behind the overlay on all three variants.
      */
     backgroundImageSrc?: string;
     /**
@@ -514,28 +525,66 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
      */
     heroImage?: ReactNode | string;
     /**
-     * Left floating visual for the Visuals variant.
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
      * Accepts a ReactNode or image URL string.
      */
-    leftVisual?: ReactNode | string;
+    productImage?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant.
+     * Smaller floating image shown below the productImage in the Showcase variant.
      * Accepts a ReactNode or image URL string.
      */
-    rightVisual?: ReactNode | string;
+    floatingImage?: ReactNode | string;
+}
+
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+
+type HeaderVariant = "visuals" | "minimal";
+interface HeaderButtonProps {
+    /** Button label text */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Link href — renders an anchor if provided */
+    href?: string;
+}
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
     /**
-     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Layout variant:
+     *
+     * - "visuals" — light grey bg + SVG grid, center-aligned text, floating visuals left & right,
+     *               parallax scroll effect on visuals, min-height 540px
+     * - "minimal" — same as visuals but without the floating graphics
+     */
+    variant: HeaderVariant;
+    /** Optional eyebrow / subtitle above the title */
+    subtitle?: string;
+    /** Main heading */
+    title: string;
+    /** Body copy below the title */
+    description?: string;
+    /**
+     * Primary CTA button (coral).
+     * Shown on both variants.
+     */
+    primaryButton?: HeaderButtonProps;
+    /**
+     * Secondary CTA button (white outline).
+     * Shown on both variants.
+     */
+    secondaryButton?: HeaderButtonProps;
+    /**
+     * Left floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
-    productImage?: ReactNode | string;
+    leftVisual?: ReactNode | string;
     /**
-     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Right floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
-    floatingImage?: ReactNode | string;
+    rightVisual?: ReactNode | string;
 }
 
-declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Header: ({ variant, subtitle, title, description, primaryButton, secondaryButton, leftVisual, rightVisual, className, ...props }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -1072,4 +1121,4 @@ interface LeadersProps {
 
 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 };
+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, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, 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 };