@0xsquid/ui 2.6.3 → 2.6.5-animate-number-beta.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps } from 'react';
+import react__default, { ReactNode, ComponentProps, ChangeEvent } from 'react';
 import { Player } from '@lottiefiles/react-lottie-player';
 import * as framer_motion from 'framer-motion';
 import { motion } from 'framer-motion';
@@ -11,7 +11,7 @@ import { ClassValue } from 'clsx';
 type TextSize = "small" | "medium" | "large";
 type SwitchSize = "small" | "large";
 type ButtonVariant = "primary" | "secondary" | "tertiary";
-type ButtonSize = "md" | "lg";
+type ButtonSize = "sm" | "md" | "lg";
 type SwapDirection = "from" | "to";
 type BoostMode = "normal" | "boost";
 type HistoryItemStatus = "completed" | "pending" | "failed" | "warning";
@@ -115,8 +115,10 @@ declare function BlockSkeleton({ isLoading, className, children, ...props }: Loa
 interface PriceChangeProps {
     variant?: "small" | "large";
     value: string | number;
+    highlightText?: boolean;
+    triangle?: "none" | "prefix" | "suffix";
 }
-declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): react_jsx_runtime.JSX.Element;
+declare function PriceChange({ value: rawValue, variant, highlightText, triangle, }: PriceChangeProps): react_jsx_runtime.JSX.Element;
 
 declare const statusTextClassMap: Record<ActionStatus, string>;
 interface TransactionStateProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -174,6 +176,39 @@ interface InputActionButtonProps {
     label?: string;
 }
 
