@0xsquid/ui 0.26.0 → 0.27.1

package/dist/index.d.ts

@@ -19,21 +19,21 @@ interface BadgeImageProps {
      */
     placeholderImageUrl?: string;
 }
-type BadgeSize = 'sm' | 'md';
+type BadgeSize = "sm" | "md";
 declare function BadgeImage({ imageUrl: _imageUrl, badgeUrl, size, extraMarginForBadge, rounded, placeholderImageUrl, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
-type TextSize = 'small' | 'medium' | 'large';
-type SwitchSize = 'small' | 'large';
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-type ButtonSize = 'md' | 'lg';
-type SwapDirection = 'from' | 'to';
-type BoostMode = 'normal' | 'boost';
-type HistoryItemStatus = 'completed' | 'pending' | 'failed' | 'warning';
+type TextSize = "small" | "medium" | "large";
+type SwitchSize = "small" | "large";
+type ButtonVariant = "primary" | "secondary" | "tertiary";
+type ButtonSize = "md" | "lg";
+type SwapDirection = "from" | "to";
+type BoostMode = "normal" | "boost";
+type HistoryItemStatus = "completed" | "pending" | "failed" | "warning";
 type DescriptionBlock = {
-    type: 'string';
+    type: "string";
     value: string;
 } | {
-    type: 'image';
+    type: "image";
     value: string;
     rounded?: boolean;
 };
@@ -52,33 +52,33 @@ declare enum SwapState {
     CONFIRMATION_REJECTED = 6,
     NEEDS_GAS = 7
 }
-type ThemeType = 'light' | 'dark';
-type ActionStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
-type TransactionStateVariant = 'full' | 'compact' | 'small';
-type TokenPairVariant = 'horizontal' | 'vertical';
-type TokenPairSize = 'small' | 'medium';
-type ImageIconVariant = 'square' | 'round' | 'proportional';
-type ImageIconSize = 'small' | 'medium' | 'large' | 'xlarge';
-type ChainTypeFilter = 'source' | 'destination';
-type StatusFilter = 'success' | 'ongoing' | 'error';
-type AssetsButtonVariant = 'primary' | 'accent';
-type PropertyListItemSize = 'small' | 'large';
+type ThemeType = "light" | "dark";
+type ActionStatus = "pending" | "waiting" | "ongoing" | "executed" | "success" | "error" | "warning";
+type TransactionStateVariant = "full" | "compact" | "small";
+type TokenPairVariant = "horizontal" | "vertical";
+type TokenPairSize = "small" | "medium";
+type ImageVariant = "square" | "round" | "proportional";
+type ImageSize = "small" | "medium" | "large" | "xlarge";
+type ChainTypeFilter = "source" | "destination";
+type StatusFilter = "success" | "ongoing" | "error";
+type AssetsButtonVariant = "primary" | "accent";
+type PropertyListItemSize = "small" | "large";
 
 interface IconLabelProps {
     isLoading?: boolean;
     src?: string;
     children?: ReactNode;
-    variant?: ImageIconVariant;
+    variant?: ImageVariant;
 }
 declare function IconLabel({ src, children, variant }: IconLabelProps): react_jsx_runtime.JSX.Element;
 
-interface ImageIconProps {
+interface ImageProps {
     src?: string;
-    variant?: ImageIconVariant;
-    size?: ImageIconSize;
+    variant?: ImageVariant;
+    size?: ImageSize;
     className?: string;
 }
-declare function ImageIcon({ src, variant, size, className: propsClassName, }: ImageIconProps): react_jsx_runtime.JSX.Element;
+declare function Image({ src, variant, size, className: propsClassName, }: ImageProps): react_jsx_runtime.JSX.Element;
 
 declare const LoadingProvider: react.Provider<boolean | null>;
 interface LoadingSkeletonProps {
@@ -89,12 +89,12 @@ interface LoadingSkeletonProps {
     width?: string;
 }
 declare function LoadingSkeleton({ className, height, isLoading: isLoadingProp, children, width, }: LoadingSkeletonProps): string | number | true | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element;
-interface LoadingTextProps extends ComponentProps<'span'> {
+interface LoadingTextProps extends ComponentProps<"span"> {
     width?: string | [string, string];
     isLoading?: boolean;
 }
 declare function TextSkeleton({ className, width, children, isLoading, ...props }: LoadingTextProps): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
-interface LoadingBlockProps extends ComponentProps<'div'> {
+interface LoadingBlockProps extends ComponentProps<"div"> {
     isLoading?: boolean;
 }
 declare function BlockSkeleton({ isLoading, className, children, ...props }: LoadingBlockProps): string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
@@ -150,8 +150,8 @@ type InputActionButtonProps = {
     label?: string;
 };
 
-type TooltipWidth = 'max' | 'container';
-type TooltipThreshold = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+type TooltipWidth = "max" | "container";
+type TooltipThreshold = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 interface TooltipProps {
     children: react__default.ReactNode;
     tooltipContent?: react__default.ReactNode;
@@ -189,21 +189,21 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
     criticalPriceImpactPercentage?: number;
     direction?: SwapDirection;
     inputModeButton?: {
-        usdModeTooltip?: Omit<TooltipProps, 'children'>;
-        tokenModeTooltip?: Omit<TooltipProps, 'children'>;
+        usdModeTooltip?: Omit<TooltipProps, "children">;
+        tokenModeTooltip?: Omit<TooltipProps, "children">;
         amountUsd?: string;
     };
     maxUsdDecimals?: number;
     isInteractive?: boolean;
     balanceButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
+        tooltip?: Omit<TooltipProps, "children">;
     };
 }
 declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number | undefined;
-    type: 'percentage' | 'amount';
+    type: "percentage" | "amount";
     onChange?: (value: number | undefined) => void;
     decimalsFormat?: number;
     min?: number;
@@ -217,8 +217,9 @@ interface SwitchProps {
     onChange?: (checked: boolean) => void;
     size: SwitchSize;
     disabled?: boolean;
+    inputProps?: React.ComponentProps<"input">;
 }
-declare function Switch({ checked, onChange, size, disabled, }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare function Switch({ checked, onChange, size, disabled, inputProps, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
 interface RangeInputProps {
     label: string;
@@ -244,7 +245,7 @@ interface AssetsButtonProps {
     onClick?: () => void;
     variant?: AssetsButtonVariant;
     isLoading?: boolean;
-    tooltip?: Omit<TooltipProps, 'children'>;
+    tooltip?: Omit<TooltipProps, "children">;
 }
 declare function AssetsButton({ chain, token, onClick, variant, isLoading, tooltip, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -277,7 +278,7 @@ declare function Button({ label, disabled, size, variant, icon, link, isLoading,
 interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     feeInUsd?: string;
     chipLabel?: string;
-    tooltip?: Omit<TooltipProps, 'children'>;
+    tooltip?: Omit<TooltipProps, "children">;
 }
 declare function FeeButton({ feeInUsd, chipLabel, className, tooltip, ...props }: FeeButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -295,10 +296,10 @@ interface SettingsButtonProps {
 }
 declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
 
-interface IconButtonProps extends React.ComponentProps<'button'> {
+interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
 }
-declare const IconButton: ({ icon, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare function Approve(): react_jsx_runtime.JSX.Element;
 
@@ -324,7 +325,10 @@ declare function ChevronLargeRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-declare function ChevronRightSmallIcon(): react_jsx_runtime.JSX.Element;
+declare function ChevronRightSmallIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function ArrowLeftIcon({ className, size, }: {
     className?: string;
     size?: string;
@@ -365,6 +369,18 @@ declare function ArrowCornerDownRightIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function ChevronDownSmallIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowDownIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ArrowSplit({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function ArrowRotate(): react_jsx_runtime.JSX.Element;
 
@@ -399,7 +415,7 @@ declare function Checkmark2Icon({ className, size, style, }: {
     style?: React.CSSProperties;
 }): react_jsx_runtime.JSX.Element;
 
-declare function ClockIcon({ className, size, }: {
+declare function ClockSolidIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -422,7 +438,7 @@ declare function TimeFliesIcon({ size, className, }: {
 
 declare function CoinsIcon(): react_jsx_runtime.JSX.Element;
 declare function CoinsAddIcon(): react_jsx_runtime.JSX.Element;
-declare function Dollar({ className, size, }: {
+declare function DollarOutlinedIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -430,10 +446,18 @@ declare function StocksIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function DollarSolidIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function CollectionIcon(): react_jsx_runtime.JSX.Element;
 
-declare function CompassRound({ size, className, }: {
+declare function CompassRoundOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CompassRoundSolidIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
@@ -465,7 +489,7 @@ declare function PowerIcon({ size, className, }: {
 declare function Copy({ size, strokeWidth, ...props }: {
     size?: string;
     strokeWidth?: string;
-} & ComponentProps<'svg'>): react_jsx_runtime.JSX.Element;
+} & ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
 declare function DashboardFast({ size, className, }: {
     size?: string;
@@ -554,9 +578,9 @@ declare function LightningIcon({ size, className, }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function LinkIcon(props: ComponentProps<'svg'>): react_jsx_runtime.JSX.Element;
+declare function LinkIcon(props: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
 
-interface LoaderProps extends ComponentProps<'svg'> {
+interface LoaderProps extends ComponentProps<"svg"> {
     size?: string;
     strokeWidth?: string;
     rotateDuration?: string;
@@ -582,7 +606,10 @@ declare function PlusIcon(): react_jsx_runtime.JSX.Element;
 
 declare function RefreshIcon(): react_jsx_runtime.JSX.Element;
 
-declare function SearchIcon(): react_jsx_runtime.JSX.Element;
+declare function SearchIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function XSocial({ className, size, }: {
     size?: string;
@@ -640,7 +667,7 @@ declare function Tick({ className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Timeline({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function Timeline({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare namespace Timeline {
     var ArrowDown: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
     var ArrowReverse: (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -668,7 +695,7 @@ declare function WalletFilledIcon({ size }: {
 declare function CrossAnimatedIcon({ size, isOpen, transitionDuration, className, }: {
     size?: number;
     isOpen?: boolean;
-    transitionDuration?: React.CSSProperties['transitionDuration'];
+    transitionDuration?: React.CSSProperties["transitionDuration"];
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
@@ -695,6 +722,47 @@ declare function DockIconAnalytics({ isSelected }: DockIconProps): react_jsx_run
 declare function DockIconProfile({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
 declare function DockIconHelp({ isSelected }: DockIconProps): react_jsx_runtime.JSX.Element;
 
+declare function GhostIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SettingsSliderIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function EyeOpenIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function BellAlarmIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function LimitIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function PoopIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CatSquareIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function FilterAscendingIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ImageIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function FilterTimelineIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface Props {
     lottieJsonFile: object;
     animReplacement?: JSX.Element;
@@ -1238,7 +1306,7 @@ interface BoostProps {
     }) => void;
     estimatedTime: string;
     canToggleBoostMode?: boolean;
-    tooltip?: Omit<TooltipProps, 'children'>;
+    tooltip?: Omit<TooltipProps, "children">;
 }
 declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, canToggleBoostMode, tooltip, }: BoostProps): react_jsx_runtime.JSX.Element;
 
@@ -1247,933 +1315,1005 @@ declare function Breadcrumb({ children, className, }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-interface CollapseProps extends ComponentProps<'div'> {
+interface CollapseProps extends ComponentProps<"div"> {
     collapsed: boolean;
     collapsedHeight?: number;
     duration?: number;
 }
 declare function Collapse({ collapsed, collapsedHeight, children, className, duration, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
-interface SizeTransitionProps extends ComponentProps<'div'> {
+interface SizeTransitionProps extends ComponentProps<"div"> {
 }
 declare function SizeTransition({ children, className, ...props }: SizeTransitionProps): react_jsx_runtime.JSX.Element;
 
-interface DescriptionBlocksProps extends ComponentProps<'div'> {
+interface DescriptionBlocksProps extends ComponentProps<"div"> {
     blocks: DescriptionBlock[] | string;
 }
 declare function DescriptionBlocks({ className, blocks: blocksProp, ...props }: DescriptionBlocksProps): react_jsx_runtime.JSX.Element;
-declare function Inline({ className, children, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function Inline({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+interface StopsProps extends React.ComponentProps<"button"> {
+    stopsCount?: string | number;
+    estimatedTime?: string;
+    tooltip?: Omit<TooltipProps, "children">;
+    providers: Provider[];
+}
+type Provider = {
+    logoUrl: string;
+};
 
 interface DetailsToolbarProps {
     errorMessage?: string;
     flipButton?: {
         onClick?: () => void;
-        tooltip?: Omit<TooltipProps, 'children'>;
+        tooltip?: Omit<TooltipProps, "children">;
         isDisabled?: boolean;
     };
     feeButton?: {
         feeInUsd: string;
-        tooltip?: Omit<TooltipProps, 'children'>;
+        tooltip?: Omit<TooltipProps, "children">;
         onClick: () => void;
     };
-    estimatedTime?: string;
     isLoading?: boolean;
     isEmpty?: boolean;
     helpButton?: {
         label: string;
         onClick: () => void;
     };
-    boostButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
-        onClick?: ({ boostMode }: {
-            boostMode: BoostMode;
-        }) => void;
-        canToggleBoostMode?: boolean;
-        boostMode?: BoostMode;
-    };
+    stopsButton?: StopsProps;
 }
-declare function DetailsToolbar({ errorMessage, estimatedTime, helpButton, isLoading, isEmpty, flipButton, feeButton, boostButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButton, feeButton, stopsButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
-interface DropdownMenuItemProps {
-    label: string;
-    labelClassName?: string;
-    imageUrl?: string;
-    icon?: React.ReactNode;
-    onClick?: () => void;
+interface DropdownMenuProps {
+    dropdownRef?: React.RefObject<HTMLDivElement>;
+    menuRef?: React.RefObject<HTMLDivElement>;
+    className?: string;
+    isHidden?: boolean;
+    listClassName?: string;
+    containerClassName?: string;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    children?: React.ReactNode;
+    contentWrapperProps?: React.ComponentProps<"div">;
+    menuContentClassName?: string;
 }
-declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenu({ dropdownRef, className, menuRef, isHidden, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 
-interface HistoryItemProps {
-    firstImageUrl: string;
-    secondImageUrl: string;
-    status: HistoryItemStatus;
-    fromLabel: string;
-    toLabel: string;
-    dateCompleted: string;
-    fromAmount: string;
-    toAmount: string;
-    dropdownMenuItems?: DropdownMenuItemProps[];
-    itemsContainerRef?: React.RefObject<HTMLElement>;
-    onClick?: () => void;
-    warningLabel?: string;
+type ErrorMessageProps = {
+    message: string;
+    showIcon?: boolean;
+};
+declare function ErrorMessage({ message, showIcon }: ErrorMessageProps): react_jsx_runtime.JSX.Element;
+
+interface HashLinkProps {
+    showTx?: boolean;
+    hash: string;
+    children?: ReactNode;
+    showCopyButton?: boolean;
+    url?: string;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HashLink({ showTx, hash, showCopyButton, url, children, }: HashLinkProps): react_jsx_runtime.JSX.Element;
 
-interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
-    itemTitle: string | React.ReactNode;
-    mainImageUrl?: string;
-    secondaryImageUrl?: string;
-    placeholderImageUrl?: string;
-    subtitle?: string;
-    subtitleOnHover?: React.ReactNode;
-    detail?: string;
+interface InfoBoxProps {
+    title: string;
+    description: string;
     icon?: React.ReactNode;
-    size?: ListItemSize;
-    mainIcon?: React.ReactNode;
-    isSelected?: boolean;
-    className?: string;
-    onDetailClick?: () => void;
-    showDetailOnHoverOnly?: boolean;
-    rounded?: boolean;
-    detailButtonClassName?: string;
-    loading?: {
-        subtitle?: boolean | string;
-    };
-    containerProps?: React.HTMLAttributes<HTMLLIElement>;
-    compactOnMobile?: boolean;
-    extraPadding?: boolean;
 }
-type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function InfoBox({ title, description, icon }: InfoBoxProps): react_jsx_runtime.JSX.Element;
 
-interface MenuItemProps {
-    label: string;
-    imageUrl?: string;
-    icon?: React.ReactNode;
+interface JoinProps {
+    children?: ReactNode;
+    glue: () => ReactNode;
 }
-declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
+declare function Join({ children, glue }: JoinProps): react_jsx_runtime.JSX.Element[] | null | undefined;
 
-interface PropertyListItemProps extends ComponentProps<'li'> {
-    isLoading?: boolean;
-    label?: React.ReactNode;
-    icon?: React.ReactNode;
-    detail?: React.ReactNode;
-    variant?: PropertyListItemSize;
+type Rounded = "sm" | "lg";
+interface MenuProps extends react__default.ComponentProps<"div"> {
+    containerClassName?: string;
+    contentClassName?: string;
+    rounded?: Rounded;
+    menuRef?: react__default.RefObject<HTMLDivElement>;
+    contentWrapperProps?: react__default.ComponentProps<"div">;
 }
-declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, ...props }: PropertyListItemProps): react_jsx_runtime.JSX.Element;
+declare function Menu({ children, containerClassName, contentClassName, rounded, menuRef, contentWrapperProps, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
-interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-    title: string;
-    icon?: React.ReactNode;
-    accessory?: string | null;
-    actionIcon?: React.ReactNode;
+type ModalWidth = "large" | "extra-large";
+interface ModalProps {
+    children: React.ReactNode;
     className?: string;
+    onBackdropClick?: () => void;
+    isOpen?: boolean;
+    maxHeight?: boolean;
+    width?: ModalWidth;
 }
-declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
-type SettingsControl = {
-    type: 'percentage';
-    value: number | undefined;
-    onChange: (value: number | undefined) => void;
-    min?: number;
-    max?: number;
-    decimalsFormat?: number;
-    resetValueControl: {
-        label: string;
-        onSelect: () => void;
-        value: number | undefined;
-    };
-} | {
-    type: 'amount';
-    value: number | undefined;
-    onChange: (value: number | undefined) => void;
-    options: {
-        value: number;
-    }[];
-    decimalsFormat?: number;
-    resetValueControl: {
-        label: string;
-        value: number | undefined;
-    };
-} | {
-    type: 'switch';
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-    tooltip?: Omit<TooltipProps, 'children'>;
-    disabled?: boolean;
-} | {
-    type: 'options';
-    selectedLabel: string;
-    options: {
-        label: string;
-        onSelect: () => void;
-    }[];
+type ModalContentBorderType = "border" | "outline";
+interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    paddingY?: boolean;
+    borderType?: ModalContentBorderType;
+    className?: string;
+}
+declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
+declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
+
+type ActionButton = {
+    labelOrIcon: string | React.ReactNode;
+    onClick?: () => void;
+    id: React.Key;
+    tooltip?: Omit<TooltipProps, "children">;
+    chip?: ChipProps;
 };
-interface SettingsItemProps {
-    icon: React.ReactNode;
-    label: string;
-    control?: SettingsControl;
-    link?: string;
+interface NavigationBarProps extends React.ComponentProps<"nav"> {
+    title?: string;
+    displayBackButton?: boolean;
+    logoUrl?: string;
     transparent?: boolean;
-    helpTooltip?: Omit<TooltipProps, 'children'>;
+    displayButtonShadows?: boolean;
+    onBackButtonClick?: () => void;
+    actions?: ActionButton[];
+    isLoading?: boolean;
 }
-declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, ...props }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
-interface SwapStepItemProps {
-    descriptionBlocks: DescriptionBlock[];
-    showStepSeparator?: boolean;
-    link?: string;
-    status?: ActionStatus;
-}
-declare const STEP_ITEM_HEIGHT = 52;
-declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
+declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-interface ActionLayoutProps {
-    lineCap?: ReactNode;
-    status?: ActionStatus;
-    showTimeline?: boolean;
-    statusIcon?: ReactNode;
-    nextStatus?: ActionStatus;
-    description?: ReactNode;
-    title?: string;
-    icon?: ReactNode;
-    children?: ReactNode;
-    showBody?: boolean;
-}
-declare function ActionLayout({ lineCap, status, showTimeline, showBody, nextStatus, statusIcon, description, title, icon, children, }: ActionLayoutProps): react_jsx_runtime.JSX.Element;
-interface ActionPropertiesProps {
-    timestamp?: number;
-    hash?: string;
-    url?: string;
+interface CollapsibleMenuProps {
+    menuRef: React.MutableRefObject<HTMLDivElement | null>;
+    size: {
+        open: {
+            width: string;
+            height: string;
+        };
+        closed: {
+            width: string;
+            height: string;
+        };
+    };
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    transitionDuration?: React.CSSProperties["transitionDuration"];
+    className?: string;
 }
-declare function ActionProperties({ timestamp, hash, url, }: ActionPropertiesProps): react_jsx_runtime.JSX.Element;
-declare const ActionLineOutRow: ({ status }: {
-    status?: ActionStatus;
-}) => react_jsx_runtime.JSX.Element;
-declare const ActionStatusRow: ({ children, status, icon, }: {
-    children?: ReactNode;
-    status: ActionStatus;
-    icon?: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-declare function ActionRow({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function ActionWrapper({ children, status, className, }: {
-    children?: ReactNode;
-    status?: ActionStatus;
+declare function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }: CollapsibleMenuProps): react_jsx_runtime.JSX.Element;
+
+declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
+declare function BorderedContainer({ children, className, }: {
+    children: React.ReactNode;
     className?: string;
 }): react_jsx_runtime.JSX.Element;
-interface TimestampProps {
-    time: number;
-}
-declare function Timestamp({ time }: TimestampProps): react_jsx_runtime.JSX.Element;
 
-interface BaseActionProps {
-    status: ActionStatus;
-    /** if set, renders a line upwards to the next item in the status color */
-    nextStatus?: ActionStatus;
-    /** should we render a line down to the previous item? (default true) */
-    showTimeline?: boolean;
-    /** if false, fades out everything but the status line (for collapsed timeline state) */
-    showBody?: boolean;
-}
+declare function ProfileHeaderBackground(): react_jsx_runtime.JSX.Element;
 
-interface ApproveActionProps extends BaseActionProps {
-    profile: {
-        imageURI: string;
-        label: string;
+interface SwapConfigurationProps {
+    direction: SwapDirection;
+    priceImpactPercentage?: string;
+    amount?: string;
+    tokenPrice?: number;
+    balance?: string;
+    isFetching?: boolean;
+    chain?: {
+        iconUrl: string;
+        bgColor: string;
     };
-    chain: {
-        logoURI: string;
-        name: string;
+    token?: {
+        iconUrl: string;
+        symbol: string;
+        bgColor: string;
+        textColor: string;
+        decimals: number;
     };
-    wallet: {
-        imageURI: string;
-        address: string;
-        url: string;
+    onAmountChange?: (amount: string) => void;
+    error?: {
+        message: string;
+    };
+    criticalPriceImpactPercentage?: number;
+    maxUsdDecimals?: number;
+    isInputInteractive?: boolean;
+    isLoading?: boolean;
+    inputModeButton?: {
+        usdModeTooltip?: Omit<TooltipProps, "children">;
+        tokenModeTooltip?: Omit<TooltipProps, "children">;
+        amountUsd?: string;
+    };
+    balanceButton?: {
+        tooltip?: Omit<TooltipProps, "children">;
+    };
+    assetsButton?: {
+        tooltip?: Omit<TooltipProps, "children">;
+        onClick?: () => void;
+        variant?: AssetsButtonVariant;
+    };
+    walletButton?: {
+        tooltip?: Omit<TooltipProps, "children">;
+        onClick?: () => void;
+        address?: string;
+        emptyAddressLabel?: string;
+        disabled?: boolean;
     };
-    timestamp?: number;
-    hash?: string;
-    url?: string;
 }
-declare function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }: ApproveActionProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
-interface BridgeActionProps extends BaseActionProps {
-    token: {
-        logoURI: string;
-        symbol: string;
-    };
-    chain: {
+interface SwapProgressViewHeaderProps {
+    title: string;
+    description: string;
+}
+declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
+
+type SwapStepsCollapsedFooterButton = {
+    label: string;
+    link?: string;
+    onClick?: () => void;
+};
+interface SwapStepsCollapsedProps {
+    steps: SwapStep[];
+    currentStepIndex: number;
+    onOpen?: () => void;
+    onClose?: () => void;
+    footerButton?: SwapStepsCollapsedFooterButton;
+}
+declare const SwapStepsCollapsed: react.ForwardRefExoticComponent<SwapStepsCollapsedProps & react.RefAttributes<{
+    handleToggleRouteSteps: () => void;
+}>>;
+
+interface TokenPairProps {
+    firstToken?: {
         logoURI: string;
-        name: string;
+        bgColor: string;
     };
-    provider: {
+    secondToken?: {
         logoURI: string;
-        name: string;
+        bgColor: string;
     };
-    timestamp?: number;
-    hash?: string;
-    url?: string;
+    variant?: TokenPairVariant;
+    size?: TokenPairSize;
 }
-declare function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }: BridgeActionProps): react_jsx_runtime.JSX.Element;
+declare function TokenPair({ firstToken, secondToken, variant, size, }: TokenPairProps): react_jsx_runtime.JSX.Element;
 
-interface FeesActionProps extends BaseActionProps {
-    total: FeesRowProps;
-    lines?: FeesRowProps[];
+interface TransactionFiltersProps {
+    chainType?: ChainTypeFilter;
+    setChainType: (chainType: ChainTypeFilter) => void;
+    chain?: string;
+    setChain: (chain?: string) => void;
+    fromDate?: Date;
+    setFromDate: (fromDate?: Date) => void;
+    toDate?: Date;
+    setToDate: (toDate?: Date) => void;
+    status?: StatusFilter[];
+    setStatus: (status?: StatusFilter[]) => void;
+    chains: {
+        name: string;
+        logoURI: string;
+    }[];
 }
-declare function FeesAction({ status, nextStatus, showTimeline, total, lines, }: FeesActionProps): react_jsx_runtime.JSX.Element;
-interface FeesTotalProps {
+declare function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }: TransactionFiltersProps): react_jsx_runtime.JSX.Element;
+
+interface BridgeHeaderProps {
+    tokenLogoURI: string;
+    chainLogoURI: string;
+    title?: string;
+    hash: string;
+    url?: string;
     status: ActionStatus;
-    nextStatus?: ActionStatus;
-    total: FeesRowProps;
-    showTimeline?: boolean;
-    collapsed?: boolean;
 }
-declare function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }: FeesTotalProps): react_jsx_runtime.JSX.Element;
-interface FeesLinesProps {
+declare function BridgeHeader({ tokenLogoURI, chainLogoURI, title, hash, url, status, }: BridgeHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface BuyNFTHeaderProps {
+    imageUrl: string;
+    title?: string;
+    hash: string;
+    url?: string;
     status: ActionStatus;
-    lines?: FeesRowProps[];
-    showTimeline?: boolean;
-}
-declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): react_jsx_runtime.JSX.Element;
-interface FeesRowProps {
-    label: string;
-    amount: number | string;
-    symbol: string;
-    usd: number | string;
-    collapsed?: boolean;
 }
+declare function BuyNFTHeader({ imageUrl, title, hash, url, status, }: BuyNFTHeaderProps): react_jsx_runtime.JSX.Element;
 
-interface IncompleteActionProps extends BaseActionProps {
-    message: string;
-    buttons: ReactNode;
+interface InteractionHeaderProps {
+    title?: string;
+    image?: ReactNode;
+    hash: string;
+    url?: string;
+    status: ActionStatus;
 }
-declare function IncompleteAction({ status, nextStatus, message, buttons, }: IncompleteActionProps): react_jsx_runtime.JSX.Element;
+declare function InteractionHeader({ title, image, hash, url, status, }: InteractionHeaderProps): react_jsx_runtime.JSX.Element;
 
-interface ReceiveNFTActionProps extends BaseActionProps {
-    nft: {
+interface ProfileHeaderProps {
+    imageUrl: string;
+    title: string;
+    wallet: {
         imageURI: string;
-        name: string;
+        address: string;
     };
-    chain: {
+    amount: string;
+}
+declare function ProfileHeader({ imageUrl, title, wallet, amount, }: ProfileHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface SwapHeaderProps {
+    fromToken: {
         logoURI: string;
-        name: string;
+        bgColor: string;
     };
-    wallet: {
-        imageURI: string;
-        address: string;
-        url: string;
+    toToken: {
+        logoURI: string;
+        bgColor: string;
     };
-    timestamp: number;
+    title?: string;
     hash: string;
-    url: string;
+    url?: string;
+    status: ActionStatus;
 }
-declare function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }: ReceiveNFTActionProps): react_jsx_runtime.JSX.Element;
+declare function SwapHeader({ fromToken, toToken, title, hash, url, status, }: SwapHeaderProps): react_jsx_runtime.JSX.Element;
 
-interface ReceiveTokensActionProps extends BaseActionProps {
+declare const headerComponentsMap: {
+    readonly swap: typeof SwapHeader;
+    readonly buy_nft: typeof BuyNFTHeader;
+    readonly interaction: typeof InteractionHeader;
+    readonly bridge: typeof BridgeHeader;
+    readonly profile: typeof ProfileHeader;
+};
+type TransactionHeaderComponents = typeof headerComponentsMap;
+type TransactionHeaderType = keyof TransactionHeaderComponents;
+type TransactionHeaderProps = {
+    [Type in TransactionHeaderType]: {
+        type: Type;
+        props: ComponentProps<TransactionHeaderComponents[Type]>;
+    };
+}[TransactionHeaderType];
+declare function TransactionHeader({ type, props }: TransactionHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface TransactionHeaderLayoutProps {
+    isLoading?: boolean;
+    status?: ActionStatus;
+    title?: string;
+    image?: ReactNode;
+    children?: ReactNode;
+}
+declare function TransactionHeaderLayout({ isLoading, status, title, image, children, }: TransactionHeaderLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface BridgePropertiesProps {
     amount: string;
     token: {
         logoURI: string;
+        bgColor: string;
         symbol: string;
     };
-    chain: {
+    fromChain: {
         logoURI: string;
         name: string;
     };
-    wallet: {
-        imageURI: string;
-        address: string;
-        url: string;
+    toChain: {
+        logoURI: string;
+        name: string;
     };
-    timestamp: number;
-    hash: string;
-    url: string;
+    wallet: string;
+    boosted?: boolean;
+    timeToComplete: string;
 }
-declare function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }: ReceiveTokensActionProps): react_jsx_runtime.JSX.Element;
+declare function BridgeProperties({ amount, token, fromChain, toChain, wallet, boosted, timeToComplete, }: BridgePropertiesProps): react_jsx_runtime.JSX.Element;
 
-interface SendTokensActionProps extends BaseActionProps {
-    amount: string;
+interface BuyNFTPropertiesProps {
+    title: string;
+    imageURI: string;
+    collection: {
+        imageURI: string;
+        name: string;
+    };
+    price: string;
     token: {
         logoURI: string;
         symbol: string;
     };
-    chain: {
+    marketplace: {
         logoURI: string;
         name: string;
     };
-    wallet: {
-        imageURI: string;
-        address: string;
-        url: string;
-    };
-    timestamp: number;
-    hash: string;
-    url: string;
-}
-declare function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }: SendTokensActionProps): react_jsx_runtime.JSX.Element;
-
-interface StakeActionProps extends BaseActionProps {
-    token: {
+    fromChain: {
         logoURI: string;
-        symbol: string;
+        name: string;
     };
-    provider: {
+    toChain: {
         logoURI: string;
         name: string;
     };
-    timestamp: number;
-    hash: string;
-    url: string;
+    fromAddress: string;
+    toAddress: string;
+    boosted?: boolean;
+    timeToComplete: string;
+    tokenId: string;
+    nftType: string;
 }
-declare function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }: StakeActionProps): react_jsx_runtime.JSX.Element;
+declare function BuyNFTProperties({ title, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, }: BuyNFTPropertiesProps): react_jsx_runtime.JSX.Element;
 
-interface StartActionProps extends BaseActionProps {
-    timestamp?: number;
-    hash?: string;
-    url?: string;
+interface InteractionPropertiesProps {
+    chain: {
+        logoURI: string;
+        name: string;
+    };
+    wallet: string;
+    boosted?: boolean;
+    timeToComplete: string;
 }
-declare function StartAction({ status, nextStatus, showTimeline, showBody, timestamp, hash, url, }: StartActionProps): react_jsx_runtime.JSX.Element;
+declare function InteractionProperties({ chain, wallet, boosted, timeToComplete, }: InteractionPropertiesProps): react_jsx_runtime.JSX.Element;
 
-interface SuccessActionProps extends BaseActionProps {
-    description?: string;
-    timestamp?: number;
-    hash?: string;
-    url?: string;
+interface PropertiesLayoutProps {
+    children?: ReactNode;
+    className?: string;
 }
-declare function SuccessAction({ nextStatus, status, description, showTimeline, showBody, timestamp, hash, url, }: SuccessActionProps): react_jsx_runtime.JSX.Element;
+declare function PropertiesLayout({ children, className, }: PropertiesLayoutProps): react_jsx_runtime.JSX.Element;
 
-interface SwapActionProps extends BaseActionProps {
+interface SwapPropertiesProps {
+    fromAmount: string;
     fromToken: {
         logoURI: string;
+        bgColor: string;
         symbol: string;
     };
+    toAmount: string;
     toToken: {
         logoURI: string;
+        bgColor: string;
         symbol: string;
     };
-    provider: {
+    fromChain: {
         logoURI: string;
         name: string;
     };
-    timestamp?: number;
-    hash?: string;
-    url?: string;
-}
-declare function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: SwapActionProps): react_jsx_runtime.JSX.Element;
-
-interface WrapActionProps extends BaseActionProps {
-    fromToken: {
-        logoURI: string;
-        symbol: string;
-    };
-    toToken: {
-        logoURI: string;
-        symbol: string;
-    };
-    provider: {
+    toChain: {
         logoURI: string;
         name: string;
     };
-    timestamp?: number;
-    hash?: string;
-    url?: string;
+    fromAddress: string;
+    toAddress: string;
+    exchangeRate: string;
+    boosted?: boolean;
+    timeToComplete: string;
 }
-declare function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: WrapActionProps): react_jsx_runtime.JSX.Element;
+declare function SwapProperties({ fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, }: SwapPropertiesProps): react_jsx_runtime.JSX.Element;
 
-declare const actionComponentMap: {
-    readonly success: typeof SuccessAction;
-    readonly receive_tokens: typeof ReceiveTokensAction;
-    readonly receive_nft: typeof ReceiveNFTAction;
-    readonly approve: typeof ApproveAction;
-    readonly send_tokens: typeof SendTokensAction;
-    readonly swap: typeof SwapAction;
-    readonly bridge: typeof BridgeAction;
-    readonly wrap: typeof WrapAction;
-    readonly stake: typeof StakeAction;
-    readonly start: typeof StartAction;
-    readonly fees: typeof FeesAction;
-    readonly incomplete: typeof IncompleteAction;
+declare const propertiesComponentsMap: {
+    readonly swap: typeof SwapProperties;
+    readonly buy_nft: typeof BuyNFTProperties;
+    readonly interaction: typeof InteractionProperties;
+    readonly bridge: typeof BridgeProperties;
 };
-type TransactionActionComponents = typeof actionComponentMap;
-type TransactionActionType = keyof TransactionActionComponents;
-type TransactionActionProps = {
-    [Type in TransactionActionType]: {
+type TransactionPropertiesComponents = typeof propertiesComponentsMap;
+type TransactionPropertiesType = keyof TransactionPropertiesComponents;
+type TransactionPropertiesProps = {
+    [Type in TransactionPropertiesType]: {
         type: Type;
-        props: ComponentProps<TransactionActionComponents[Type]>;
+        props: ComponentProps<TransactionPropertiesComponents[Type]>;
     };
-}[TransactionActionType];
-declare function TransactionAction({ type, props }: TransactionActionProps): react_jsx_runtime.JSX.Element;
-
-declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
+}[TransactionPropertiesType];
+declare function TransactionProperties({ type, props, }: TransactionPropertiesProps): react_jsx_runtime.JSX.Element;
 
-type TransactionItemVariant = 'compact' | 'full';
-type TransactionItemType = {
-    icon?: ReactNode;
-    name: string;
-};
-interface TransactionItemProps {
+interface TransactionSearchProps {
+    query: string;
+    setQuery: (query: string) => void;
+    children?: ReactNode;
     className?: string;
-    isLoading?: boolean;
-    status?: ActionStatus;
-    image?: ReactNode;
-    type?: TransactionItemType;
-    hash?: string;
-    fromChain?: {
-        logoURI: string;
-        name: string;
-    };
-    toChain?: {
-        logoURI: string;
-        name: string;
-    };
-    fromAmount?: string;
-    toAmount?: string;
-    timestamp?: number;
-    variant?: TransactionItemVariant;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
-declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
+declare function TransactionSearch({ query, setQuery, children, className, onFocus, onBlur, }: TransactionSearchProps): react_jsx_runtime.JSX.Element;
 
-interface DropdownMenuProps {
-    dropdownRef?: React.RefObject<HTMLDivElement>;
-    menuRef?: React.RefObject<HTMLDivElement>;
-    items: DropdownMenuItemProps[];
+interface FromToProps {
+    isLoading?: boolean;
+    from?: ReactNode;
+    to?: ReactNode;
     className?: string;
-    isHidden?: boolean;
-    listClassName?: string;
-}
-declare function DropdownMenu({ dropdownRef, items, className, menuRef, isHidden, listClassName, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
-
-type ErrorMessageProps = {
-    message: string;
-    showIcon?: boolean;
-};
-declare function ErrorMessage({ message, showIcon }: ErrorMessageProps): react_jsx_runtime.JSX.Element;
-
-interface HashLinkProps {
-    showTx?: boolean;
-    hash: string;
-    children?: ReactNode;
-    showCopyButton?: boolean;
-    url?: string;
 }
-declare function HashLink({ showTx, hash, showCopyButton, url, children, }: HashLinkProps): react_jsx_runtime.JSX.Element;
+declare function Transfer({ isLoading, from, to, className }: FromToProps): react_jsx_runtime.JSX.Element;
 
-interface InfoBoxProps {
+interface ToastProps {
     title: string;
     description: string;
-    icon?: React.ReactNode;
+    headerContent?: React.ReactNode;
+    actionsContent?: React.ReactNode;
+    chipLabel?: string;
 }
-declare function InfoBox({ title, description, icon }: InfoBoxProps): react_jsx_runtime.JSX.Element;
+declare function Toast({ headerContent, actionsContent, description, chipLabel, title, }: ToastProps): react_jsx_runtime.JSX.Element;
 
-interface JoinProps {
-    children?: ReactNode;
-    glue: () => ReactNode;
-}
-declare function Join({ children, glue }: JoinProps): react_jsx_runtime.JSX.Element[] | null | undefined;
+type SquidTheme = {
+    "content-100": string;
+    "content-200": string;
+    "content-300": string;
+    "content-400": string;
+    "content-500": string;
+    "content-600": string;
+    "content-700": string;
+    "content-800": string;
+    "content-900": string;
+    "accent-300": string;
+    "accent-400": string;
+    "accent-500": string;
+    "accent-700": string;
+    "status-positive": string;
+    "status-negative": string;
+    "status-warning": string;
+    "highlight-700": string;
+};
 
-type Rounded = 'sm' | 'lg';
-interface MenuProps extends react__default.ComponentProps<'div'> {
-    containerClassName?: string;
-    contentClassName?: string;
-    rounded?: Rounded;
-    menuRef?: react__default.RefObject<HTMLDivElement>;
-    contentWrapperClassName?: string;
-}
-declare function Menu({ children, containerClassName, contentClassName, rounded, menuRef, contentWrapperClassName, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
+/**
+ * Utility type to allow for a type to be either all of the properties of another type, or none of them
+ * @example
+ * type Person = { age: number } & AllOrNone<{ name: string, lastName: string }>
+ * const person: Person = { age: 30 } // ok
+ * const person: Person = { age: 30, name: "John" } // error, requires lastName
+ * const person: Person = { age: 30, name: "John", lastName: "Doe" } // ok, all properties are present
+ */
+type AllOrNone<T> = T | {
+    [K in keyof T]?: never;
+};
 
-type ModalWidth = 'large' | 'extra-large';
-interface ModalProps {
-    children: React.ReactNode;
-    className?: string;
-    onBackdropClick?: () => void;
-    isOpen?: boolean;
-    maxHeight?: boolean;
-    width?: ModalWidth;
+interface DropdownMenuItemControl extends Omit<SwitchProps, "size"> {
+    type: "switch";
 }
-declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, }: ModalProps): false | react_jsx_runtime.JSX.Element;
-
-type ModalContentBorderType = 'border' | 'outline';
-interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DropdownMenuItemProps {
+    label: string;
+    labelClassName?: string;
+    imageUrl?: string;
+    icon?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    link?: string;
+    control?: DropdownMenuItemControl;
+    detail?: React.ReactNode;
+    isSelected?: boolean;
+    itemRef?: React.RefObject<HTMLLIElement>;
     children?: React.ReactNode;
-    addGap?: boolean;
-    paddingY?: boolean;
-    borderType?: ModalContentBorderType;
-    className?: string;
+    contentRef?: React.RefObject<HTMLButtonElement>;
 }
-declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
-declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem(props: DropdownMenuItemProps & AllOrNone<{
+    submenu: React.ReactNode;
+    containerRef: React.RefObject<HTMLDivElement>;
+}>): react_jsx_runtime.JSX.Element;
 
-type ActionButton = {
-    labelOrIcon: string | React.ReactNode;
-    onClick?: () => void;
-    id: React.Key;
-    tooltip?: Omit<TooltipProps, 'children'>;
-    chip?: ChipProps;
-};
-interface NavigationBarProps extends React.ComponentProps<'nav'> {
-    title?: string;
-    displayBackButton?: boolean;
-    logoUrl?: string;
-    transparent?: boolean;
-    displayButtonShadows?: boolean;
-    onBackButtonClick?: () => void;
-    actions?: ActionButton[];
-    isLoading?: boolean;
+interface HistoryItemProps {
+    firstImageUrl: string;
+    secondImageUrl: string;
+    status: HistoryItemStatus;
+    fromLabel: string;
+    toLabel: string;
+    dateCompleted: string;
+    fromAmount: string;
+    toAmount: string;
+    itemsContainerRef?: React.RefObject<HTMLElement>;
+    onClick?: () => void;
+    warningLabel?: string;
+    dropdownMenuContent?: React.ReactNode;
 }
-declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, ...props }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
-declare function PipeSeparator({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-
-interface CollapsibleMenuProps {
-    menuRef: React.MutableRefObject<HTMLDivElement | null>;
-    size: {
-        open: {
-            width: string;
-            height: string;
-        };
-        closed: {
-            width: string;
-            height: string;
-        };
-    };
-    children?: React.ReactNode;
-    isOpen?: boolean;
-    transitionDuration?: React.CSSProperties['transitionDuration'];
+interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    itemTitle: string | React.ReactNode;
+    mainImageUrl?: string;
+    secondaryImageUrl?: string;
+    placeholderImageUrl?: string;
+    subtitle?: string;
+    subtitleOnHover?: React.ReactNode;
+    detail?: string;
+    icon?: React.ReactNode;
+    size?: ListItemSize;
+    mainIcon?: React.ReactNode;
+    isSelected?: boolean;
     className?: string;
+    onDetailClick?: () => void;
+    showDetailOnHoverOnly?: boolean;
+    rounded?: boolean;
+    detailButtonClassName?: string;
+    loading?: {
+        subtitle?: boolean | string;
+    };
+    containerProps?: React.HTMLAttributes<HTMLLIElement>;
+    compactOnMobile?: boolean;
+    extraPadding?: boolean;
+    dropdownMenuContent?: React.ReactNode;
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-declare function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }: CollapsibleMenuProps): react_jsx_runtime.JSX.Element;
-
-declare function ProductCard({ children }: React.PropsWithChildren): react_jsx_runtime.JSX.Element;
-declare function BorderedContainer({ children, className, }: {
-    children: React.ReactNode;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
+type ListItemSize = "small" | "large";
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare const ListItemActionsButton: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+    isActive?: boolean | undefined;
+}, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-declare function ProfileHeaderBackground(): react_jsx_runtime.JSX.Element;
+interface MenuItemProps {
+    label: string;
+    imageUrl?: string;
+    icon?: React.ReactNode;
+}
+declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
 
-interface SwapConfigurationProps {
-    direction: SwapDirection;
-    priceImpactPercentage?: string;
-    amount?: string;
-    tokenPrice?: number;
-    balance?: string;
-    isFetching?: boolean;
-    chain?: {
-        iconUrl: string;
-        bgColor: string;
-    };
-    token?: {
-        iconUrl: string;
-        symbol: string;
-        bgColor: string;
-        textColor: string;
-        decimals: number;
-    };
-    onAmountChange?: (amount: string) => void;
-    error?: {
-        message: string;
-    };
-    criticalPriceImpactPercentage?: number;
-    maxUsdDecimals?: number;
-    isInputInteractive?: boolean;
+interface PropertyListItemProps extends ComponentProps<"li"> {
     isLoading?: boolean;
-    inputModeButton?: {
-        usdModeTooltip?: Omit<TooltipProps, 'children'>;
-        tokenModeTooltip?: Omit<TooltipProps, 'children'>;
-        amountUsd?: string;
-    };
-    balanceButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
-    };
-    assetsButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
-        onClick?: () => void;
-        variant?: AssetsButtonVariant;
-    };
-    walletButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
-        onClick?: () => void;
-        address?: string;
-        emptyAddressLabel?: string;
-        disabled?: boolean;
-    };
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    detail?: React.ReactNode;
+    variant?: PropertyListItemSize;
+    showGradientBg?: boolean;
+    labelClassName?: string;
+    iconClassName?: string;
+    detailClassName?: string;
 }
-declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, ...props }: PropertyListItemProps): react_jsx_runtime.JSX.Element;
 
-interface SwapProgressViewHeaderProps {
+interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
-    description: string;
+    icon?: React.ReactNode;
+    accessory?: string | null;
+    actionIcon?: React.ReactNode;
+    className?: string;
 }
-declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
-type SwapStepsCollapsedFooterButton = {
+type SettingsControl = {
+    type: "percentage";
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    min?: number;
+    max?: number;
+    decimalsFormat?: number;
+    resetValueControl: {
+        label: string;
+        onSelect: () => void;
+        value: number | undefined;
+    };
+} | {
+    type: "amount";
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    options: {
+        value: number;
+    }[];
+    decimalsFormat?: number;
+    resetValueControl: {
+        label: string;
+        value: number | undefined;
+    };
+} | {
+    type: "switch";
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: Omit<TooltipProps, "children">;
+    disabled?: boolean;
+} | {
+    type: "options";
+    selectedLabel: string;
+    options: {
+        label: string;
+        onSelect: () => void;
+    }[];
+};
+interface SettingsItemProps {
+    icon: React.ReactNode;
     label: string;
+    control?: SettingsControl;
     link?: string;
-    onClick?: () => void;
-};
-interface SwapStepsCollapsedProps {
-    steps: SwapStep[];
-    currentStepIndex: number;
-    onOpen?: () => void;
-    onClose?: () => void;
-    footerButton?: SwapStepsCollapsedFooterButton;
+    transparent?: boolean;
+    helpTooltip?: Omit<TooltipProps, "children">;
 }
-declare const SwapStepsCollapsed: react.ForwardRefExoticComponent<SwapStepsCollapsedProps & react.RefAttributes<{
-    handleToggleRouteSteps: () => void;
-}>>;
+declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
 
-interface TokenPairProps {
-    firstToken?: {
-        logoURI: string;
-        bgColor: string;
+interface SwapStepItemProps {
+    descriptionBlocks: DescriptionBlock[];
+    showStepSeparator?: boolean;
+    link?: string;
+    status?: ActionStatus;
+}
+declare const STEP_ITEM_HEIGHT = 52;
+declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
+
+interface ActionLayoutProps {
+    lineCap?: ReactNode;
+    status?: ActionStatus;
+    showTimeline?: boolean;
+    statusIcon?: ReactNode;
+    nextStatus?: ActionStatus;
+    description?: ReactNode;
+    title?: string;
+    icon?: ReactNode;
+    children?: ReactNode;
+    showBody?: boolean;
+}
+declare function ActionLayout({ lineCap, status, showTimeline, showBody, nextStatus, statusIcon, description, title, icon, children, }: ActionLayoutProps): react_jsx_runtime.JSX.Element;
+interface ActionPropertiesProps {
+    timestamp?: number;
+    hash?: string;
+    url?: string;
+}
+declare function ActionProperties({ timestamp, hash, url, }: ActionPropertiesProps): react_jsx_runtime.JSX.Element;
+declare const ActionLineOutRow: ({ status }: {
+    status?: ActionStatus;
+}) => react_jsx_runtime.JSX.Element;
+declare const ActionStatusRow: ({ children, status, icon, }: {
+    children?: ReactNode;
+    status: ActionStatus;
+    icon?: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+declare function ActionRow({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ActionWrapper({ children, status, className, }: {
+    children?: ReactNode;
+    status?: ActionStatus;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface TimestampProps {
+    time: number;
+}
+declare function Timestamp({ time }: TimestampProps): react_jsx_runtime.JSX.Element;
+
+interface BaseActionProps {
+    status: ActionStatus;
+    /** if set, renders a line upwards to the next item in the status color */
+    nextStatus?: ActionStatus;
+    /** should we render a line down to the previous item? (default true) */
+    showTimeline?: boolean;
+    /** if false, fades out everything but the status line (for collapsed timeline state) */
+    showBody?: boolean;
+}
+
+interface ApproveActionProps extends BaseActionProps {
+    profile: {
+        imageURI: string;
+        label: string;
     };
-    secondToken?: {
+    chain: {
         logoURI: string;
-        bgColor: string;
+        name: string;
     };
-    variant?: TokenPairVariant;
-    size?: TokenPairSize;
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
+    };
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
-declare function TokenPair({ firstToken, secondToken, variant, size, }: TokenPairProps): react_jsx_runtime.JSX.Element;
+declare function ApproveAction({ status, nextStatus, showTimeline, showBody, profile, chain, wallet, timestamp, hash, url, }: ApproveActionProps): react_jsx_runtime.JSX.Element;
 
-interface TransactionFiltersProps {
-    chainType?: ChainTypeFilter;
-    setChainType: (chainType: ChainTypeFilter) => void;
-    chain?: string;
-    setChain: (chain?: string) => void;
-    fromDate?: Date;
-    setFromDate: (fromDate?: Date) => void;
-    toDate?: Date;
-    setToDate: (toDate?: Date) => void;
-    status?: StatusFilter[];
-    setStatus: (status?: StatusFilter[]) => void;
-    chains: {
+interface BridgeActionProps extends BaseActionProps {
+    token: {
+        logoURI: string;
+        symbol: string;
+    };
+    chain: {
+        logoURI: string;
         name: string;
+    };
+    provider: {
         logoURI: string;
-    }[];
+        name: string;
+    };
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
-declare function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status, setStatus, chains, }: TransactionFiltersProps): react_jsx_runtime.JSX.Element;
+declare function BridgeAction({ status, nextStatus, showTimeline, showBody, token, chain, provider, timestamp, hash, url, }: BridgeActionProps): react_jsx_runtime.JSX.Element;
 
-interface BridgeHeaderProps {
-    tokenLogoURI: string;
-    chainLogoURI: string;
-    title?: string;
-    hash: string;
-    url?: string;
+interface FeesActionProps extends BaseActionProps {
+    total: FeesRowProps;
+    lines?: FeesRowProps[];
+}
+declare function FeesAction({ status, nextStatus, showTimeline, total, lines, }: FeesActionProps): react_jsx_runtime.JSX.Element;
+interface FeesTotalProps {
     status: ActionStatus;
+    nextStatus?: ActionStatus;
+    total: FeesRowProps;
+    showTimeline?: boolean;
+    collapsed?: boolean;
 }
-declare function BridgeHeader({ tokenLogoURI, chainLogoURI, title, hash, url, status, }: BridgeHeaderProps): react_jsx_runtime.JSX.Element;
-
-interface BuyNFTHeaderProps {
-    imageUrl: string;
-    title?: string;
-    hash: string;
-    url?: string;
+declare function FeesTotal({ status, nextStatus, total, showTimeline, collapsed, }: FeesTotalProps): react_jsx_runtime.JSX.Element;
+interface FeesLinesProps {
     status: ActionStatus;
+    lines?: FeesRowProps[];
+    showTimeline?: boolean;
+}
+declare function FeesLines({ status, lines, showTimeline, }: FeesLinesProps): react_jsx_runtime.JSX.Element;
+interface FeesRowProps {
+    label: string;
+    amount: number | string;
+    symbol: string;
+    usd: number | string;
+    collapsed?: boolean;
 }
-declare function BuyNFTHeader({ imageUrl, title, hash, url, status, }: BuyNFTHeaderProps): react_jsx_runtime.JSX.Element;
 
-interface InteractionHeaderProps {
-    title?: string;
-    image?: ReactNode;
-    hash: string;
-    url?: string;
-    status: ActionStatus;
+interface IncompleteActionProps extends BaseActionProps {
+    message: string;
+    buttons: ReactNode;
 }
-declare function InteractionHeader({ title, image, hash, url, status, }: InteractionHeaderProps): react_jsx_runtime.JSX.Element;
+declare function IncompleteAction({ status, nextStatus, message, buttons, }: IncompleteActionProps): react_jsx_runtime.JSX.Element;
 
-interface ProfileHeaderProps {
-    imageUrl: string;
-    title: string;
+interface ReceiveNFTActionProps extends BaseActionProps {
+    nft: {
+        imageURI: string;
+        name: string;
+    };
+    chain: {
+        logoURI: string;
+        name: string;
+    };
     wallet: {
         imageURI: string;
         address: string;
+        url: string;
     };
-    amount: string;
+    timestamp: number;
+    hash: string;
+    url: string;
 }
-declare function ProfileHeader({ imageUrl, title, wallet, amount, }: ProfileHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ReceiveNFTAction({ status, nextStatus, showTimeline, showBody, nft, chain, wallet, timestamp, hash, url, }: ReceiveNFTActionProps): react_jsx_runtime.JSX.Element;
 
-interface SwapHeaderProps {
-    fromToken: {
+interface ReceiveTokensActionProps extends BaseActionProps {
+    amount: string;
+    token: {
         logoURI: string;
-        bgColor: string;
+        symbol: string;
     };
-    toToken: {
+    chain: {
         logoURI: string;
-        bgColor: string;
+        name: string;
     };
-    title?: string;
-    hash: string;
-    url?: string;
-    status: ActionStatus;
-}
-declare function SwapHeader({ fromToken, toToken, title, hash, url, status, }: SwapHeaderProps): react_jsx_runtime.JSX.Element;
-
-declare const headerComponentsMap: {
-    readonly swap: typeof SwapHeader;
-    readonly buy_nft: typeof BuyNFTHeader;
-    readonly interaction: typeof InteractionHeader;
-    readonly bridge: typeof BridgeHeader;
-    readonly profile: typeof ProfileHeader;
-};
-type TransactionHeaderComponents = typeof headerComponentsMap;
-type TransactionHeaderType = keyof TransactionHeaderComponents;
-type TransactionHeaderProps = {
-    [Type in TransactionHeaderType]: {
-        type: Type;
-        props: ComponentProps<TransactionHeaderComponents[Type]>;
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
     };
-}[TransactionHeaderType];
-declare function TransactionHeader({ type, props }: TransactionHeaderProps): react_jsx_runtime.JSX.Element;
-
-interface TransactionHeaderLayoutProps {
-    isLoading?: boolean;
-    status?: ActionStatus;
-    title?: string;
-    image?: ReactNode;
-    children?: ReactNode;
+    timestamp: number;
+    hash: string;
+    url: string;
 }
-declare function TransactionHeaderLayout({ isLoading, status, title, image, children, }: TransactionHeaderLayoutProps): react_jsx_runtime.JSX.Element;
+declare function ReceiveTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }: ReceiveTokensActionProps): react_jsx_runtime.JSX.Element;
 
-interface BridgePropertiesProps {
+interface SendTokensActionProps extends BaseActionProps {
     amount: string;
     token: {
         logoURI: string;
-        bgColor: string;
         symbol: string;
     };
-    fromChain: {
+    chain: {
         logoURI: string;
         name: string;
     };
-    toChain: {
-        logoURI: string;
-        name: string;
+    wallet: {
+        imageURI: string;
+        address: string;
+        url: string;
     };
-    wallet: string;
-    boosted?: boolean;
-    timeToComplete: string;
+    timestamp: number;
+    hash: string;
+    url: string;
 }
-declare function BridgeProperties({ amount, token, fromChain, toChain, wallet, boosted, timeToComplete, }: BridgePropertiesProps): react_jsx_runtime.JSX.Element;
+declare function SendTokensAction({ status, nextStatus, showTimeline, showBody, token, amount, chain, wallet, timestamp, hash, url, }: SendTokensActionProps): react_jsx_runtime.JSX.Element;
 
-interface BuyNFTPropertiesProps {
-    title: string;
-    imageURI: string;
-    collection: {
-        imageURI: string;
-        name: string;
-    };
-    price: string;
+interface StakeActionProps extends BaseActionProps {
     token: {
         logoURI: string;
         symbol: string;
     };
-    marketplace: {
-        logoURI: string;
-        name: string;
-    };
-    fromChain: {
-        logoURI: string;
-        name: string;
-    };
-    toChain: {
+    provider: {
         logoURI: string;
         name: string;
     };
-    fromAddress: string;
-    toAddress: string;
-    boosted?: boolean;
-    timeToComplete: string;
-    tokenId: string;
-    nftType: string;
+    timestamp: number;
+    hash: string;
+    url: string;
 }
-declare function BuyNFTProperties({ title, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, }: BuyNFTPropertiesProps): react_jsx_runtime.JSX.Element;
+declare function StakeAction({ status, nextStatus, showTimeline, showBody, token, provider, timestamp, hash, url, }: StakeActionProps): react_jsx_runtime.JSX.Element;
 
-interface InteractionPropertiesProps {
-    chain: {
-        logoURI: string;
-        name: string;
-    };
-    wallet: string;
-    boosted?: boolean;
-    timeToComplete: string;
+interface StartActionProps extends BaseActionProps {
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
-declare function InteractionProperties({ chain, wallet, boosted, timeToComplete, }: InteractionPropertiesProps): react_jsx_runtime.JSX.Element;
+declare function StartAction({ status, nextStatus, showTimeline, showBody, timestamp, hash, url, }: StartActionProps): react_jsx_runtime.JSX.Element;
 
-interface PropertiesLayoutProps {
-    children?: ReactNode;
-    className?: string;
+interface SuccessActionProps extends BaseActionProps {
+    description?: string;
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
-declare function PropertiesLayout({ children, className, }: PropertiesLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SuccessAction({ nextStatus, status, description, showTimeline, showBody, timestamp, hash, url, }: SuccessActionProps): react_jsx_runtime.JSX.Element;
 
-interface SwapPropertiesProps {
-    fromAmount: string;
+interface SwapActionProps extends BaseActionProps {
     fromToken: {
         logoURI: string;
-        bgColor: string;
         symbol: string;
     };
-    toAmount: string;
     toToken: {
         logoURI: string;
-        bgColor: string;
         symbol: string;
     };
-    fromChain: {
+    provider: {
         logoURI: string;
         name: string;
     };
-    toChain: {
+    timestamp?: number;
+    hash?: string;
+    url?: string;
+}
+declare function SwapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: SwapActionProps): react_jsx_runtime.JSX.Element;
+
+interface WrapActionProps extends BaseActionProps {
+    fromToken: {
+        logoURI: string;
+        symbol: string;
+    };
+    toToken: {
+        logoURI: string;
+        symbol: string;
+    };
+    provider: {
         logoURI: string;
         name: string;
     };
-    fromAddress: string;
-    toAddress: string;
-    exchangeRate: string;
-    boosted?: boolean;
-    timeToComplete: string;
+    timestamp?: number;
+    hash?: string;
+    url?: string;
 }
-declare function SwapProperties({ fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, }: SwapPropertiesProps): react_jsx_runtime.JSX.Element;
+declare function WrapAction({ status, nextStatus, showTimeline, showBody, fromToken, toToken, provider, timestamp, hash, url, }: WrapActionProps): react_jsx_runtime.JSX.Element;
 
-declare const propertiesComponentsMap: {
-    readonly swap: typeof SwapProperties;
-    readonly buy_nft: typeof BuyNFTProperties;
-    readonly interaction: typeof InteractionProperties;
-    readonly bridge: typeof BridgeProperties;
+declare const actionComponentMap: {
+    readonly success: typeof SuccessAction;
+    readonly receive_tokens: typeof ReceiveTokensAction;
+    readonly receive_nft: typeof ReceiveNFTAction;
+    readonly approve: typeof ApproveAction;
+    readonly send_tokens: typeof SendTokensAction;
+    readonly swap: typeof SwapAction;
+    readonly bridge: typeof BridgeAction;
+    readonly wrap: typeof WrapAction;
+    readonly stake: typeof StakeAction;
+    readonly start: typeof StartAction;
+    readonly fees: typeof FeesAction;
+    readonly incomplete: typeof IncompleteAction;
 };
-type TransactionPropertiesComponents = typeof propertiesComponentsMap;
-type TransactionPropertiesType = keyof TransactionPropertiesComponents;
-type TransactionPropertiesProps = {
-    [Type in TransactionPropertiesType]: {
+type TransactionActionComponents = typeof actionComponentMap;
+type TransactionActionType = keyof TransactionActionComponents;
+type TransactionActionProps = {
+    [Type in TransactionActionType]: {
         type: Type;
-        props: ComponentProps<TransactionPropertiesComponents[Type]>;
+        props: ComponentProps<TransactionActionComponents[Type]>;
     };
-}[TransactionPropertiesType];
-declare function TransactionProperties({ type, props, }: TransactionPropertiesProps): react_jsx_runtime.JSX.Element;
+}[TransactionActionType];
+declare function TransactionAction({ type, props }: TransactionActionProps): react_jsx_runtime.JSX.Element;
 
-interface TransactionSearchProps {
-    query: string;
-    setQuery: (query: string) => void;
-    children?: ReactNode;
+declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
+
+type TransactionItemVariant = "compact" | "full";
+type TransactionItemType = {
+    icon?: ReactNode;
+    name: string;
+};
+interface TransactionItemProps {
     className?: string;
-    onFocus?: () => void;
-    onBlur?: () => void;
+    isLoading?: boolean;
+    status?: ActionStatus;
+    image?: ReactNode;
+    type?: TransactionItemType;
+    hash?: string;
+    fromChain?: {
+        logoURI: string;
+        name: string;
+    };
+    toChain?: {
+        logoURI: string;
+        name: string;
+    };
+    fromAmount?: string;
+    toAmount?: string;
+    timestamp?: number;
+    variant?: TransactionItemVariant;
 }
-declare function TransactionSearch({ query, setQuery, children, className, onFocus, onBlur, }: TransactionSearchProps): react_jsx_runtime.JSX.Element;
+declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
 
-interface FromToProps {
-    isLoading?: boolean;
-    from?: ReactNode;
-    to?: ReactNode;
-    className?: string;
+interface RouteStepProps {
+    imageUrl: string;
+    descriptionBlocks: DescriptionBlock[];
+    subtitle: string;
+    showStepSeparator?: boolean;
 }
-declare function Transfer({ isLoading, from, to, className }: FromToProps): react_jsx_runtime.JSX.Element;
+declare function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator, }: RouteStepProps): react_jsx_runtime.JSX.Element;
 
-interface ToastProps {
+declare function DropdownMenuTitle({ title }: {
     title: string;
-    description: string;
-    headerContent?: React.ReactNode;
-    actionsContent?: React.ReactNode;
-    chipLabel?: string;
-}
-declare function Toast({ headerContent, actionsContent, description, chipLabel, title, }: ToastProps): react_jsx_runtime.JSX.Element;
+}): react_jsx_runtime.JSX.Element;
 
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
@@ -2228,7 +2368,7 @@ declare function MainView({ isLoading }: {
     isLoading?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-type WalletViewType = 'paymentMethod' | 'recipientEmpty' | 'recipientTypingEns' | 'recipientTypingAddress';
+type WalletViewType = "paymentMethod" | "recipientEmpty" | "recipientTypingEns" | "recipientTypingAddress";
 interface WalletsViewProps {
     type: WalletViewType;
 }
@@ -2389,7 +2529,7 @@ type TransactionViewProps = {
 }[TransactionViewType];
 declare function TransactionView({ type, props }: TransactionViewProps): react_jsx_runtime.JSX.Element;
 
-interface TransactionViewLayoutProps extends ComponentProps<'div'> {
+interface TransactionViewLayoutProps extends ComponentProps<"div"> {
     isLoading?: boolean;
     header?: ReactNode;
     properties?: ReactNode;
@@ -2400,40 +2540,30 @@ declare function TransactionViewLayout({ isLoading, header, properties, actions,
 
 declare function WalletsView(): react_jsx_runtime.JSX.Element;
 
-type SquidTheme = {
-    'content-100': string;
-    'content-200': string;
-    'content-300': string;
-    'content-400': string;
-    'content-500': string;
-    'content-600': string;
-    'content-700': string;
-    'content-800': string;
-    'content-900': string;
-    'accent-300': string;
-    'accent-400': string;
-    'accent-500': string;
-    'accent-700': string;
-    'status-positive': string;
-    'status-negative': string;
-    'status-warning': string;
-    'highlight-700': string;
-};
-
 declare function SquidConfigProvider({ theme, children, themeType, }: {
     theme?: SquidTheme;
     children?: React.ReactNode;
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useDropdownMenu(props?: {
+type DropdownPosition = "top" | "bottom" | "center";
+type DropdownStyles = {
+    position: DropdownPosition;
+    maxHeight: number | null;
+};
+interface UseDropdownMenuParams {
     initialIsModalOpen?: boolean;
-}): {
+    itemsContainerRef?: react__default.RefObject<HTMLElement>;
+}
+declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     isDropdownOpen: boolean;
     openDropdown: () => void;
     closeDropdown: () => void;
-    dropdownRef: React.RefObject<HTMLDivElement>;
-    openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+    dropdownRef: react__default.RefObject<HTMLDivElement>;
+    openDropdownButtonRef: react__default.RefObject<HTMLButtonElement>;
+    dropdownStyles: DropdownStyles | null;
+    itemRef: react__default.RefObject<HTMLLIElement>;
+    menuRef: react__default.RefObject<HTMLDivElement>;
 };
 
 type UseMediaQueryOptions = {
@@ -2502,7 +2632,7 @@ declare const CSS_VARS: {
     COLLAPSIBLE_MENU_CLOSED_WIDTH: string;
     COLLAPSIBLE_MENU_CLOSED_HEIGHT: string;
 };
-type MediaQuery = 'MOBILE_LG' | 'MOBILE_SM_HEIGHT' | 'MOBILE_XS' | 'MOBILE_XS_HEIGHT';
+type MediaQuery = "MOBILE_LG" | "MOBILE_SM_HEIGHT" | "MOBILE_XS" | "MOBILE_XS_HEIGHT";
 declare const MEDIA_QUERIES: Record<MediaQuery, {
     media: string;
     key: string;
@@ -2524,4 +2654,4 @@ declare const baseTailwindConfig: Config;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };