@0xsquid/ui 0.27.3-beta.0 → 0.27.4

package/dist/cjs/index.js

@@ -6601,7 +6601,7 @@ var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
  * @param {string|number} tokenPrice - The price of one token in USD
  * @returns {BigNumber} - The equivalent amount in USD
  */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
+function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
     if (!tokenAmount || !tokenPrice)
         return "";
     const amount = new BigNumber(tokenAmount);
@@ -6622,47 +6622,73 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
     const price = new BigNumber(tokenPrice);
     return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
-const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
+const MAX_TOKEN_DECIMALS = 8;
+const TOKEN_EXACT_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
-    maximumFractionDigits: 4,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
+});
+const TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
     minimumSignificantDigits: 2,
     maximumSignificantDigits: 4,
 });
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-function formatTokenAmount(amount = "0") {
-    return INTL_TOKEN_AMOUNT_FORMATTER.format(amount);
+function formatTokenAmount(amount, { exact = true } = {}) {
+    const numericAmount = parseFloat(amount || "0");
+    if (numericAmount <= 0) {
+        return "0";
+    }
+    // Check if numericAmount is less than the smallest displayable amount
+    if (numericAmount < Math.pow(10, -MAX_TOKEN_DECIMALS)) {
+        return `<${Math.pow(10, -MAX_TOKEN_DECIMALS).toFixed(MAX_TOKEN_DECIMALS)}`;
+    }
+    return exact
+        ? TOKEN_EXACT_AMOUNT_INTL_FORMATTER.format(numericAmount)
+        : TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER.format(numericAmount);
 }
-const INTL_USD_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
+// For values below 100,000, use exact integer precision
+// e.g 1,234.56, 98,765.43
+const STANDARD_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
+});
+// For values above 100,000, use compact notation
+// e.g $12,34K, $98,765.43M
+const COMPACT_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
     notation: "compact",
     compactDisplay: "short",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
 });
-function formatUsdAmount(amount = "0", { includeSign = true, formatIfVerySmall = 0.01 } = {}) {
+function formatUsdAmount(amount = "0", { includeSign = true } = {}) {
     const parsedAmount = Number(amount);
-    if (parsedAmount < formatIfVerySmall && parsedAmount > 0) {
+    if (parsedAmount < 0.01 && parsedAmount > 0) {
         return includeSign ? "<$0.01" : "<0.01";
     }
-    const formattedAmount = INTL_USD_AMOUNT_FORMATTER.format(parsedAmount);
-    return includeSign ? formattedAmount : formattedAmount.replace("$", "");
+    // Handle amounts less than 100,000 with exact integer precision
+    if (parsedAmount < 100000) {
+        return STANDARD_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
+    }
+    // Handle amounts 100,000 or more with compact notation
+    return COMPACT_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
 }
 function trimExtraDecimals(value, maxDecimals) {
-    var _a;
-    const split = value.split(".");
-    if (split.length > 1) {
-        const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : "";
-        if (maxDecimals && decimals.length > maxDecimals) {
-            const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
-            return newValue;
-        }
-    }
+    const [integerPart = "0", decimalPart] = value.split(".");
+    // Return just the integer part if maxDecimals is zero
+    if (maxDecimals === 0) {
+        return integerPart;
+    }
+    // Process decimals if present and maxDecimals is not zero
+    if (decimalPart &&
+        maxDecimals !== undefined &&
+        decimalPart.length > maxDecimals) {
+        return `${integerPart}.${decimalPart.slice(0, maxDecimals)}`;
+    }
+    // Return the original value if there are no excess decimals or maxDecimals is undefined
     return value;
 }
 
@@ -17887,9 +17913,8 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsxRuntime.jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(_a) {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", className) })));
+function PipeSeparator(props) {
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
 }
 
 function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
@@ -18764,6 +18789,21 @@ function DropdownMenuItemWithSubmenu(_a) {
                 }, children: submenu })) })) }));
 }
 
