@0xsquid/ui 0.26.0 → 0.27.0

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,17 +52,18 @@ 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 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 DropdownPosition = "top" | "bottom" | "center";
 
 interface IconLabelProps {
     isLoading?: boolean;
@@ -89,12 +90,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 +151,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 +190,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;
@@ -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,7 +296,7 @@ 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;
@@ -365,6 +366,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;
 
@@ -433,7 +446,11 @@ declare function StocksIcon({ size, className, }: {
 
 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 +482,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 +571,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;
@@ -640,7 +657,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 +685,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;
 
@@ -1238,7 +1255,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,51 +1264,53 @@ 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;
@@ -1299,8 +1318,9 @@ interface DropdownMenuItemProps {
     imageUrl?: string;
     icon?: React.ReactNode;
     onClick?: () => void;
+    link?: string;
 }
-declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ label, imageUrl, icon, labelClassName, onClick, link, }: DropdownMenuItemProps): react_jsx_runtime.JSX.Element;
 
 interface HistoryItemProps {
     firstImageUrl: string;
@@ -1316,7 +1336,7 @@ interface HistoryItemProps {
     onClick?: () => void;
     warningLabel?: string;
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuItems: _dropdownMenuItemsProp, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
@@ -1341,9 +1361,12 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
     compactOnMobile?: boolean;
     extraPadding?: boolean;
+    dropdownMenuItems?: DropdownMenuItemProps[];
+    itemsContainerRef?: React.RefObject<HTMLElement>;
 }
-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;
+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, dropdownMenuItems: _dropdownMenuItemsProp, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare const ListItemActionsButton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 interface MenuItemProps {
     label: string;
@@ -1352,14 +1375,18 @@ interface MenuItemProps {
 }
 declare function MenuItem({ label, imageUrl, icon }: MenuItemProps): react_jsx_runtime.JSX.Element;
 
-interface PropertyListItemProps extends ComponentProps<'li'> {
+interface PropertyListItemProps extends ComponentProps<"li"> {
     isLoading?: boolean;
     label?: React.ReactNode;
     icon?: React.ReactNode;
     detail?: React.ReactNode;
     variant?: PropertyListItemSize;
+    showGradientBg?: boolean;
+    labelClassName?: string;
+    iconClassName?: string;
+    detailClassName?: string;
 }
-declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, ...props }: PropertyListItemProps): 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 SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
@@ -1371,7 +1398,7 @@ interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function SectionTitle({ title, icon, accessory, actionIcon, className, ...props }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
 type SettingsControl = {
-    type: 'percentage';
+    type: "percentage";
     value: number | undefined;
     onChange: (value: number | undefined) => void;
     min?: number;
@@ -1383,7 +1410,7 @@ type SettingsControl = {
         value: number | undefined;
     };
 } | {
-    type: 'amount';
+    type: "amount";
     value: number | undefined;
     onChange: (value: number | undefined) => void;
     options: {
@@ -1395,13 +1422,13 @@ type SettingsControl = {
         value: number | undefined;
     };
 } | {
-    type: 'switch';
+    type: "switch";
     checked: boolean;
     onChange: (checked: boolean) => void;
-    tooltip?: Omit<TooltipProps, 'children'>;
+    tooltip?: Omit<TooltipProps, "children">;
     disabled?: boolean;
 } | {
-    type: 'options';
+    type: "options";
     selectedLabel: string;
     options: {
         label: string;
@@ -1414,7 +1441,7 @@ interface SettingsItemProps {
     control?: SettingsControl;
     link?: string;
     transparent?: boolean;
-    helpTooltip?: Omit<TooltipProps, 'children'>;
+    helpTooltip?: Omit<TooltipProps, "children">;
 }
 declare function SettingsItem({ icon, label, control, link, transparent, helpTooltip, }: SettingsItemProps): react_jsx_runtime.JSX.Element;
 
@@ -1454,7 +1481,7 @@ declare const ActionStatusRow: ({ children, status, icon, }: {
     status: ActionStatus;
     icon?: ReactNode;
 }) => react_jsx_runtime.JSX.Element;
-declare function ActionRow({ className, ...props }: ComponentProps<'div'>): 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;
@@ -1703,7 +1730,7 @@ declare function TransactionAction({ type, props }: TransactionActionProps): rea
 
 declare function linkActionTimelineProps(actions: TransactionActionProps[], collapsed: boolean): TransactionActionProps[];
 
-type TransactionItemVariant = 'compact' | 'full';
+type TransactionItemVariant = "compact" | "full";
 type TransactionItemType = {
     icon?: ReactNode;
     name: string;
@@ -1730,6 +1757,14 @@ interface TransactionItemProps {
 }
 declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
 
+interface RouteStepProps {
+    imageUrl: string;
+    descriptionBlocks: DescriptionBlock[];
+    subtitle: string;
+    showStepSeparator?: boolean;
+}
+declare function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator, }: RouteStepProps): react_jsx_runtime.JSX.Element;
+
 interface DropdownMenuProps {
     dropdownRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
@@ -1768,8 +1803,8 @@ interface JoinProps {
 }
 declare function Join({ children, glue }: JoinProps): react_jsx_runtime.JSX.Element[] | null | undefined;
 
-type Rounded = 'sm' | 'lg';
-interface MenuProps extends react__default.ComponentProps<'div'> {
+type Rounded = "sm" | "lg";
+interface MenuProps extends react__default.ComponentProps<"div"> {
     containerClassName?: string;
     contentClassName?: string;
     rounded?: Rounded;
@@ -1778,7 +1813,7 @@ interface MenuProps extends react__default.ComponentProps<'div'> {
 }
 declare function Menu({ children, containerClassName, contentClassName, rounded, menuRef, contentWrapperClassName, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
 
-type ModalWidth = 'large' | 'extra-large';
+type ModalWidth = "large" | "extra-large";
 interface ModalProps {
     children: React.ReactNode;
     className?: string;
@@ -1789,7 +1824,7 @@ interface ModalProps {
 }
 declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
-type ModalContentBorderType = 'border' | 'outline';
+type ModalContentBorderType = "border" | "outline";
 interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     addGap?: boolean;
@@ -1804,10 +1839,10 @@ type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
     id: React.Key;
-    tooltip?: Omit<TooltipProps, 'children'>;
+    tooltip?: Omit<TooltipProps, "children">;
     chip?: ChipProps;
 };
-interface NavigationBarProps extends React.ComponentProps<'nav'> {
+interface NavigationBarProps extends React.ComponentProps<"nav"> {
     title?: string;
     displayBackButton?: boolean;
     logoUrl?: string;
@@ -1819,7 +1854,7 @@ interface NavigationBarProps extends React.ComponentProps<'nav'> {
 }
 declare function NavigationBar({ title, displayBackButton, logoUrl, transparent, displayButtonShadows, onBackButtonClick, actions, isLoading, ...props }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
-declare function PipeSeparator({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 interface CollapsibleMenuProps {
     menuRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -1835,7 +1870,7 @@ interface CollapsibleMenuProps {
     };
     children?: React.ReactNode;
     isOpen?: boolean;
-    transitionDuration?: React.CSSProperties['transitionDuration'];
+    transitionDuration?: React.CSSProperties["transitionDuration"];
     className?: string;
 }
 declare function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }: CollapsibleMenuProps): react_jsx_runtime.JSX.Element;
@@ -1875,20 +1910,20 @@ interface SwapConfigurationProps {
     isInputInteractive?: boolean;
     isLoading?: boolean;
     inputModeButton?: {
-        usdModeTooltip?: Omit<TooltipProps, 'children'>;
-        tokenModeTooltip?: Omit<TooltipProps, 'children'>;
+        usdModeTooltip?: Omit<TooltipProps, "children">;
+        tokenModeTooltip?: Omit<TooltipProps, "children">;
         amountUsd?: string;
     };
     balanceButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
+        tooltip?: Omit<TooltipProps, "children">;
     };
     assetsButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
+        tooltip?: Omit<TooltipProps, "children">;
         onClick?: () => void;
         variant?: AssetsButtonVariant;
     };
     walletButton?: {
-        tooltip?: Omit<TooltipProps, 'children'>;
+        tooltip?: Omit<TooltipProps, "children">;
         onClick?: () => void;
         address?: string;
         emptyAddressLabel?: string;
@@ -2228,7 +2263,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 +2424,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;
@@ -2401,23 +2436,23 @@ 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;
+    "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, }: {
@@ -2426,14 +2461,19 @@ declare function SquidConfigProvider({ theme, children, themeType, }: {
     themeType?: ThemeType;
 }): react_jsx_runtime.JSX.Element;
 
-declare function useDropdownMenu(props?: {
+interface UseDropdownMenuParams {
     initialIsModalOpen?: boolean;
-}): {
+    itemsContainerRef?: React.RefObject<HTMLElement>;
+}
+declare function useDropdownMenu(props?: UseDropdownMenuParams): {
     isDropdownOpen: boolean;
     openDropdown: () => void;
     closeDropdown: () => void;
     dropdownRef: React.RefObject<HTMLDivElement>;
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
+    dropdownPosition: DropdownPosition | null;
+    itemRef: React.RefObject<HTMLLIElement>;
+    menuRef: React.RefObject<HTMLDivElement>;
 };
 
 type UseMediaQueryOptions = {
@@ -2502,7 +2542,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 +2564,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, 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, 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, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, 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, ListItemActionsButton, 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, RouteStep, 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 };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "author": "",
   "license": "MIT",
   "resolutions": {
@@ -17,15 +17,16 @@
     "build-storybook": "storybook build",
     "watch:build-tailwind": "yarn build-tailwind --watch",
     "build-tailwind": "tailwindcss -i src/styles/tailwind.css -o src/styles/compiled-tailwind.css",
-    "lint:fix": "eslint . --fix",
-    "format:fix": "prettier --write --ignore-path .prettierignore .",
+    "lint": "eslint . --fix",
+    "format": "prettier --write --ignore-path .prettierignore .",
     "release": "release-it",
     "release:pre": "release-it --preRelease=beta",
     "release:ci": "release-it --ci",
     "release:dry": "release-it --dry-run",
     "build": "yarn build-tailwind && rollup -c && yarn copy-fonts && yarn move-styles",
     "copy-fonts": "cp -r src/styles/fonts dist/fonts",
-    "move-styles": "mv dist/esm/index.css dist/index.css && rm -rf dist/cjs/index.css"
+    "move-styles": "mv dist/esm/index.css dist/index.css && rm -rf dist/cjs/index.css",
+    "test": "vitest"
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "3.5.0",
@@ -90,7 +91,8 @@
     "tailwindcss": "3.4.1",
     "ts-loader": "9.5.1",
     "tslib": "^2.6.2",
-    "typescript": "5.4"
+    "typescript": "5.4",
+    "vitest": "2.0.5"
   },
   "release-it": {
     "plugins": {