+declare enum UserInputType {
+    TOKEN = 0,
+    USD = 1
+}
+interface UseNumericInputOptions {
+    token: Pick<Token$3, "decimals" | "price">;
+    onAmountChange: (tokenAmount: string) => void;
+    forcedAmount?: string;
+    formatIfVerySmall: {
+        token: string;
+        usd: string;
+    };
+    balance: string;
+    inputModeButton?: {
+        amountUsd?: string;
+    };
+    maxUsdDecimals?: number;
+    debounceInput?: boolean;
+    direction?: "from" | "to";
+    initialInputMode?: UserInputType;
+}
+declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
+    userInputType: UserInputType;
+    inputValue: string;
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleSwitchInputMode: () => void;
+    isTokenAmountVerySmall: boolean;
+    isUsdAmountVerySmall: boolean;
+    amountFormatted: string;
+    onBalanceButtonClick: () => void;
+    balanceFormatted: string;
+};
+
 type TooltipWidth = "max" | "container";
 type TooltipThreshold = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 interface TooltipProps {
@@ -195,7 +230,7 @@ interface Token$3 {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface NumericInputProps {
     token: Token$3;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -203,28 +238,49 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
         token: string;
         usd: string;
     };
-    showDetails?: boolean;
-    isLoading?: boolean;
-    error?: {
-        message: string;
-    };
     balance?: string;
-    priceImpactPercentage?: string;
-    criticalPriceImpactPercentage?: number;
-    direction?: SwapDirection;
     inputModeButton?: {
         usdModeTooltip?: Omit<TooltipProps, "children">;
         tokenModeTooltip?: Omit<TooltipProps, "children">;
         amountUsd?: string;
     };
     maxUsdDecimals?: number;
-    isInteractive?: boolean;
     balanceButton?: {
         tooltip?: Omit<TooltipProps, "children">;
         hideMaxChip?: boolean;
     };
+    debounceInput?: boolean;
+    initialInputMode?: UserInputType;
+    customSymbol?: string;
+    hideControls?: boolean;
+    hideBalance?: boolean;
+    containerClassName?: string;
+    inputClassName?: string;
 }
-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 Props$1 extends NumericInputProps, React.InputHTMLAttributes<HTMLInputElement> {
+    direction?: SwapDirection;
+    showDetails?: boolean;
+    isLoading?: boolean;
+    isInteractive?: boolean;
+    priceImpactPercentage?: string;
+    criticalPriceImpactPercentage?: number;
+    error?: {
+        message: string;
+    };
+}
+declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, initialInputMode, customSymbol, hideControls, hideBalance, containerClassName, inputClassName, ...props }: Props$1): react_jsx_runtime.JSX.Element;
+
+declare function LargeNumericInput({ balance, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, inputModeButton, balanceButton, debounceInput, }: NumericInputProps): react_jsx_runtime.JSX.Element;
+
+interface RangeInputProps {
+    label: string;
+    initialValue?: string;
+    onChange?: (value: string) => void;
+    min?: number;
+    max?: number;
+    isWarning?: boolean;
+}
+declare function RangeInput({ label, initialValue, onChange, min, max, isWarning, }: RangeInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number | undefined;
@@ -246,16 +302,6 @@ interface SwitchProps {
 }
 declare function Switch({ checked, onChange, size, disabled, inputProps, }: SwitchProps): react_jsx_runtime.JSX.Element;
 
-interface RangeInputProps {
-    label: string;
-    initialValue?: string;
-    onChange?: (value: string) => void;
-    min?: number;
-    max?: number;
-    isWarning?: boolean;
-}
-declare function RangeInput({ label, initialValue, onChange, min, max, isWarning, }: RangeInputProps): react_jsx_runtime.JSX.Element;
-
 interface AssetsButtonProps {
     token?: {
         iconUrl: string;
@@ -282,7 +328,7 @@ interface BoostButtonProps {
 }
 declare function BoostButton({ boostMode, canToggleBoostMode, boostIndicatorRef, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
-interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ChipProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
     label?: string;
     icon?: React.ReactNode;
 }
@@ -296,13 +342,17 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     link?: string;
     isLoading?: boolean;
+    isShimmering?: boolean;
     showLoader?: boolean;
+    loaderSize?: LoaderSize;
     chip?: ChipProps;
     containerClassName?: string;
     buttonRef?: React.Ref<HTMLButtonElement>;
     anchorRef?: React.Ref<HTMLAnchorElement>;
 }
-declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+type LoaderSize = "sm" | "md" | "lg";
+declare const buttonRoundedClassMap: Record<ButtonSize, Record<ButtonVariant, string>>;
+declare function Button({ label, disabled, size, variant, icon, link, isLoading, isShimmering, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     feeInUsd?: string;
@@ -692,6 +742,14 @@ declare function MoneyBagIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): react_jsx_runtime.JSX.Element;
+declare function PluginIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CircleCheckIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
 
 declare function EmptyHeartIcon({ className }: {
     className?: string;
@@ -775,6 +833,19 @@ declare function MaxIcon(): react_jsx_runtime.JSX.Element;
 
 declare function NotAllowedIcon(): react_jsx_runtime.JSX.Element;
 
+declare function GooglePayIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ApplePayIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CreditCardIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): react_jsx_runtime.JSX.Element;
+
 declare function PercentIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -842,7 +913,10 @@ declare function SquidVector({ size, className, }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function SwapInputsIcon(): react_jsx_runtime.JSX.Element;
+declare function SwapInputsIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function SwapIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -916,6 +990,9 @@ declare function CrossedOutSunSolidIcon({ size, className, }: {
 interface Props extends React.ComponentProps<typeof Player> {
 }
 declare const AnimationWrapper: (playerProps: Props) => react_jsx_runtime.JSX.Element;
+declare function AnimationCard({ children }: {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
 
 interface AnnouncementProps {
     message: string;
@@ -1632,6 +1709,11 @@ interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ModalContent({ children, addGap, paddingY, borderType, className, ...props }: ModalContentProps): react_jsx_runtime.JSX.Element;
 declare function ModalContentDivider(): react_jsx_runtime.JSX.Element;
 
+interface ModalTitleProps {
+    title: string;
+}
+declare function ModalTitle({ title }: ModalTitleProps): react_jsx_runtime.JSX.Element;
+
 interface ActionButton {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
@@ -1663,6 +1745,18 @@ declare function BorderedContainer({ children, className, }: {
 
 declare function ProfileHeaderBackground(): react_jsx_runtime.JSX.Element;
 
+interface AddressHeaderProps {
+    direction: SwapDirection;
+    onClick?: () => void;
+    isDisabled?: boolean;
+    tooltip?: TooltipProps["tooltipContent"];
+    label: string;
+    walletIconUrl?: string | null;
+    isLoading?: boolean;
+    displayLabel?: boolean;
+    highlightLabel?: boolean;
+}
+declare const AddressHeader: ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel, highlightLabel, }: AddressHeaderProps) => react_jsx_runtime.JSX.Element;
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
@@ -1709,10 +1803,14 @@ interface SwapConfigurationProps {
         address?: string;
         emptyAddressLabel?: string;
         disabled?: boolean;
+        walletIconUrl?: string | null;
     };
     showNumericInputDetails?: boolean;
+    fullHeight?: boolean;
+    debounceInput?: boolean;
+    showWalletButtonHeader?: boolean;
 }
-declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, }: SwapConfigurationProps): 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, showNumericInputDetails, fullHeight, debounceInput, showWalletButtonHeader, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapStepsCollapsedFooterButton {
     label: string;
@@ -2071,8 +2169,8 @@ type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 
-declare const THEME_COLOR_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-600", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
-declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "container", "input", "menu-sm", "menu-lg", "modal"];
+declare const THEME_COLOR_KEYS: readonly ["grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "royal-300", "royal-400", "royal-500", "royal-600", "royal-700", "highlight-700", "status-positive", "status-negative", "status-partial", "button-lg-primary-bg", "button-lg-primary-text", "button-lg-secondary-bg", "button-lg-secondary-text", "button-lg-tertiary-bg", "button-lg-tertiary-text", "button-md-primary-bg", "button-md-primary-text", "button-md-secondary-bg", "button-md-secondary-text", "button-md-tertiary-bg", "button-md-tertiary-text", "button-sm-primary-bg", "button-sm-primary-text", "button-sm-secondary-bg", "button-sm-secondary-text", "button-sm-tertiary-bg", "button-sm-tertiary-text", "input-placeholder", "input-text", "input-selection", "input-bg", "animation-bg", "animation-text", "modal-backdrop", "menu-bg", "menu-text", "menu-backdrop", "material-light-thin", "material-light-average", "material-light-thick", "material-dark-thin", "material-dark-average", "material-dark-thick", "grey-100-005", "material-light-blend-grey-900", "material-light-blend-grey-800"];
+declare const THEME_BORDER_RADIUS_KEYS: readonly ["button-lg-primary", "button-lg-secondary", "button-lg-tertiary", "button-md-primary", "button-md-secondary", "button-md-tertiary", "button-sm-primary", "button-sm-secondary", "button-sm-tertiary", "container", "input", "menu-sm", "menu-lg", "modal"];
 declare const THEME_FONT_SIZE_KEYS: readonly ["caption", "body-large", "body-medium", "body-small", "heading-small", "heading-medium", "heading-large"];
 declare const THEME_FONT_WEIGHT_KEYS: readonly ["caption", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large"];
 declare const THEME_FONT_FAMILY_KEYS: readonly ["squid-main"];
@@ -2098,7 +2196,7 @@ interface InternalTheme {
  * These colors are optional
  * and will be generated internally using the base colors if not provided
  */
-type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop" | "menu-bg" | "menu-text" | "menu-backdrop";
+type OptionalColorsKeys = "button-lg-primary-bg" | "button-lg-primary-text" | "button-lg-secondary-bg" | "button-lg-secondary-text" | "button-lg-tertiary-bg" | "button-lg-tertiary-text" | "button-md-primary-bg" | "button-md-primary-text" | "button-md-secondary-bg" | "button-md-secondary-text" | "button-md-tertiary-bg" | "button-md-tertiary-text" | "button-sm-primary-bg" | "button-sm-primary-text" | "button-sm-secondary-bg" | "button-sm-secondary-text" | "button-sm-tertiary-bg" | "button-sm-tertiary-text" | "input-placeholder" | "input-text" | "input-selection" | "input-bg" | "animation-bg" | "animation-text" | "modal-backdrop" | "menu-bg" | "menu-text" | "menu-backdrop";
 /**
  * These colors are generated internally using the base colors
  */
@@ -2166,9 +2264,11 @@ interface HistoryItemProps {
     onClick?: () => void;
     warningLabel?: string;
     dropdownMenuContent?: React.ReactNode;
+    txType: "swap" | "send";
 }
-declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
+declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, txType, onClick, }: HistoryItemProps): react_jsx_runtime.JSX.Element;
 
+type HTMLInteractiveItem = HTMLButtonElement | HTMLDivElement | HTMLLabelElement;
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
@@ -2196,9 +2296,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemsContainerRef?: React.RefObject<HTMLElement>;
     imageGroup?: string[];
     multilineSubtitle?: boolean;
+    control?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLInteractiveItem>) => void;
 }
 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, imageGroup, multilineSubtitle, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+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, imageGroup, multilineSubtitle, control, ...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>>;
@@ -2637,18 +2739,21 @@ type TabSize = "small" | "large";
 interface TabsProps {
     tabs: Array<{
         label: string;
+        isDisabled?: boolean;
     }>;
     size?: TabSize;
     activeTab?: number;
     onTabChange?: (tabIndex: number) => void;
+    isDisabled?: boolean;
 }
-declare function Tabs({ tabs, size, onTabChange, activeTab, }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs({ tabs, size, onTabChange, activeTab, isDisabled, }: TabsProps): react_jsx_runtime.JSX.Element;
 interface TabProps extends react__default.ComponentProps<"button"> {
     label: string;
     size: TabSize;
     isActive?: boolean;
+    isDisabled?: boolean;
 }
-declare function Tab({ label, isActive, size, ...props }: TabProps): react_jsx_runtime.JSX.Element;
+declare function Tab({ label, isActive, size, isDisabled, ...props }: TabProps): react_jsx_runtime.JSX.Element;
 
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
@@ -2720,7 +2825,7 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
+declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -2740,6 +2845,7 @@ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete,
     footerButton?: SwapStepsCollapsedFooterButton;
     refundTokenSymbol?: string;
     addGasLink?: string;
+    isSendTransaction?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 interface BaseTransactionViewProps {
@@ -2879,6 +2985,12 @@ interface ThemeProviderProps extends React.ComponentProps<"div"> {
 }
 declare function ThemeProvider({ theme, children, themeType, settings, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
+declare function useCollapsibleMenu(): {
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    menuRef: react.RefObject<HTMLDivElement>;
+};
+
 interface DropdownStyles {
     position: DropdownPosition;
     maxHeight: number | null;
@@ -2924,17 +3036,9 @@ type UseMediaQueryOptions = {
  */
 declare function useMediaQuery(query: string, { defaultValue, initializeWithValue, }?: UseMediaQueryOptions): boolean;
 
-declare function useCollapsibleMenu(): {
-    isMenuOpen: boolean;
-    toggleMenu: () => void;
-    menuRef: react.RefObject<HTMLDivElement>;
-};
-
 declare function useOnResize(ref: React.RefObject<HTMLElement>, callback: (rect: DOMRectReadOnly) => void): void;
 declare function useRect(ref: React.RefObject<HTMLElement>): DOMRectReadOnly;
 
-declare function useVersion<T>(value: T, equal?: (a: T, b: T) => boolean): number;
-
 declare const useTimer: ({ immediateStart, }: {
     immediateStart?: boolean;
 }) => {
@@ -2956,6 +3060,8 @@ declare function useUserTheme(): {
     isDarkMode: boolean;
 };
 
+declare function useVersion<T>(value: T, equal?: (a: T, b: T) => boolean): number;
+
 declare const CSS_VARS: {
     MOVE_WITH_SPRING_BOUNCE_DURATION: string;
     DISPLAY_DELAYED_DURATION: string;
@@ -3003,6 +3109,7 @@ declare const spacing: {
     "squid-m": string;
     "squid-l": string;
     "squid-xl": string;
+    "squid-xl2": string;
     "squid-xxl": string;
 };
 declare const baseTailwindConfig: Config;
@@ -3016,6 +3123,8 @@ declare const baseTailwindConfig: Config;
  * @returns The combined class names as a string.
  */
 declare const cn: (...inputs: ClassValue[]) => string;
+declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
+declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 
 interface RGB {
     r: number;
@@ -3029,8 +3138,6 @@ interface RGB {
  * @param style
  */
 declare const parseSquidTheme: (userTheme: Theme, themeType: ThemeType) => Record<string, string | undefined> | undefined;
-declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
-declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;
@@ -17031,4 +17138,4 @@ declare const transactionRejectedAnimation: {
     markers: never[];
 };
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, DepositAddressView, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type PublicTheme, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, type TokenGroupVariant, TokenGroups, 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, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AddressHeader, type AllOrNone, AnimationCard, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, ApplePayIcon, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CreditCardIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, DepositAddressView, type DescriptionBlock, 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, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, GooglePayIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, type IconButtonProps, IconLabel, Image, ImageGroup, ImageIcon, type ImageProps, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, type NumericInputProps, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, type Props$1 as Props, type PublicTheme, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, type Token$3 as Token, TokenDetailsView, TokenGroup, type TokenGroupProps, type TokenGroupVariant, TokenGroups, 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, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, UserInputType, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useNumericInput, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "2.6.3",
+  "version": "2.6.5-animate-number-beta.0",
   "author": "",
   "license": "MIT",
   "resolutions": {