@deriv-web-design/ui 0.0.12 → 0.0.14

package/dist/index.d.mts

@@ -279,6 +279,26 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
+interface FeatureCardSecondaryItem {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+interface FeatureCardsSecondaryProps {
+    sectionTitle: string;
+    sectionDescription?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    cards: FeatureCardSecondaryItem[];
+}
+
+declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+
 interface FooterLinkItem {
     /** Link label text */
     label: string;
@@ -387,7 +407,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 = "homepage" | "full-image" | "visuals" | "text-only";
+type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
 interface HeroButtonProps {
     /** Button label text */
     label: string;
@@ -399,10 +419,13 @@ interface HeroButtonProps {
 interface HeroProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant:
-     * - "homepage"   — dark bg, left-aligned text, right-side hero image, 100vh
-     * - "full-image" — full background image, center-aligned text, 100vh
-     * - "visuals"    — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
-     * - "text-only"  — same as visuals but without floating graphics
+     *
+     * - "split"    — dark bg, left-aligned text, right-side hero image, 100vh
+     * - "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 */
@@ -418,33 +441,44 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
     primaryButton?: HeroButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on Homepage and Full Image variants.
+     * Shown on Split, Centered and Showcase variants.
      */
     secondaryButton?: HeroButtonProps;
     /**
      * Background image URL.
-     * - "homepage"   — used as the full-bleed background behind the overlay
-     * - "full-image" — used as the full-bleed background behind the overlay
+     * - "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
      */
     backgroundImageSrc?: string;
     /**
-     * Right-side hero image for the Homepage variant.
+     * Right-side hero image for the Split variant.
      * Accepts a ReactNode (e.g. <img>) or an image URL string.
      */
     heroImage?: ReactNode | string;
     /**
-     * Left floating visual for the Visuals variant (desktop only).
+     * Left floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     leftVisual?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant (desktop only).
+     * Right floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     rightVisual?: ReactNode | string;
+    /**
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    productImage?: ReactNode | string;
+    /**
+     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    floatingImage?: ReactNode | string;
 }
 
-declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -597,6 +631,12 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
 declare const AVATAR_DATA: AvatarItem[];
 declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
+interface LanguageItem {
+    /** Language code, e.g. "en", "ar", "fr" */
+    code: string;
+    /** Display label, e.g. "English", "العربية", "Français" */
+    label: string;
+}
 interface NavDropdownItem {
     /** Link text */
     label: string;
@@ -667,11 +707,18 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaHref?: string;
     /** Language label rendered next to the globe icon, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked */
+    /** Called when the language button is clicked (used when `languageItems` is NOT provided) */
     onLanguageClick?: () => void;
+    /** Languages for the hover-triggered dropdown grid.
+     *  When provided, a dropdown is shown instead of calling `onLanguageClick`. */
+    languageItems?: LanguageItem[];
+    /** Highlights the active language in the dropdown (matched by `LanguageItem.code`) */
+    activeLanguageCode?: string;
+    /** Called when a language is picked from the dropdown */
+    onLanguageSelect?: (code: string) => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, languageItems, activeLanguageCode, onLanguageSelect, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */
@@ -698,7 +745,7 @@ interface LogoItem {
     name: string;
     url: string;
 }
-interface PaymentMethodsProps extends HTMLAttributes<HTMLElement> {
+interface LogoMarqueeProps extends HTMLAttributes<HTMLElement> {
     headline?: string;
     body?: string;
     disclaimer?: string;
@@ -717,6 +764,86 @@ declare const TEXT_CONTENT: {
     ctaLabel: string;
     ctaHref: string;
 };
-declare const PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
+declare const LogoMarquee: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: LogoMarqueeProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBadgePlatform = "googleplay" | "appstore" | "appgallery" | "windows" | "macos" | "linux" | "web";
+type DownloadBadgeColorScheme = "light" | "dark";
+interface DownloadBadgeProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Which platform badge to render */
+    platform: DownloadBadgePlatform;
+    /**
+     * Colour scheme — use "light" on light backgrounds, "dark" on dark backgrounds.
+     * @default "light"
+     */
+    colorScheme?: DownloadBadgeColorScheme;
+    /** Destination URL */
+    href?: string;
+}
+
+declare const DownloadBadge: ({ platform, colorScheme, href, className, ...props }: DownloadBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type StepsImagePosition = "left" | "right";
+interface StepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
+interface StepsProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Ordered list of steps */
+    steps: StepItem[];
+    /** Image source URL */
+    image?: string;
+    /** Accessible alt text for the image */
+    imageAlt?: string;
+    /**
+     * Which side the image sits on (default: "left").
+     * On mobile the image always stacks above the content.
+     */
+    imagePosition?: StepsImagePosition;
+}
+
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBannerStyle = "light" | "light-2" | "dark";
+interface DownloadBannerProps {
+    /**
+     * Visual style of the inner card.
+     * - "light"   → slate-100 outer section, white inner card
+     * - "light-2" → white outer section, slate-100 inner card (default)
+     * - "dark"    → white outer section, slate-1200 inner card
+     */
+    style?: DownloadBannerStyle;
+    /** QR code image URL. When provided the QR block is shown on desktop. */
+    qrCodeImage?: string;
+    /** Accessible alt text for the QR code image */
+    qrCodeAlt?: string;
+    /** First line of text beside the QR code (default: "Scan to download") */
+    qrTitle?: string;
+    /** Second line of text beside the QR code (default: "Android & iOS") */
+    qrSubtitle?: string;
+    /** Heading shown on mobile above the badge grid (default: "Available on") */
+    mobileTitle?: string;
+    showAppStore?: boolean;
+    showGooglePlay?: boolean;
+    showAppGallery?: boolean;
+    showWindows?: boolean;
+    showMacOS?: boolean;
+    showLinux?: boolean;
+    showWeb?: boolean;
+    appStoreHref?: string;
+    googlePlayHref?: string;
+    appGalleryHref?: string;
+    windowsHref?: string;
+    macOSHref?: string;
+    linuxHref?: string;
+    webHref?: string;
+    /** Optional small-print disclaimer shown below the QR text */
+    disclaimer?: string;
+}
+
+declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => 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, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, 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 };
+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, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, 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, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, 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 };

package/dist/index.d.ts

@@ -279,6 +279,26 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
+interface FeatureCardSecondaryItem {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+interface FeatureCardsSecondaryProps {
+    sectionTitle: string;
+    sectionDescription?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    cards: FeatureCardSecondaryItem[];
+}
+
+declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+
 interface FooterLinkItem {
     /** Link label text */
     label: string;
@@ -387,7 +407,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 = "homepage" | "full-image" | "visuals" | "text-only";
+type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
 interface HeroButtonProps {
     /** Button label text */
     label: string;
@@ -399,10 +419,13 @@ interface HeroButtonProps {
 interface HeroProps extends HTMLAttributes<HTMLElement> {
     /**
      * Layout variant:
-     * - "homepage"   — dark bg, left-aligned text, right-side hero image, 100vh
-     * - "full-image" — full background image, center-aligned text, 100vh
-     * - "visuals"    — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
-     * - "text-only"  — same as visuals but without floating graphics
+     *
+     * - "split"    — dark bg, left-aligned text, right-side hero image, 100vh
+     * - "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 */
@@ -418,33 +441,44 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
     primaryButton?: HeroButtonProps;
     /**
      * Secondary CTA button (white outline).
-     * Shown on Homepage and Full Image variants.
+     * Shown on Split, Centered and Showcase variants.
      */
     secondaryButton?: HeroButtonProps;
     /**
      * Background image URL.
-     * - "homepage"   — used as the full-bleed background behind the overlay
-     * - "full-image" — used as the full-bleed background behind the overlay
+     * - "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
      */
     backgroundImageSrc?: string;
     /**
-     * Right-side hero image for the Homepage variant.
+     * Right-side hero image for the Split variant.
      * Accepts a ReactNode (e.g. <img>) or an image URL string.
      */
     heroImage?: ReactNode | string;
     /**
-     * Left floating visual for the Visuals variant (desktop only).
+     * Left floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     leftVisual?: ReactNode | string;
     /**
-     * Right floating visual for the Visuals variant (desktop only).
+     * Right floating visual for the Visuals variant.
      * Accepts a ReactNode or image URL string.
      */
     rightVisual?: ReactNode | string;
+    /**
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    productImage?: ReactNode | string;
+    /**
+     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    floatingImage?: ReactNode | string;
 }
 
-declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
 
 interface StatItem {
     /** Numeric or short display value, e.g. "2.5M+" */
@@ -597,6 +631,12 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
 declare const AVATAR_DATA: AvatarItem[];
 declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
+interface LanguageItem {
+    /** Language code, e.g. "en", "ar", "fr" */
+    code: string;
+    /** Display label, e.g. "English", "العربية", "Français" */
+    label: string;
+}
 interface NavDropdownItem {
     /** Link text */
     label: string;
@@ -667,11 +707,18 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaHref?: string;
     /** Language label rendered next to the globe icon, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked */
+    /** Called when the language button is clicked (used when `languageItems` is NOT provided) */
     onLanguageClick?: () => void;
+    /** Languages for the hover-triggered dropdown grid.
+     *  When provided, a dropdown is shown instead of calling `onLanguageClick`. */
+    languageItems?: LanguageItem[];
+    /** Highlights the active language in the dropdown (matched by `LanguageItem.code`) */
+    activeLanguageCode?: string;
+    /** Called when a language is picked from the dropdown */
+    onLanguageSelect?: (code: string) => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, languageItems, activeLanguageCode, onLanguageSelect, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */
@@ -698,7 +745,7 @@ interface LogoItem {
     name: string;
     url: string;
 }
-interface PaymentMethodsProps extends HTMLAttributes<HTMLElement> {
+interface LogoMarqueeProps extends HTMLAttributes<HTMLElement> {
     headline?: string;
     body?: string;
     disclaimer?: string;
@@ -717,6 +764,86 @@ declare const TEXT_CONTENT: {
     ctaLabel: string;
     ctaHref: string;
 };
-declare const PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
+declare const LogoMarquee: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: LogoMarqueeProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBadgePlatform = "googleplay" | "appstore" | "appgallery" | "windows" | "macos" | "linux" | "web";
+type DownloadBadgeColorScheme = "light" | "dark";
+interface DownloadBadgeProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Which platform badge to render */
+    platform: DownloadBadgePlatform;
+    /**
+     * Colour scheme — use "light" on light backgrounds, "dark" on dark backgrounds.
+     * @default "light"
+     */
+    colorScheme?: DownloadBadgeColorScheme;
+    /** Destination URL */
+    href?: string;
+}
+
+declare const DownloadBadge: ({ platform, colorScheme, href, className, ...props }: DownloadBadgeProps) => react_jsx_runtime.JSX.Element;
+
+type StepsImagePosition = "left" | "right";
+interface StepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
+interface StepsProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Ordered list of steps */
+    steps: StepItem[];
+    /** Image source URL */
+    image?: string;
+    /** Accessible alt text for the image */
+    imageAlt?: string;
+    /**
+     * Which side the image sits on (default: "left").
+     * On mobile the image always stacks above the content.
+     */
+    imagePosition?: StepsImagePosition;
+}
+
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBannerStyle = "light" | "light-2" | "dark";
+interface DownloadBannerProps {
+    /**
+     * Visual style of the inner card.
+     * - "light"   → slate-100 outer section, white inner card
+     * - "light-2" → white outer section, slate-100 inner card (default)
+     * - "dark"    → white outer section, slate-1200 inner card
+     */
+    style?: DownloadBannerStyle;
+    /** QR code image URL. When provided the QR block is shown on desktop. */
+    qrCodeImage?: string;
+    /** Accessible alt text for the QR code image */
+    qrCodeAlt?: string;
+    /** First line of text beside the QR code (default: "Scan to download") */
+    qrTitle?: string;
+    /** Second line of text beside the QR code (default: "Android & iOS") */
+    qrSubtitle?: string;
+    /** Heading shown on mobile above the badge grid (default: "Available on") */
+    mobileTitle?: string;
+    showAppStore?: boolean;
+    showGooglePlay?: boolean;
+    showAppGallery?: boolean;
+    showWindows?: boolean;
+    showMacOS?: boolean;
+    showLinux?: boolean;
+    showWeb?: boolean;
+    appStoreHref?: string;
+    googlePlayHref?: string;
+    appGalleryHref?: string;
+    windowsHref?: string;
+    macOSHref?: string;
+    linuxHref?: string;
+    webHref?: string;
+    /** Optional small-print disclaimer shown below the QR text */
+    disclaimer?: string;
+}
+
+declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => 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, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, Link, type LinkColorScheme, type LinkProps, type LogoItem, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, 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 };
+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, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, 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, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, 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 };