@tuwaio/nova-connect 1.0.0-fix-test-alpha.54.7152f59 → 1.0.0-fix-test-alpha.56.a984de3

package/dist/index.d.ts

@@ -1,26 +1,225 @@
 import { OrbitAdapter, WalletType } from '@tuwaio/orbit-core';
-import * as react from 'react';
-import react__default, { FC, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { TargetAndTransition, VariantLabels, LegacyAnimationControls, Transition, AnyResolvedKeyframe } from 'framer-motion';
+import * as React$1 from 'react';
+import React__default, { ComponentType, ReactNode, ComponentPropsWithoutRef, FC } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as Select from '@radix-ui/react-select';
 import { TransactionPool, Transaction, TxAdapter } from '@tuwaio/pulsar-core';
 import { ISatelliteConnectStore } from '@tuwaio/satellite-core';
 import { StoreApi } from 'zustand/index';
 import { Connector as Connector$1 } from '@tuwaio/satellite-react';
-import * as Select from '@radix-ui/react-select';
 
-interface ChainData {
+/**
+ * @file Highly customizable chain list renderer with comprehensive styling and behavior control.
+ * @module ChainListRenderer
+ */
+
+/**
+ * Chain data structure returned by getChainData function
+ */
+interface ChainData$1 {
     formattedChainId: string | number;
     chain: string | number;
 }
+/**
+ * Props for custom chain icon component
+ */
+interface CustomChainIconProps {
+    chainId: string | number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    'aria-hidden'?: boolean;
+}
+/**
+ * Props for custom chain content component
+ */
+interface CustomChainContentProps {
+    chainId: string | number;
+    isActive: boolean;
+    icon: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Props for custom active indicator component
+ */
+interface CustomActiveIndicatorProps {
+    isActive: boolean;
+    label: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * Animation configuration for container
+ */
+interface ContainerAnimationConfig {
+    initial?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    animate?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    exit?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    transition?: Transition<AnyResolvedKeyframe>;
+}
+/**
+ * Animation configuration for items
+ */
+interface ItemAnimationConfig {
+    initial?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    animate?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    transition?: Transition<AnyResolvedKeyframe>;
+}
+/**
+ * Comprehensive customization options for ChainListRenderer
+ */
+interface ChainListRendererCustomization {
+    /** Custom components */
+    components?: {
+        /** Custom chain icon component */
+        ChainIcon?: ComponentType<CustomChainIconProps>;
+        /** Custom chain content layout component */
+        ChainContent?: ComponentType<CustomChainContentProps>;
+        /** Custom active indicator component */
+        ActiveIndicator?: ComponentType<CustomActiveIndicatorProps>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Container classes */
+        container?: (params: {
+            isMobile: boolean;
+            itemCount: number;
+        }) => string;
+        /** Item classes */
+        item?: (params: {
+            isActive: boolean;
+            isMobile: boolean;
+            chainId: string | number;
+        }) => string;
+        /** Content wrapper classes */
+        content?: (params: {
+            isActive: boolean;
+            isMobile: boolean;
+        }) => string;
+        /** Icon classes */
+        icon?: (params: {
+            isActive: boolean;
+            chainId: string | number;
+        }) => string;
+        /** Chain name classes */
+        chainName?: (params: {
+            isActive: boolean;
+            isMobile: boolean;
+        }) => string;
+        /** Active indicator classes */
+        activeIndicator?: (params: {
+            isMobile: boolean;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Container styles */
+        container?: (params: {
+            isMobile: boolean;
+            itemCount: number;
+        }) => React__default.CSSProperties;
+        /** Item styles */
+        item?: (params: {
+            isActive: boolean;
+            isMobile: boolean;
+            chainId: string | number;
+        }) => React__default.CSSProperties;
+        /** Content wrapper styles */
+        content?: (params: {
+            isActive: boolean;
+            isMobile: boolean;
+        }) => React__default.CSSProperties;
+        /** Icon styles */
+        icon?: (params: {
+            isActive: boolean;
+            chainId: string | number;
+        }) => React__default.CSSProperties;
+        /** Chain name styles */
+        chainName?: (params: {
+            isActive: boolean;
+            isMobile: boolean;
+        }) => React__default.CSSProperties;
+        /** Active indicator styles */
+        activeIndicator?: (params: {
+            isMobile: boolean;
+        }) => React__default.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Custom click handler wrapper */
+        onClick?: (originalHandler: () => void, context: {
+            chainId: string | number;
+            chainName: string;
+            isActive: boolean;
+        }) => void;
+        /** Custom keydown handler wrapper */
+        onKeyDown?: (originalHandler: (event: React__default.KeyboardEvent) => void, event: React__default.KeyboardEvent, context: {
+            chainId: string | number;
+            chainName: string;
+            isActive: boolean;
+        }) => void;
+        /** Chain selection handler wrapper */
+        onSelect?: (originalHandler: (chainId: string) => void, chainId: string, context: {
+            chainName: string;
+            isActive: boolean;
+        }) => void;
+    };
+    /** Animation configuration */
+    animations?: {
+        /** Container animation */
+        container?: ContainerAnimationConfig;
+        /** Item animation */
+        item?: ItemAnimationConfig;
+    };
+    /** Behavior configuration */
+    behavior?: {
+        /** Auto-focus first item */
+        autoFocus?: boolean;
+        /** Enable animation on mount */
+        animateOnMount?: boolean;
+        /** Show loading states */
+        showLoading?: boolean;
+        /** Custom loading message */
+        loadingMessage?: string;
+    };
+}
+/**
+ * Props for the ChainListRenderer component
+ */
 interface ChainListRendererProps {
+    /** List of chain identifiers to render */
     chainsList: (string | number)[];
+    /** Currently selected chain value */
     selectValue: string;
+    /** Handler for chain selection changes */
     handleValueChange: (newChainId: string) => void;
-    getChainData: (chain: string | number) => ChainData;
+    /** Function to get formatted chain data */
+    getChainData: (chain: string | number) => ChainData$1;
+    /** Handler called when list should close */
     onClose: () => void;
+    /** Whether this is being rendered on mobile */
     isMobile?: boolean;
+    /** Custom CSS classes for container (added to defaults) */
+    className?: string;
+    /** Custom CSS classes for individual items (added to defaults) */
+    itemClassName?: string;
+    /** Custom inline styles for container */
+    style?: React__default.CSSProperties;
+    /** Custom inline styles for individual items */
+    itemStyle?: React__default.CSSProperties;
+    /** Comprehensive customization options */
+    customization?: ChainListRendererCustomization;
+    /** ARIA label for the list container */
+    'aria-label'?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: string | null;
 }
-declare const ChainListRenderer: react__default.FC<ChainListRendererProps>;
+/**
+ * Highly customizable chain list renderer with comprehensive styling and behavior control.
+ */
+declare const ChainListRenderer: React__default.FC<ChainListRendererProps>;
 
 /**
  * @description
@@ -212,69 +411,788 @@ type ConnectButtonProps = InitialChains & Pick<NovaConnectProviderProps, 'store'
 
 declare function ConnectButton({ store, labels, ...props }: Pick<NovaConnectProviderProps, 'labels'> & ConnectButtonProps): react_jsx_runtime.JSX.Element;
 
+type CustomIconProps$2 = {
+    disabled: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-hidden'?: boolean;
+};
+type CustomContentProps$1 = {
+    icon: ReactNode;
+    disabled: boolean;
+    ariaLabel?: string;
+};
+/**
+ * Customization options for ToBottomButton component
+ */
+type ToBottomButtonCustomization = {
+    /** Override button element props */
+    buttonProps?: Partial<ComponentPropsWithoutRef<'button'>>;
+    /** Custom components */
+    components?: {
+        /** Custom icon component */
+        Icon?: ComponentType<CustomIconProps$2>;
+        /** Custom button content component (wraps the icon) */
+        Content?: ComponentType<CustomContentProps$1>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Function to generate button classes */
+        button?: (params: {
+            disabled: boolean;
+            hasOnClick: boolean;
+        }) => string;
+        /** Function to generate icon classes */
+        icon?: (params: {
+            disabled: boolean;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Function to generate button styles */
+        button?: (params: {
+            disabled: boolean;
+            hasOnClick: boolean;
+        }) => React.CSSProperties;
+        /** Function to generate icon styles */
+        icon?: (params: {
+            disabled: boolean;
+        }) => React.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Custom click handler wrapper */
+        onClick?: (originalHandler: (event: React.MouseEvent<HTMLButtonElement>) => void, event: React.MouseEvent<HTMLButtonElement>) => void;
+        /** Custom keydown handler wrapper */
+        onKeyDown?: (originalHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void, event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    };
+};
+interface ToBottomButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'type' | 'onClick' | 'onKeyDown'> {
+    /** Custom CSS classes for the button */
+    className?: string;
+    /** Custom aria-label for the button */
+    'aria-label'?: string;
+    /** Callback fired when button is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Customization options */
+    customization?: ToBottomButtonCustomization;
+}
+/**
+ * A highly customizable scroll-to-bottom button component with extensive styling options and accessibility features.
+ * Provides comprehensive customization for appearance, behavior, and event handling while maintaining keyboard navigation support.
+ */
+declare const ToBottomButton: React$1.ForwardRefExoticComponent<ToBottomButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type CustomIconProps$1 = {
+    disabled: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-hidden'?: boolean;
+};
+type CustomContentProps = {
+    icon: ReactNode;
+    disabled: boolean;
+    ariaLabel?: string;
+};
+/**
+ * Customization options for ToTopButton component
+ */
+type ToTopButtonCustomization = {
+    /** Override button element props */
+    buttonProps?: Partial<ComponentPropsWithoutRef<'button'>>;
+    /** Custom components */
+    components?: {
+        /** Custom icon component */
+        Icon?: ComponentType<CustomIconProps$1>;
+        /** Custom button content component (wraps the icon) */
+        Content?: ComponentType<CustomContentProps>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Function to generate button classes */
+        button?: (params: {
+            disabled: boolean;
+            hasOnClick: boolean;
+        }) => string;
+        /** Function to generate icon classes */
+        icon?: (params: {
+            disabled: boolean;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Function to generate button styles */
+        button?: (params: {
+            disabled: boolean;
+            hasOnClick: boolean;
+        }) => React.CSSProperties;
+        /** Function to generate icon styles */
+        icon?: (params: {
+            disabled: boolean;
+        }) => React.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Custom click handler wrapper */
+        onClick?: (originalHandler: (event: React.MouseEvent<HTMLButtonElement>) => void, event: React.MouseEvent<HTMLButtonElement>) => void;
+        /** Custom keydown handler wrapper */
+        onKeyDown?: (originalHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void, event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    };
+};
+interface ToTopButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'type' | 'onClick' | 'onKeyDown'> {
+    /** Custom CSS classes for the button */
+    className?: string;
+    /** Custom aria-label for the button */
+    'aria-label'?: string;
+    /** Callback fired when button is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Customization options */
+    customization?: ToTopButtonCustomization;
+}
+/**
+ * A highly customizable scroll-to-top button component with extensive styling options and accessibility features.
+ * Provides comprehensive customization for appearance, behavior, and event handling while maintaining keyboard navigation support.
+ */
+declare const ToTopButton: React$1.ForwardRefExoticComponent<ToTopButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
 /**
- * ChainSelector - Main component for blockchain network selection
+ * Props for the SelectContentAnimated component
+ */
+interface SelectContentAnimatedProps extends ComponentPropsWithoutRef<typeof Select.Content> {
+    /** Custom CSS classes to apply to the select content container (added to defaults) */
+    className?: string;
+    /** Custom CSS classes to apply to the animated inner content (added to defaults) */
+    contentClassName?: string;
+    /** Custom CSS classes to apply to the viewport (added to defaults) */
+    viewportClassName?: string;
+    /** ARIA label for the select content */
+    'aria-label'?: string;
+    /** Whether the select content should have reduced motion for accessibility */
+    reduceMotion?: boolean;
+    /** Maximum height for the content in pixels */
+    maxHeight?: number;
+    /** Custom animation duration in seconds */
+    animationDuration?: number;
+    /** Whether to show scroll buttons */
+    showScrollButtons?: boolean;
+    /** Custom props for the ToTopButton */
+    topButtonProps?: Omit<ComponentPropsWithoutRef<typeof ToTopButton>, 'ref'>;
+    /** Custom props for the ToBottomButton */
+    bottomButtonProps?: Omit<ComponentPropsWithoutRef<typeof ToBottomButton>, 'ref'>;
+    /** Customization options for ToTopButton */
+    topButtonCustomization?: ToTopButtonCustomization;
+    /** Customization options for ToBottomButton */
+    bottomButtonCustomization?: ToBottomButtonCustomization;
+    /** Custom inline styles for select content container */
+    style?: React.CSSProperties;
+    /** Custom inline styles for animated inner content */
+    contentStyle?: React.CSSProperties;
+    /** Custom inline styles for viewport */
+    viewportStyle?: React.CSSProperties;
+}
+/**
+ * Animated select content component with smooth enter/exit animations.
  *
- * This component provides a comprehensive interface for users to select between
- * different blockchain networks. It automatically detects available chains from
- * wallet configuration and renders an appropriate selector interface.
+ * This component provides animated dropdown content for select components
+ * with accessibility support and extensive customization capabilities.
  *
- * Key features:
- * - Automatic chain detection from wallet type and configuration
- * - Responsive design with separate mobile/desktop interfaces
- * - Asynchronous chain loading with fallback to synchronous operation
- * - Single chain optimization (no selector needed for one chain)
- * - Full accessibility support with screen reader compatibility
- * - Integration with wallet switching functionality
- * - Error handling and loading states
- *
- * Architecture:
- * - Uses dynamic imports for better performance
- * - Supports both sync and async chain resolution
- * - Provides fallback behavior when adapters fail
- * - Integrates with existing store and state management
- *
- * Visual behavior:
- * - Desktop: Dropdown select with animated content
- * - Mobile: Modal dialog with scrollable list
- * - Single chain: Simple display with icon and name
- * - Multiple chains: Full selector with network switching
+ * Features:
+ * - Smooth enter/exit animations with Framer Motion
+ * - Accessibility-first design with ARIA support
+ * - Fully customizable scroll buttons with ToTopButton/ToBottomButton
+ * - Reduced motion support for accessibility
+ * - Customizable max height and animation duration
+ * - Full control over styling via className props (additive, not replacement)
+ * - Separate styling for container, content, and viewport
+ * - Custom button props and customization options
  *
- * @param appChains - Configuration for supported blockchain networks
- * @param solanaRPCUrls - RPC URLs configuration for Solana network
- * @param store - State management store for wallet operations
- * @returns JSX element representing the chain selector or null if no wallet
+ * @example Basic usage
+ * ```tsx
+ * <Select.Root>
+ *   <Select.Trigger>Select an option</Select.Trigger>
+ *   <SelectContentAnimated>
+ *     <Select.Item value="option1">Option 1</Select.Item>
+ *     <Select.Item value="option2">Option 2</Select.Item>
+ *   </SelectContentAnimated>
+ * </Select.Root>
+ * ```
  *
- * @example
+ * @example With full customization
  * ```tsx
- * <ChainSelector
- *   appChains={[
- *     { id: 1, name: 'Ethereum' },
- *     { id: 137, name: 'Polygon' }
- *   ]}
- *   solanaRPCUrls={{
- *     'mainnet-beta': 'https://api.mainnet-beta.solana.com'
+ * <SelectContentAnimated
+ *   className="novacon:shadow-2xl novacon:border-2"
+ *   contentClassName="novacon:p-4 novacon:bg-gradient-to-b"
+ *   viewportClassName="novacon:scrollbar-thin"
+ *   maxHeight={400}
+ *   animationDuration={0.3}
+ *   reduceMotion={false}
+ *   showScrollButtons={true}
+ *   topButtonProps={{
+ *     className: "novacon:bg-blue-500",
+ *     onClick: () => console.log("Top button clicked"),
  *   }}
- *   store={walletStore}
- * />
+ *   topButtonCustomization={{
+ *     classNames: {
+ *       button: () => "novacon:bg-red-500 novacon:hover:bg-red-600",
+ *     },
+ *   }}
+ *   bottomButtonCustomization={{
+ *     components: {
+ *       Icon: ({ className }) => <div className={className}>⬇️</div>,
+ *     },
+ *   }}
+ * >
+ *   <Select.Item value="item1">Item 1</Select.Item>
+ * </SelectContentAnimated>
  * ```
- *
- * @public
- * @since 1.0.0
  */
-declare function ChainSelector({ appChains, solanaRPCUrls, store }: InitialChains & Pick<ConnectButtonProps, 'store'>): react_jsx_runtime.JSX.Element | null;
+declare const SelectContentAnimated: React$1.ForwardRefExoticComponent<SelectContentAnimatedProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * @file Highly customizable scrollable chain list with comprehensive styling and behavior control.
+ * @module ScrollableChainList
+ */
 
-interface ChainListProps {
+/**
+ * Chain data structure returned by getChainData function
+ */
+interface ChainData {
+    formattedChainId: string | number;
+    chain: string | number;
+}
+/**
+ * Scroll button state context
+ */
+interface ScrollButtonContext {
+    showTopButton: boolean;
+    showBottomButton: boolean;
+    isScrolling: boolean;
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+/**
+ * Props for custom scroll container component
+ */
+interface CustomScrollContainerProps {
+    children: ReactNode;
+    ref: React__default.RefObject<HTMLDivElement | null>;
+    onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
+    className?: string;
+    style?: React__default.CSSProperties;
+    role: string;
+    'aria-label': string;
+    tabIndex: number;
+}
+/**
+ * Props for custom wrapper component
+ */
+interface CustomWrapperProps {
+    children: ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    role: string;
+    'aria-label': string;
+}
+/**
+ * Props for custom button animations wrapper
+ */
+interface CustomButtonAnimationWrapperProps {
+    children: ReactNode;
+    isVisible: boolean;
+    position: 'top' | 'bottom';
+    animationKey: string;
+}
+/**
+ * Animation configuration for scroll buttons
+ */
+interface ScrollButtonAnimationConfig {
+    initial?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    animate?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    exit?: TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined;
+    transition?: Transition<AnyResolvedKeyframe>;
+}
+/**
+ * Comprehensive customization options for ScrollableChainList
+ */
+interface ScrollableChainListCustomization {
+    /** Custom components */
+    components?: {
+        /** Custom scroll container component */
+        ScrollContainer?: ComponentType<CustomScrollContainerProps>;
+        /** Custom wrapper component */
+        Wrapper?: ComponentType<CustomWrapperProps>;
+        /** Custom button animation wrapper */
+        ButtonAnimationWrapper?: ComponentType<CustomButtonAnimationWrapperProps>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Wrapper classes */
+        wrapper?: (params: {
+            itemCount: number;
+            hasScrollableContent: boolean;
+        }) => string;
+        /** Scroll container classes */
+        container?: (params: {
+            itemCount: number;
+            hasScrollableContent: boolean;
+            showTopButton: boolean;
+            showBottomButton: boolean;
+        }) => string;
+        /** Button animation wrapper classes */
+        buttonWrapper?: (params: {
+            position: 'top' | 'bottom';
+            isVisible: boolean;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Wrapper styles */
+        wrapper?: (params: {
+            itemCount: number;
+            hasScrollableContent: boolean;
+        }) => React__default.CSSProperties;
+        /** Scroll container styles */
+        container?: (params: {
+            itemCount: number;
+            hasScrollableContent: boolean;
+            showTopButton: boolean;
+            showBottomButton: boolean;
+        }) => React__default.CSSProperties;
+        /** Button animation wrapper styles */
+        buttonWrapper?: (params: {
+            position: 'top' | 'bottom';
+            isVisible: boolean;
+        }) => React__default.CSSProperties;
+        /** Top button styles */
+        topButton?: (params: {
+            isVisible: boolean;
+            context: ScrollButtonContext;
+        }) => React__default.CSSProperties;
+        /** Bottom button styles */
+        bottomButton?: (params: {
+            isVisible: boolean;
+            context: ScrollButtonContext;
+        }) => React__default.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Custom scroll handler wrapper */
+        onScroll?: (originalHandler: () => void, event: Event, context: ScrollButtonContext) => void;
+        /** Custom key handler wrapper for container */
+        onKeyDown?: (originalHandler: (event: React__default.KeyboardEvent<HTMLDivElement>) => void, event: React__default.KeyboardEvent<HTMLDivElement>, context: {
+            scrollContainer: HTMLDivElement | null;
+        }) => void;
+        /** Custom top button click handler wrapper */
+        onTopButtonClick?: (originalHandler: () => void, context: ScrollButtonContext) => void;
+        /** Custom bottom button click handler wrapper */
+        onBottomButtonClick?: (originalHandler: () => void, context: ScrollButtonContext) => void;
+    };
+    /** Animation configuration */
+    animations?: {
+        /** Button animation */
+        scrollButtons?: ScrollButtonAnimationConfig;
+    };
+    /** Scroll behavior configuration */
+    scrollBehavior?: {
+        /** Scroll behavior type */
+        behavior?: ScrollBehavior;
+        /** Page scroll percentage (0-1) */
+        pageScrollPercentage?: number;
+        /** Scroll update throttle in ms */
+        updateThrottle?: number;
+        /** Enable auto-scroll to active item */
+        autoScrollToActive?: boolean;
+    };
+    /** Button customization */
+    buttons?: {
+        /** Top button customization */
+        topButton?: ToTopButtonCustomization;
+        /** Bottom button customization */
+        bottomButton?: ToBottomButtonCustomization;
+        /** Hide buttons when content fits */
+        hideWhenContentFits?: boolean;
+        /** Custom button positioning */
+        positioning?: {
+            /** Top button position offset */
+            topOffset?: string | number;
+            /** Bottom button position offset */
+            bottomOffset?: string | number;
+            /** Button z-index */
+            zIndex?: number;
+        };
+    };
+    /** Chain list renderer customization */
+    chainListRenderer?: ChainListRendererCustomization;
+}
+/**
+ * Props for the ScrollableChainList component
+ */
+interface ScrollableChainListProps {
+    /** List of chain identifiers to render */
     chainsList: (string | number)[];
+    /** Currently selected chain value */
     selectValue: string;
+    /** Handler for chain selection changes */
     handleValueChange: (newChainId: string) => void;
-    getChainData: (chain: string | number) => {
-        formattedChainId: string | number;
-        chain: string | number;
-    };
+    /** Function to get formatted chain data */
+    getChainData: (chain: string | number) => ChainData;
+    /** Handler called when list should close */
+    onClose: () => void;
+    /** Custom inline styles for wrapper */
+    style?: React__default.CSSProperties;
+    /** Custom inline styles for scroll container */
+    containerStyle?: React__default.CSSProperties;
+    /** Comprehensive customization options */
+    customization?: ScrollableChainListCustomization;
+    /** ARIA label for the wrapper */
+    'aria-label'?: string;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Error state */
+    error?: string | null;
+}
+/**
+ * Highly customizable scrollable chain list with comprehensive styling and behavior control.
+ */
+declare const ScrollableChainList: React__default.FC<ScrollableChainListProps>;
+
+/**
+ * Context for the chain selection trigger button.
+ */
+type ChainTriggerButtonContext = {
+    /** The currently formatted chain ID */
+    currentFormattedChainId: string | number;
+    /** Value for the Select component */
+    selectValue: string;
+    /** Whether the chain list is open */
+    isChainsListOpen: boolean;
+    /** Whether the device is mobile */
+    isMobile: boolean;
+    /** The name of the chain */
+    chainName: string;
+};
+/**
+ * Props for a custom trigger icon component.
+ */
+type CustomTriggerIconProps = {
+    /** Chain ID */
+    chainId: string | number;
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** Whether hidden from screen readers */
+    'aria-hidden'?: boolean;
+};
+/**
+ * Props for a custom trigger content component.
+ */
+type CustomTriggerContentProps = {
+    /** Chain icon */
+    icon: ReactNode;
+    /** Chain name */
+    chainName: string;
+    /** Whether the device is mobile */
+    isMobile: boolean;
+    /** Whether the list is open */
+    isOpen: boolean;
+    /** The currently formatted chain ID */
+    currentFormattedChainId: string | number;
+};
+/**
+ * Props for a custom trigger arrow component.
+ */
+type CustomTriggerArrowProps = {
+    /** Whether the list is open */
+    isOpen: boolean;
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** Whether hidden from screen readers */
+    'aria-hidden'?: boolean;
+};
+/**
+ * Props for a custom loading state display.
+ */
+type CustomLoadingStateProps = {
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** ARIA label */
+    'aria-label': string;
+};
+/**
+ * Props for a custom display for a single chain (when no selector is needed).
+ */
+type CustomSingleChainDisplayProps = {
+    /** Chain ID */
+    chainId: string | number;
+    /** Chain name */
+    chainName: string;
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** ARIA label */
+    'aria-label': string;
+};
+/**
+ * Props for a custom desktop selector wrapper.
+ */
+type CustomDesktopSelectorProps = {
+    /** Child elements */
+    children: ReactNode;
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** ARIA label */
+    'aria-label': string;
+};
+/**
+ * Props for a custom mobile selector wrapper.
+ */
+type CustomMobileSelectorProps = {
+    /** Child elements */
+    children: ReactNode;
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+    /** ARIA label */
+    'aria-label': string;
+};
+/**
+ * Props for a custom dialog header component.
+ */
+type CustomDialogHeaderProps = {
+    /** Title text */
+    title: string;
+    /** Close handler */
     onClose: () => void;
+    /** CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+};
+/**
+ * Animation easing parameters for framer-motion.
+ */
+type AnimationEasing = [number, number, number, number] | string;
+/**
+ * Customization options for the ChainTriggerButton.
+ */
+type ChainTriggerButtonCustomization = {
+    /** Overrides for the button/trigger props */
+    buttonProps?: Partial<ComponentPropsWithoutRef<'button'>>;
+    /** Overrides for the Select.Trigger props (desktop only) */
+    selectTriggerProps?: Partial<ComponentPropsWithoutRef<typeof Select.Trigger>>;
+    /** Custom component overrides */
+    components?: {
+        /** Custom chain icon component */
+        Icon?: ComponentType<CustomTriggerIconProps>;
+        /** Custom trigger content wrapper */
+        Content?: ComponentType<CustomTriggerContentProps>;
+        /** Custom arrow/chevron component */
+        Arrow?: ComponentType<CustomTriggerArrowProps>;
+    };
+    /** Custom CSS class generators */
+    classNames?: {
+        /** Function to generate wrapper classes */
+        wrapper?: (params: {
+            isMobile: boolean;
+            isOpen: boolean;
+        }) => string;
+        /** Function to generate button/trigger classes */
+        button?: (params: {
+            isMobile: boolean;
+            isOpen: boolean;
+            hasMultipleChains: boolean;
+        }) => string;
+        /** Function to generate inner content classes */
+        innerContent?: (params: {
+            isMobile: boolean;
+            isOpen: boolean;
+        }) => string;
+        /** Function to generate icon wrapper classes */
+        iconWrapper?: (params: {
+            isMobile: boolean;
+        }) => string;
+        /** Function to generate chain name classes */
+        chainName?: (params: {
+            isMobile: boolean;
+            isVisible: boolean;
+        }) => string;
+        /** Function to generate arrow wrapper classes */
+        arrowWrapper?: (params: {
+            isMobile: boolean;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Function to generate wrapper styles */
+        wrapper?: (params: {
+            isMobile: boolean;
+            isOpen: boolean;
+        }) => React__default.CSSProperties;
+        /** Function to generate button/trigger styles */
+        button?: (params: {
+            isMobile: boolean;
+            isOpen: boolean;
+            hasMultipleChains: boolean;
+        }) => React__default.CSSProperties;
+        /** Function to generate inner content styles */
+        innerContent?: (params: {
+            isMobile: boolean;
+            isOpen: boolean;
+        }) => React__default.CSSProperties;
+        /** Function to generate icon wrapper styles */
+        iconWrapper?: (params: {
+            isMobile: boolean;
+        }) => React__default.CSSProperties;
+        /** Function to generate chain name styles */
+        chainName?: (params: {
+            isMobile: boolean;
+            isVisible: boolean;
+        }) => React__default.CSSProperties;
+        /** Function to generate arrow wrapper styles */
+        arrowWrapper?: (params: {
+            isMobile: boolean;
+        }) => React__default.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Wrapper for the click handler */
+        onClick?: (originalHandler: () => void, event: React__default.MouseEvent<HTMLButtonElement>, context: ChainTriggerButtonContext) => void;
+        /** Wrapper for the key down handler */
+        onKeyDown?: (originalHandler: (event: React__default.KeyboardEvent) => void, event: React__default.KeyboardEvent, context: ChainTriggerButtonContext) => void;
+    };
+    /** Animation settings */
+    animations?: {
+        /** Layout animation settings */
+        layout?: {
+            duration?: number;
+            ease?: AnimationEasing;
+        };
+        /** Inner content animation settings */
+        innerContent?: {
+            duration?: number;
+        };
+    };
+};
+/**
+ * Comprehensive customization options for the ChainSelector.
+ */
+type ChainSelectorCustomization = {
+    /** Custom component overrides */
+    components?: {
+        /** Custom loading state component */
+        LoadingState?: ComponentType<CustomLoadingStateProps>;
+        /** Custom component for displaying a single chain */
+        SingleChainDisplay?: ComponentType<CustomSingleChainDisplayProps>;
+        /** Custom wrapper for the desktop selector */
+        DesktopSelector?: ComponentType<CustomDesktopSelectorProps>;
+        /** Custom wrapper for the mobile selector */
+        MobileSelector?: ComponentType<CustomMobileSelectorProps>;
+        /** Custom dialog header component */
+        DialogHeader?: ComponentType<CustomDialogHeaderProps>;
+    };
+    /** Custom CSS class generators */
+    classNames?: {
+        /** Classes for the main container */
+        container?: (params: {
+            hasMultipleChains: boolean;
+            isLoading: boolean;
+        }) => string;
+        /** Classes for the desktop wrapper */
+        desktopWrapper?: (params: {
+            chainCount: number;
+        }) => string;
+        /** Classes for the mobile wrapper */
+        mobileWrapper?: (params: {
+            chainCount: number;
+        }) => string;
+        /** Classes for the loading state */
+        loadingState?: () => string;
+        /** Classes for the single chain display */
+        singleChainDisplay?: () => string;
+        /** Classes for the dialog content */
+        dialogContent?: (params: {
+            chainCount: number;
+        }) => string;
+        /** Classes for the dialog inner container */
+        dialogInnerContainer?: () => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Styles for the main container */
+        container?: (params: {
+            hasMultipleChains: boolean;
+            isLoading: boolean;
+        }) => React__default.CSSProperties;
+        /** Styles for the desktop wrapper */
+        desktopWrapper?: (params: {
+            chainCount: number;
+        }) => React__default.CSSProperties;
+        /** Styles for the mobile wrapper */
+        mobileWrapper?: (params: {
+            chainCount: number;
+        }) => React__default.CSSProperties;
+        /** Styles for the loading state */
+        loadingState?: () => React__default.CSSProperties;
+        /** Styles for the single chain display */
+        singleChainDisplay?: () => React__default.CSSProperties;
+        /** Styles for the dialog content */
+        dialogContent?: (params: {
+            chainCount: number;
+        }) => React__default.CSSProperties;
+        /** Styles for the dialog inner container */
+        dialogInnerContainer?: () => React__default.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Wrapper for the chain change handler */
+        onChainChange?: (originalHandler: (newChainId: string) => void, newChainId: string) => void;
+        /** Wrapper for the dialog close handler */
+        onDialogClose?: (originalHandler: () => void) => void;
+    };
+    /** Customization for sub-components */
+    triggerButton?: ChainTriggerButtonCustomization;
+    /** Customization for the Select content */
+    selectContent?: Partial<SelectContentAnimatedProps>;
+    /** Customization for the chain list renderer (desktop) */
+    chainListRenderer?: ChainListRendererCustomization;
+    /** Customization for the scrollable chain list (mobile) */
+    scrollableChainList?: ScrollableChainListCustomization;
+};
+/**
+ * Props for the ChainSelector component.
+ */
+interface ChainSelectorProps extends InitialChains, Pick<ConnectButtonProps, 'store'> {
+    /** Comprehensive customization options */
+    customization?: ChainSelectorCustomization;
+    /** Custom CSS classes for the main container */
+    className?: string;
+    /** Custom inline styles for the main container */
+    style?: React__default.CSSProperties;
+    /** Custom ARIA label for the selector */
+    'aria-label'?: string;
 }
-declare const ScrollableChainList: react__default.FC<ChainListProps>;
+/**
+ * The main chain selector component.
+ * Supports both desktop (dropdown) and mobile (dialog modal) interfaces.
+ *
+ * @param props - Props for the ChainSelector component
+ * @returns The chain selector component or null if no wallet is connected
+ */
+declare function ChainSelector({ appChains, solanaRPCUrls, store, customization, className, style, 'aria-label': ariaLabel, }: ChainSelectorProps): react_jsx_runtime.JSX.Element | null;
 
 declare function ConnectedContent({ transactionPool, withBalance, store, }: Pick<ConnectButtonProps, 'transactionPool' | 'store' | 'withBalance'>): react_jsx_runtime.JSX.Element | null;
 
@@ -544,7 +1462,7 @@ interface IconButtonProps {
  *
  * @public
  */
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Educational carousel component about wallet functionality
@@ -596,7 +1514,7 @@ interface ConnectCardProps extends NetworkIconsProps {
     /** Click handler for the connect card */
     onClick: () => void;
     /** Icon element to display for the wallet/connector */
-    icon: react__default.ReactNode;
+    icon: React__default.ReactNode;
     /** Primary title/name of the wallet/connector */
     title: string;
     /** Optional subtitle/description text */
@@ -988,7 +1906,7 @@ interface DisclaimerProps {
     /** Whether to show the disclaimer in compact mode */
     compact?: boolean;
     /** Additional content to display below the description */
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     /** Custom test ID for testing purposes */
     'data-testid'?: string;
     /** Whether the disclaimer should be announced to screen readers */
@@ -1416,25 +2334,116 @@ declare function NetworkTabs({ networks, selectedAdapter, onSelect }: NetworkTab
 
 interface RecentBadgeProps {
     className?: string;
-    children?: react__default.ReactNode;
+    children?: React__default.ReactNode;
     animated?: boolean;
 }
 /**
  * Badge component with animated gradient border effect
  */
-declare const RecentBadge: react__default.NamedExoticComponent<RecentBadgeProps>;
+declare const RecentBadge: React__default.NamedExoticComponent<RecentBadgeProps>;
 
-interface SelectContentAnimatedProps extends ComponentPropsWithoutRef<typeof Select.Content> {
-    /** Custom CSS classes to apply to the content container */
+type CustomIconProps = {
+    isCopied: boolean;
     className?: string;
-    /** ARIA label for the select content */
-    'aria-label'?: string;
-    /** Whether the select content should have reduced motion for accessibility */
-    reduceMotion?: boolean;
-}
-declare const SelectContentAnimated: react.ForwardRefExoticComponent<SelectContentAnimatedProps & react.RefAttributes<HTMLDivElement>>;
-
-interface ToastErrorProps {
+    style?: React.CSSProperties;
+    'aria-hidden'?: boolean;
+};
+type CustomTitleProps = {
+    title: string;
+    titleId: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type CustomDescriptionProps = {
+    rawError: string;
+    descriptionId: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+type CustomButtonContentProps = {
+    icon: ReactNode;
+    isCopied: boolean;
+    copyLabel: string;
+    copiedLabel: string;
+};
+/**
+ * Customization options for ToastError component
+ */
+type ToastErrorCustomization = {
+    /** Override container element props */
+    containerProps?: Partial<ComponentPropsWithoutRef<'div'>>;
+    /** Override button element props */
+    buttonProps?: Partial<ComponentPropsWithoutRef<'button'>>;
+    /** Custom components */
+    components?: {
+        /** Custom icon component */
+        Icon?: ComponentType<CustomIconProps>;
+        /** Custom title component */
+        Title?: ComponentType<CustomTitleProps>;
+        /** Custom description component */
+        Description?: ComponentType<CustomDescriptionProps>;
+        /** Custom button content component */
+        ButtonContent?: ComponentType<CustomButtonContentProps>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Function to generate container classes */
+        container?: (params: {
+            hasTitle: boolean;
+            hasError: boolean;
+        }) => string;
+        /** Function to generate title classes */
+        title?: (params: {
+            title: string;
+        }) => string;
+        /** Function to generate description classes */
+        description?: (params: {
+            rawError: string;
+        }) => string;
+        /** Function to generate button classes */
+        button?: (params: {
+            isCopied: boolean;
+            disabled: boolean;
+        }) => string;
+        /** Function to generate icon classes */
+        icon?: (params: {
+            isCopied: boolean;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Function to generate container styles */
+        container?: (params: {
+            hasTitle: boolean;
+            hasError: boolean;
+        }) => React.CSSProperties;
+        /** Function to generate title styles */
+        title?: (params: {
+            title: string;
+        }) => React.CSSProperties;
+        /** Function to generate description styles */
+        description?: (params: {
+            rawError: string;
+        }) => React.CSSProperties;
+        /** Function to generate button styles */
+        button?: (params: {
+            isCopied: boolean;
+            disabled: boolean;
+        }) => React.CSSProperties;
+        /** Function to generate icon styles */
+        icon?: (params: {
+            isCopied: boolean;
+        }) => React.CSSProperties;
+    };
+    /** Custom event handlers */
+    handlers?: {
+        /** Custom click handler wrapper */
+        onClick?: (originalHandler: (event: React.MouseEvent<HTMLButtonElement>) => void, event: React.MouseEvent<HTMLButtonElement>) => void;
+        /** Custom keydown handler wrapper */
+        onKeyDown?: (originalHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void, event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    };
+};
+interface ToastErrorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'aria-live'> {
     /** Error title to display */
     title: string;
     /** Raw error message to display and copy */
@@ -1445,47 +2454,107 @@ interface ToastErrorProps {
     'aria-label'?: string;
     /** Callback fired when copy operation completes */
     onCopyComplete?: (success: boolean) => void;
+    /** Customization options */
+    customization?: ToastErrorCustomization;
 }
-declare function ToastError({ title, rawError, className, 'aria-label': ariaLabel, onCopyComplete }: ToastErrorProps): react_jsx_runtime.JSX.Element;
-
-interface ToBottomButtonProps {
-    /** Custom CSS classes for the button */
-    className?: string;
-    /** Custom aria-label for the button */
-    'aria-label'?: string;
-    /** Callback fired when button is clicked */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Whether the button is disabled */
-    disabled?: boolean;
-}
-declare const ToBottomButton: react.ForwardRefExoticComponent<ToBottomButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
-interface ToTopButtonProps {
-    /** Custom CSS classes for the button */
-    className?: string;
-    /** Custom aria-label for the button */
-    'aria-label'?: string;
-    /** Callback fired when button is clicked */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Whether the button is disabled */
-    disabled?: boolean;
-}
-declare const ToTopButton: react.ForwardRefExoticComponent<ToTopButtonProps & react.RefAttributes<HTMLButtonElement>>;
-
 /**
- * @file This file contains the `WalletAvatar` component for displaying a user's avatar.
+ * A highly customizable error toast component with copy functionality and extensive styling options.
+ * Provides comprehensive customization for appearance, behavior, and event handling while maintaining accessibility.
  */
-type WalletAvatarProps = {
+declare const ToastError: React$1.ForwardRefExoticComponent<ToastErrorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type CustomLoadingOverlayProps$1 = {
+    isLoading: boolean;
+    showLoading: boolean;
+    disableAnimation: boolean;
+    size: WalletAvatarSize;
+};
+type CustomAvatarImageProps = {
+    src: string;
+    isLoading: boolean;
+    onLoad: () => void;
+    onError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    address: string;
+    ensAvatar?: string | null;
+    size: WalletAvatarSize;
+};
+type CustomFallbackContentProps = {
+    address: string;
+    formattedAddress: string;
+    size: WalletAvatarSize;
+};
+type WalletAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Customization options for WalletAvatar component
+ */
+type WalletAvatarCustomization = {
+    /** Override container element props */
+    containerProps?: Partial<ComponentPropsWithoutRef<'div'>>;
+    /** Override image element props */
+    imageProps?: Partial<ComponentPropsWithoutRef<'img'>>;
+    /** Custom components */
+    components?: {
+        /** Custom loading overlay component */
+        LoadingOverlay?: ComponentType<CustomLoadingOverlayProps$1>;
+        /** Custom avatar image component */
+        AvatarImage?: ComponentType<CustomAvatarImageProps>;
+        /** Custom fallback content component for extreme error cases */
+        FallbackContent?: ComponentType<CustomFallbackContentProps>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Function to generate container classes */
+        container?: (params: {
+            size: WalletAvatarSize;
+            bgColor: string;
+            address: string;
+        }) => string;
+        /** Function to generate loading overlay classes */
+        loadingOverlay?: (params: {
+            isLoading: boolean;
+            showLoading: boolean;
+            disableAnimation: boolean;
+        }) => string;
+        /** Function to generate image classes */
+        image?: (params: {
+            isLoading: boolean;
+            size: WalletAvatarSize;
+            hasError: boolean;
+        }) => string;
+        /** Function to generate fallback content classes */
+        fallbackContent?: (params: {
+            size: WalletAvatarSize;
+            address: string;
+        }) => string;
+    };
+    /** Custom style generators */
+    styles?: {
+        /** Function to generate container styles */
+        container?: (params: {
+            bgColor: string;
+            size: WalletAvatarSize;
+            address: string;
+        }) => React.CSSProperties;
+    };
+    /** Custom utilities */
+    utils?: {
+        /** Custom blockie generator function */
+        generateBlockie?: (address: string) => string | null;
+        /** Custom background color generator function */
+        generateBgColor?: (address: string) => string;
+        /** Custom address formatter function */
+        formatAddress?: (address: string, labels: any) => string;
+    };
+};
+interface WalletAvatarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'role'> {
     /** The user's wallet address, used for the blockie fallback and background color. */
     address: string;
     /** An optional URL for the user's ENS avatar image. */
     ensAvatar?: string | null;
-    /** Optional additional CSS classes for the container. */
-    className?: string;
     /** Custom alt text for the avatar image */
     altText?: string;
     /** Size variant for the avatar */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: WalletAvatarSize;
     /** Whether to show loading animation */
     showLoading?: boolean;
     /** Callback fired when image loads successfully */
@@ -1494,25 +2563,69 @@ type WalletAvatarProps = {
     onImageError?: (error: Event) => void;
     /** Whether to disable the pulse animation */
     disableAnimation?: boolean;
-};
+    /** Customization options */
+    customization?: WalletAvatarCustomization;
+}
 /**
- * A component that displays a user's avatar.
- *
- * It prioritizes showing the provided `ensAvatar`. If unavailable or if the image fails to load,
- * it falls back to a procedurally generated "blockie" based on the user's address.
- * It also generates a unique background color from the address as a placeholder.
+ * A highly customizable wallet avatar component with ENS support, blockie fallback, and extensive styling options.
+ * Provides comprehensive customization for container, image, loading states, and fallback content while maintaining accessibility.
  */
-declare const WalletAvatar: react.ForwardRefExoticComponent<WalletAvatarProps & react.RefAttributes<HTMLDivElement>>;
+declare const WalletAvatar: React$1.ForwardRefExoticComponent<WalletAvatarProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface WalletIconProps {
+type CustomLoadingOverlayProps = {
+    size: number;
+    isLoading: boolean;
+};
+type CustomErrorIndicatorProps = {
+    walletName: string;
+    hasError: boolean;
+};
+type CustomFallbackIconProps = {
+    walletName: string;
+    size: number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * Customization options for WalletIcon component
+ */
+type WalletIconCustomization = {
+    /** Override container element props */
+    containerProps?: Partial<ComponentPropsWithoutRef<'div'>>;
+    /** Override image element props */
+    imageProps?: Partial<ComponentPropsWithoutRef<'img'>>;
+    /** Custom components */
+    components?: {
+        /** Custom loading overlay component */
+        LoadingOverlay?: ComponentType<CustomLoadingOverlayProps>;
+        /** Custom error indicator component (only shown in development) */
+        ErrorIndicator?: ComponentType<CustomErrorIndicatorProps>;
+        /** Custom fallback icon component */
+        FallbackIcon?: ComponentType<CustomFallbackIconProps>;
+    };
+    /** Custom class name generators */
+    classNames?: {
+        /** Function to generate container classes */
+        container?: (params: {
+            isLoading: boolean;
+            showLoading: boolean;
+            size: number;
+        }) => string;
+        /** Function to generate image classes */
+        image?: (params: {
+            isLoading: boolean;
+            showLoading: boolean;
+            hasError: boolean;
+        }) => string;
+    };
+};
+interface WalletIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'role'> {
     /** Custom icon URL for the wallet */
     icon?: string;
     /** Name of the wallet */
     name: string;
     /** Size of the icon in pixels */
     size?: number;
-    /** Additional CSS classes */
-    className?: string;
     /** Custom alt text for the icon */
     altText?: string;
     /** Whether to show loading state */
@@ -1523,8 +2636,14 @@ interface WalletIconProps {
     onImageError?: () => void;
     /** Enable lazy loading for non-critical images */
     lazy?: boolean;
+    /** Customization options */
+    customization?: WalletIconCustomization;
 }
-declare const WalletIcon: react.ForwardRefExoticComponent<WalletIconProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * A highly customizable wallet icon component with loading states, error handling, and fallback support.
+ * Provides extensive customization options for container, image, and sub-components while maintaining accessibility.
+ */
+declare const WalletIcon: React$1.ForwardRefExoticComponent<WalletIconProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * Default English translations for NovaConnect component
@@ -2148,25 +3267,6 @@ declare const getNetworkIcon: (adapter: OrbitAdapter) => {
     name: string;
 } | undefined;
 
-/**
- * @fileoverview Utility function to determine if the current environment supports touch input.
- * This is safe to use in Next.js applications as it checks for the `window` object existence.
- */
-/**
- * Determines if the current browsing device supports touch input,
- * while also excluding large screens (typically desktop-sized touch monitors).
- *
- * It checks for:
- * 1. The presence of 'ontouchstart' or navigator.maxTouchPoints > 0 or '(pointer: coarse)'.
- * 2. ONLY returns true if the screen width is less than or equal to the specified threshold (e.g., 1200px).
- *
- * This function is safe for server-side rendering (SSR) environments like Next.js.
- *
- * @param {number} [maxWidth=1200] The maximum screen width (in pixels) for a device to be considered 'touch' (default is 1200).
- * @returns {boolean} Returns true if the environment is determined to support touch input AND is within the width limit, otherwise false.
- */
-declare function isTouchDevice(maxWidth?: number): boolean;
-
 declare const networksLinks: Partial<Record<OrbitAdapter, {
     aboutNetwork: string;
     choseWallet: string;
@@ -2425,4 +3525,4 @@ declare function initializeBlockchainSupport(): Promise<InitializationResult>;
  */
 declare function isAdapterSupported(adapter: OrbitAdapter): Promise<boolean>;
 
-export { AboutWallets, type AdapterInfo, type AdapterLoadStatus, type AllChainConfigs, type AllConnectors, type AllWallets, type BlockchainUtilities, type BlockchainUtilityResult, type ChainAdapter, type ChainIdentifierArray, ChainListRenderer, ChainSelector, ConnectButton, type ConnectButtonProps, ConnectCard, ConnectedContent, ConnectedModal, ConnectedModalFooter, ConnectedModalMainContent, type ConnectedModalMainContentProps, ConnectedModalNameAndBalance, ConnectedModalTxHistory, Connecting, type Connector, ConnectorsBlock, ConnectorsSelections, type ConnectorsSelectionsProps, Disclaimer, GetWallet, type GroupedConnector, IconButton, ImpersonateForm, type InitialChains, type InitializationResult, NetworkSelections, NetworkTabs, type NovaConnectLabels, RecentBadge, ScrollableChainList, SelectContentAnimated, StatusIcon, ToBottomButton, ToTopButton, ToastError, WaitForConnectionContent, type Wallet, WalletAvatar, type WalletAvatarProps, WalletIcon, defaultLabels, getAdapterStatus, getAllAdaptersStatus, getAvailableChainIds, getAvailableSolanaClusters, getAvailableSolanaClusters$1 as getAvailableSolanaClustersAsync, getBlockchainUtilities, getChainsListByWalletTypeSync as getChainsListByWalletType, getChainsListByWalletType as getChainsListByWalletTypeAsync, getChainsListByWalletTypeSync, getConnectChainId, getEvmUtils, getFilteredConnectors, getGroupedConnectors, getNetworkIcon, getSolanaUtils, getWalletChains, hasAvailableConnectors, hasConnectorsForAdapter, initializeBlockchainSupport, isAdapterSupported, isEvmChainListSync as isEvmChainList, isEvmChainList as isEvmChainListAsync, isEvmChainListSync, isSolanaChainListSync as isSolanaChainList, isSolanaChainList as isSolanaChainListAsync, isSolanaChainListSync, isTouchDevice, isValidSolanaCluster, isValidSolanaCluster$1 as isValidSolanaClusterAsync, networksLinks, preloadChainAdapters, ukrainianLabels };
+export { AboutWallets, type AdapterInfo, type AdapterLoadStatus, type AllChainConfigs, type AllConnectors, type AllWallets, type BlockchainUtilities, type BlockchainUtilityResult, type ChainAdapter, type ChainIdentifierArray, ChainListRenderer, type ChainListRendererCustomization, type ChainListRendererProps, ChainSelector, type ChainSelectorCustomization, type ChainSelectorProps, type ChainTriggerButtonCustomization, ConnectButton, type ConnectButtonProps, ConnectCard, ConnectedContent, ConnectedModal, ConnectedModalFooter, ConnectedModalMainContent, type ConnectedModalMainContentProps, ConnectedModalNameAndBalance, ConnectedModalTxHistory, Connecting, type Connector, ConnectorsBlock, ConnectorsSelections, type ConnectorsSelectionsProps, Disclaimer, GetWallet, type GroupedConnector, IconButton, ImpersonateForm, type InitialChains, type InitializationResult, NetworkSelections, NetworkTabs, type NovaConnectLabels, RecentBadge, ScrollableChainList, type ScrollableChainListCustomization, type ScrollableChainListProps, SelectContentAnimated, type SelectContentAnimatedProps, StatusIcon, ToBottomButton, type ToBottomButtonCustomization, type ToBottomButtonProps, ToTopButton, type ToTopButtonCustomization, type ToTopButtonProps, ToastError, type ToastErrorCustomization, type ToastErrorProps, WaitForConnectionContent, type Wallet, WalletAvatar, type WalletAvatarCustomization, type WalletAvatarProps, type WalletAvatarSize, WalletIcon, type WalletIconCustomization, type WalletIconProps, defaultLabels, getAdapterStatus, getAllAdaptersStatus, getAvailableChainIds, getAvailableSolanaClusters, getAvailableSolanaClusters$1 as getAvailableSolanaClustersAsync, getBlockchainUtilities, getChainsListByWalletTypeSync as getChainsListByWalletType, getChainsListByWalletType as getChainsListByWalletTypeAsync, getChainsListByWalletTypeSync, getConnectChainId, getEvmUtils, getFilteredConnectors, getGroupedConnectors, getNetworkIcon, getSolanaUtils, getWalletChains, hasAvailableConnectors, hasConnectorsForAdapter, initializeBlockchainSupport, isAdapterSupported, isEvmChainListSync as isEvmChainList, isEvmChainList as isEvmChainListAsync, isEvmChainListSync, isSolanaChainListSync as isSolanaChainList, isSolanaChainList as isSolanaChainListAsync, isSolanaChainListSync, isValidSolanaCluster, isValidSolanaCluster$1 as isValidSolanaClusterAsync, networksLinks, preloadChainAdapters, ukrainianLabels };