+function useOnClickOutside(callback, externalRef) {
+    const internalRef = React$1.useRef(null);
+    const ref = externalRef || internalRef;
+    React$1.useEffect(() => {
+        const handleMouseDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [callback, ref]);
+    return { ref };
+}
+
 const dropdownPositionClassMap$1 = {
     top: "tw-right-full tw-bottom-[50px]",
     bottom: "tw-right-full tw-top-[50px]",
@@ -18779,6 +18819,14 @@ const collapsedListItemClassMap = {
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef,
+    });
+    useOnClickOutside(() => {
+        if (isDropdownOpen) {
+            closeDropdown();
+        }
+    }, itemRef);
     const subtitleClassName = cn("tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block");
     // 'small' variant does not have detail
     const showDetail = size === "large" && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -18809,23 +18857,36 @@ function ListItem(_a) {
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? "button" : "div";
     const itemProps = isInteractive ? props : {};
-    const { isDropdownOpen, dropdownRef, openDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
-        itemsContainerRef,
-    });
-    return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
+    const handleInteraction = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if ("onClick" in props && e.type === "click") {
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+    };
+    // Handle List item click, close dropdown if it's open
+    const handleItemClick = (e) => {
+        handleInteraction(e);
+        if (isDropdownOpen)
+            closeDropdown();
+    };
+    return (jsxRuntime.jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon || (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon || (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
                             ? "tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100"
-                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuContent && (jsxRuntime.jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: (e) => {
+                            e.stopPropagation();
+                            isDropdownOpen ? closeDropdown() : openDropdown();
+                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" }))] })), isDropdownOpen && !!dropdownMenuContent ? (jsxRuntime.jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
-const ListItemActionsButton = React$1.forwardRef((props, ref) => {
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", props.isActive
-            ? "tw-bg-material-light-thin tw-opacity-100"
-            : "tw-opacity-0", props.className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
+const ListItemActionsButton = React$1.forwardRef((_a, ref) => {
+    var { isActive, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", isActive ? "tw-bg-material-light-thin tw-opacity-100" : "tw-opacity-0", className), children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
 });
 
 const dropdownPositionClassMap = {
@@ -19241,6 +19302,7 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
                                         // show separator for all steps except the first one
                                         showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? "pending" : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
+SwapStepsCollapsed.displayName = "SwapStepsCollapsed";
 
 const WIDTH_SM = "69";
 const HEIGHT_SM = "31";
@@ -25001,20 +25063,6 @@ function DayPicker(props) {
     return (jsxRuntime.jsx(RootProvider, __assign({}, props, { children: jsxRuntime.jsx(Root, { initialProps: props }) })));
 }
 
-function useOnClickOutside(callback) {
-    const ref = React$1.useRef(null);
-    React$1.useEffect(() => {
-        const handleClick = (e) => {
-            if (ref.current && !ref.current.contains(e.target)) {
-                callback();
-            }
-        };
-        document.addEventListener("click", handleClick);
-        return () => document.removeEventListener("click", handleClick);
-    }, [callback]);
-    return { ref };
-}
-
 function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(FilterSection, { title: "Chain", children: jsxRuntime.jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsxRuntime.jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsxRuntime.jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsxRuntime.jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ["success", "ongoing", "error"].map((s) => (jsxRuntime.jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === "ongoing" ? jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
 }
@@ -25196,7 +25244,9 @@ function PopLayout(props) {
 }
 
 function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+    return (jsxRuntime.jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
+            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
+        }, rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
 var lib = {};
@@ -26310,10 +26360,7 @@ const tooltipThresholdPaddingMap = {
     xl: "40px",
     xxl: "60px",
 };
-const TooltipContainer = (_a) => {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-relative", className) })));
-};
+const TooltipContainer = (props) => (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn("tw-relative", props.className) })));
 const TooltipTriggerWrapper = (_a) => {
     var { elementRef } = _a, props = __rest$1(_a, ["elementRef"]);
     return jsxRuntime.jsx("div", Object.assign({}, props, { ref: elementRef }));
@@ -26520,7 +26567,7 @@ function NumericInput(_a) {
         onAmountChange,
     ]);
     const handleInputChange = (e) => {
-        let value = e.target.value.replace(/,/g, "."); // Replace commas with dots
+        const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
         const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
@@ -62030,7 +62077,7 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -62051,7 +62098,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             return "You declined the transaction in your wallet.";
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
+            return `You received a refund of ${refundTokenSymbol} to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return "Add gas to the transaction via Axelarscan to complete the swap";
@@ -62068,7 +62115,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = React$1.useState(true);
     const isFirstRenderRef = React$1.useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -62098,6 +62145,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,

package/dist/cjs/types/components/layout/PipeSeparator.d.ts

@@ -1,2 +1,2 @@
 import { ComponentProps } from "react";
-export declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/layout/useOnClickOutside.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare function useOnClickOutside(callback: () => void): {
-    ref: import("react").RefObject<HTMLDivElement>;
+import { RefObject } from "react";
+export declare function useOnClickOutside(callback: () => void, externalRef?: RefObject<HTMLElement>): {
+    ref: RefObject<HTMLElement>;
 };

package/dist/cjs/types/components/views/SwapProgressView.d.ts

@@ -3,14 +3,13 @@ import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -28,5 +27,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/core/numbers.d.ts

@@ -13,17 +13,12 @@ export declare function convertTokenAmountToUSD(tokenAmount: string | number, to
  * @returns {BigNumber} - The equivalent amount of tokens
  */
 export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number, maxDecimals: number): string;
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-export declare function formatTokenAmount(amount?: number | bigint | string): string;
+export declare function formatTokenAmount(amount: string, { exact }?: {
+    exact?: boolean | undefined;
+}): string;
 interface FormatUsdAmountOptions {
     includeSign?: boolean;
-    formatIfVerySmall?: number;
 }
-export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign, formatIfVerySmall }?: FormatUsdAmountOptions): string;
+export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign }?: FormatUsdAmountOptions): string;
 export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
 export {};

package/dist/cjs/types/types/components.d.ts

@@ -13,11 +13,11 @@ export type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-export type SwapStep = {
+export interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 export declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,

package/dist/cjs/types/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { SquidTheme } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, DescriptionBlock, } from "./components";

package/dist/esm/index.js

@@ -6581,7 +6581,7 @@ var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
  * @param {string|number} tokenPrice - The price of one token in USD
  * @returns {BigNumber} - The equivalent amount in USD
  */
-function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
+function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
     if (!tokenAmount || !tokenPrice)
         return "";
     const amount = new BigNumber(tokenAmount);
@@ -6602,47 +6602,73 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
     const price = new BigNumber(tokenPrice);
     return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
 }
-const INTL_TOKEN_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
+const MAX_TOKEN_DECIMALS = 8;
+const TOKEN_EXACT_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
-    maximumFractionDigits: 4,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
+});
+const TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: MAX_TOKEN_DECIMALS,
     minimumSignificantDigits: 2,
     maximumSignificantDigits: 4,
 });
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-function formatTokenAmount(amount = "0") {
-    return INTL_TOKEN_AMOUNT_FORMATTER.format(amount);
+function formatTokenAmount(amount, { exact = true } = {}) {
+    const numericAmount = parseFloat(amount || "0");
+    if (numericAmount <= 0) {
+        return "0";
+    }
+    // Check if numericAmount is less than the smallest displayable amount
+    if (numericAmount < Math.pow(10, -MAX_TOKEN_DECIMALS)) {
+        return `<${Math.pow(10, -MAX_TOKEN_DECIMALS).toFixed(MAX_TOKEN_DECIMALS)}`;
+    }
+    return exact
+        ? TOKEN_EXACT_AMOUNT_INTL_FORMATTER.format(numericAmount)
+        : TOKEN_ROUNDED_AMOUNT_INTL_FORMATTER.format(numericAmount);
 }
-const INTL_USD_AMOUNT_FORMATTER = new Intl.NumberFormat("en-US", {
+// For values below 100,000, use exact integer precision
+// e.g 1,234.56, 98,765.43
+const STANDARD_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
+});
+// For values above 100,000, use compact notation
+// e.g $12,34K, $98,765.43M
+const COMPACT_USD_INTL_FORMATTER = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
     notation: "compact",
     compactDisplay: "short",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
 });
-function formatUsdAmount(amount = "0", { includeSign = true, formatIfVerySmall = 0.01 } = {}) {
+function formatUsdAmount(amount = "0", { includeSign = true } = {}) {
     const parsedAmount = Number(amount);
-    if (parsedAmount < formatIfVerySmall && parsedAmount > 0) {
+    if (parsedAmount < 0.01 && parsedAmount > 0) {
         return includeSign ? "<$0.01" : "<0.01";
     }
-    const formattedAmount = INTL_USD_AMOUNT_FORMATTER.format(parsedAmount);
-    return includeSign ? formattedAmount : formattedAmount.replace("$", "");
+    // Handle amounts less than 100,000 with exact integer precision
+    if (parsedAmount < 100000) {
+        return STANDARD_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
+    }
+    // Handle amounts 100,000 or more with compact notation
+    return COMPACT_USD_INTL_FORMATTER.format(parsedAmount).replace(/^\$/, includeSign ? "$" : "");
 }
 function trimExtraDecimals(value, maxDecimals) {
-    var _a;
-    const split = value.split(".");
-    if (split.length > 1) {
-        const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : "";
-        if (maxDecimals && decimals.length > maxDecimals) {
-            const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
-            return newValue;
-        }
-    }
+    const [integerPart = "0", decimalPart] = value.split(".");
+    // Return just the integer part if maxDecimals is zero
+    if (maxDecimals === 0) {
+        return integerPart;
+    }
+    // Process decimals if present and maxDecimals is not zero
+    if (decimalPart &&
+        maxDecimals !== undefined &&
+        decimalPart.length > maxDecimals) {
+        return `${integerPart}.${decimalPart.slice(0, maxDecimals)}`;
+    }
+    // Return the original value if there are no excess decimals or maxDecimals is undefined
     return value;
 }
 
@@ -17867,9 +17893,8 @@ function NavigationBar(_a) {
                     : "tw-flex"), children: jsx(HeadingText, { size: "small", children: title }) })) : null] })));
 }
 
-function PipeSeparator(_a) {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", className) })));
+function PipeSeparator(props) {
+    return (jsx("div", Object.assign({}, props, { className: cn("tw-h-[0.8em] tw-w-[2px] tw-rounded-full tw-bg-[currentColor]", props.className) })));
 }
 
 function CollapsibleMenu({ children, menuRef, isOpen, transitionDuration, size, className, }) {
@@ -18744,6 +18769,21 @@ function DropdownMenuItemWithSubmenu(_a) {
                 }, children: submenu })) })) }));
 }
 
+function useOnClickOutside(callback, externalRef) {
+    const internalRef = useRef(null);
+    const ref = externalRef || internalRef;
+    useEffect(() => {
+        const handleMouseDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [callback, ref]);
+    return { ref };
+}
+
 const dropdownPositionClassMap$1 = {
     top: "tw-right-full tw-bottom-[50px]",
     bottom: "tw-right-full tw-top-[50px]",
@@ -18759,6 +18799,14 @@ const collapsedListItemClassMap = {
 };
 function ListItem(_a) {
     var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent"]);
+    const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
+        itemsContainerRef,
+    });
+    useOnClickOutside(() => {
+        if (isDropdownOpen) {
+            closeDropdown();
+        }
+    }, itemRef);
     const subtitleClassName = cn("tw-h-[14px] tw-max-w-full tw-truncate !tw-leading-[16px] tw-text-grey-500", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block");
     // 'small' variant does not have detail
     const showDetail = size === "large" && (!!detail || !!icon || showDetailOnHoverOnly);
@@ -18789,23 +18837,36 @@ function ListItem(_a) {
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? "button" : "div";
     const itemProps = isInteractive ? props : {};
-    const { isDropdownOpen, dropdownRef, openDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
-        itemsContainerRef,
-    });
-    return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
+    const handleInteraction = (e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        if ("onClick" in props && e.type === "click") {
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+    };
+    // Handle List item click, close dropdown if it's open
+    const handleItemClick = (e) => {
+        handleInteraction(e);
+        if (isDropdownOpen)
+            closeDropdown();
+    };
+    return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-highlight-adjacent tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300", listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
+            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon || (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, placeholderImageUrl: placeholderImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon || (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn("tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", 
                         // 'large' variant has extra padding
                         size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]"), children: [typeof itemTitle === "string" ? (jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
                             ? "tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100"
-                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: openDropdown, isActive: isDropdownOpen, className: "peer-hover/list-item:tw-opacity-100" })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                            : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: (e) => {
+                            e.stopPropagation();
+                            isDropdownOpen ? closeDropdown() : openDropdown();
+                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" }))] })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
-const ListItemActionsButton = forwardRef((props, ref) => {
-    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", props.isActive
-            ? "tw-bg-material-light-thin tw-opacity-100"
-            : "tw-opacity-0", props.className), children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
+const ListItemActionsButton = forwardRef((_a, ref) => {
+    var { isActive, className } = _a, props = __rest$1(_a, ["isActive", "className"]);
+    return (jsx("button", Object.assign({}, props, { ref: ref, className: cn("tw-peer tw-absolute tw-right-squid-s tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-p-2 tw-text-grey-300 hover:tw-bg-material-light-thin hover:tw-opacity-100 focus-visible:tw-opacity-100", isActive ? "tw-bg-material-light-thin tw-opacity-100" : "tw-opacity-0", className), children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })));
 });
 
 const dropdownPositionClassMap = {
@@ -19221,6 +19282,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
                                         // show separator for all steps except the first one
                                         showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? "pending" : step.status }, index))) }), jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
 });
+SwapStepsCollapsed.displayName = "SwapStepsCollapsed";
 
 const WIDTH_SM = "69";
 const HEIGHT_SM = "31";
@@ -24981,20 +25043,6 @@ function DayPicker(props) {
     return (jsx(RootProvider, __assign({}, props, { children: jsx(Root, { initialProps: props }) })));
 }
 
-function useOnClickOutside(callback) {
-    const ref = useRef(null);
-    useEffect(() => {
-        const handleClick = (e) => {
-            if (ref.current && !ref.current.contains(e.target)) {
-                callback();
-            }
-        };
-        document.addEventListener("click", handleClick);
-        return () => document.removeEventListener("click", handleClick);
-    }, [callback]);
-    return { ref };
-}
-
 function TransactionFilters({ chainType, setChainType, chain, setChain, fromDate, setFromDate, toDate, setToDate, status = [], setStatus, chains, }) {
     return (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(FilterSection, { title: "Chain", children: jsx(ChainsFilter, { chainType: chainType, setChainType: setChainType, chain: chain, setChain: setChain, chains: chains }) }), jsx(FilterSection, { title: "Date", initCollapsed: true, children: jsx(DateFilters, { fromDate: fromDate, setFromDate: setFromDate, toDate: toDate, setToDate: setToDate }) }), jsx(FilterSection, { title: "Status", initCollapsed: true, children: jsx("div", { className: "tw-flex tw-flex-col tw-gap-squid-xxs", children: ["success", "ongoing", "error"].map((s) => (jsx(StatusFilter, { status: s, selected: status.length === 0 || status.includes(s), onChange: () => setStatus(arrayToggle(status, s)), icon: s === "ongoing" ? jsx(DotGrid1x3HorizontalIcon, {}) : undefined }, s))) }) })] }));
 }
@@ -25176,7 +25224,9 @@ function PopLayout(props) {
 }
 
 function Toast({ headerContent, actionsContent, description, chipLabel, title, }) {
-    return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperClassName: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
+    return (jsxs(Menu, { contentClassName: "tw-px-squid-m tw-pb-squid-s tw-pt-squid-xxs", contentWrapperProps: {
+            className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs",
+        }, rounded: "sm", children: [headerContent, jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
 var lib = {};
@@ -26290,10 +26340,7 @@ const tooltipThresholdPaddingMap = {
     xl: "40px",
     xxl: "60px",
 };
-const TooltipContainer = (_a) => {
-    var { className } = _a, props = __rest$1(_a, ["className"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-relative", className) })));
-};
+const TooltipContainer = (props) => (jsx("div", Object.assign({}, props, { className: cn("tw-relative", props.className) })));
 const TooltipTriggerWrapper = (_a) => {
     var { elementRef } = _a, props = __rest$1(_a, ["elementRef"]);
     return jsx("div", Object.assign({}, props, { ref: elementRef }));
@@ -26500,7 +26547,7 @@ function NumericInput(_a) {
         onAmountChange,
     ]);
     const handleInputChange = (e) => {
-        let value = e.target.value.replace(/,/g, "."); // Replace commas with dots
+        const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
         const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
@@ -62010,7 +62057,7 @@ const getSwapProgressTitle = ({ fromToken, toToken, swapState, }) => {
             return "Needs gas on destination";
     }
 };
-const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, }) => {
+const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, toAddressFormatted, refundTokenSymbol, }) => {
     switch (swapState) {
         case SwapState.CONFIRM: {
             return "Authenticate the transaction in your wallet.";
@@ -62031,7 +62078,7 @@ const getSwapProgressDescriptions = ({ swapState, toAmount, toChain, toToken, to
             return "You declined the transaction in your wallet.";
         }
         case SwapState.PARTIAL_SUCCESS: {
-            return `You received a refund of axlUSDC to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
+            return `You received a refund of ${refundTokenSymbol} to your wallet ${toAddressFormatted} on ${toChain === null || toChain === void 0 ? void 0 : toChain.networkName}.`;
         }
         case SwapState.NEEDS_GAS: {
             return "Add gas to the transaction via Axelarscan to complete the swap";
@@ -62048,7 +62095,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
     const isFirstRenderRef = useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -62078,6 +62125,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
             toChain,
             toToken,
             toAddressFormatted,
+            refundTokenSymbol,
         });
         return {
             headerTitle,

package/dist/esm/types/components/layout/PipeSeparator.d.ts

@@ -1,2 +1,2 @@
 import { ComponentProps } from "react";
-export declare function PipeSeparator({ className, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function PipeSeparator(props: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/layout/useOnClickOutside.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare function useOnClickOutside(callback: () => void): {
-    ref: import("react").RefObject<HTMLDivElement>;
+import { RefObject } from "react";
+export declare function useOnClickOutside(callback: () => void, externalRef?: RefObject<HTMLElement>): {
+    ref: RefObject<HTMLElement>;
 };

package/dist/esm/types/components/views/SwapProgressView.d.ts

@@ -3,14 +3,13 @@ import { SwapStepsCollapsedFooterButton } from "../layout/SwapStepsCollapsed";
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -28,5 +27,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/core/numbers.d.ts

@@ -13,17 +13,12 @@ export declare function convertTokenAmountToUSD(tokenAmount: string | number, to
  * @returns {BigNumber} - The equivalent amount of tokens
  */
 export declare function convertUSDToTokenAmount(usdAmount: string | number, tokenPrice: string | number, maxDecimals: number): string;
-/**
- * Formats a number to the en-US number format
- *
- * @param amount - The number to format
- * @returns The formatted string
- */
-export declare function formatTokenAmount(amount?: number | bigint | string): string;
+export declare function formatTokenAmount(amount: string, { exact }?: {
+    exact?: boolean | undefined;
+}): string;
 interface FormatUsdAmountOptions {
     includeSign?: boolean;
-    formatIfVerySmall?: number;
 }
-export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign, formatIfVerySmall }?: FormatUsdAmountOptions): string;
+export declare function formatUsdAmount(amount?: number | bigint | string, { includeSign }?: FormatUsdAmountOptions): string;
 export declare function trimExtraDecimals(value: string, maxDecimals?: number): string;
 export {};

package/dist/esm/types/types/components.d.ts

@@ -13,11 +13,11 @@ export type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-export type SwapStep = {
+export interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 export declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,

package/dist/esm/types/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { SquidTheme } from "./config";
 export * from "./utils";
-export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, } from "./components";
+export type { SwapState, ThemeType, SwapStep, HistoryItemStatus, ActionStatus, AssetsButtonVariant, DescriptionBlock, } from "./components";

package/dist/index.d.ts

@@ -37,11 +37,11 @@ type DescriptionBlock = {
     value: string;
     rounded?: boolean;
 };
-type SwapStep = {
+interface SwapStep {
     descriptionBlocks: DescriptionBlock[];
     link?: string;
     status: ActionStatus;
-};
+}
 declare enum SwapState {
     CONFIRM = 0,
     PROGRESS = 1,
@@ -1456,7 +1456,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(props: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 interface CollapsibleMenuProps {
     menuRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -2382,14 +2382,13 @@ declare function SwapDetailsView({ isLoading, canToggleBoostMode, }: {
 type ChainData = {
     networkName: string;
     logoUrl: string;
-    bgColor: string;
 };
 type Token = {
     symbol: string;
     logoUrl: string;
     bgColor: string;
 };
-declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, }: {
+declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -2407,6 +2406,7 @@ declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete,
     swapState: SwapState;
     estimatedTimeToComplete?: string;
     footerButton?: SwapStepsCollapsedFooterButton;
+    refundTokenSymbol?: string;
 }): react_jsx_runtime.JSX.Element;
 
 interface BaseTransactionViewProps {
@@ -2654,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, 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 };
+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, 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, 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 };

package/package.json

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