@0xsquid/ui 2.6.4 → 2.6.6

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default$1, { useState, createContext, useContext, useMemo, useRef, useEffect, useLayoutEffect, useInsertionEffect, useCallback, forwardRef, Fragment as Fragment$1, createElement, useId as useId$1, Component, cloneElement, Children, isValidElement, useImperativeHandle } from 'react';
+import React__default$1, { useState, createContext, useContext, useMemo, useRef, useEffect, useCallback, useLayoutEffect, useInsertionEffect, forwardRef, Fragment as Fragment$1, createElement, useId as useId$1, Component, cloneElement, Children, isValidElement, useImperativeHandle } from 'react';
 
 const CSS_VARS = {
     MOVE_WITH_SPRING_BOUNCE_DURATION: "--squid-animation-move-with-spring-bounce-duration",
@@ -4431,7 +4431,9 @@ function ImageStack(_a) {
 
 function Chip(_a) {
     var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
-    return (jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900", icon && "tw-w-squid-m", props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
+    const isInteractive = !!props.onClick;
+    const ChipTag = isInteractive ? "button" : "div";
+    return (jsx(ChipTag, Object.assign({}, props, { className: cn("tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900", icon && "tw-w-squid-m", isInteractive && "hover:tw-bg-grey-300", props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
 const loaderSizeMap = {
@@ -4581,6 +4583,40 @@ const InputActionButton = ({ onClick, variant = "tertiary", label = "Paste", })
     return (jsx(Button$1, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0 !tw-rounded-input", children: jsx(CaptionText, { children: label }) }));
 };
 
+const placeholder = "0";
+const suggestedAmounts = ["100", "500", "1000"];
+function LargeNumericInput({ onChange, value }) {
+    const inputRef = useRef(null);
+    const inputValueSpyRef = useRef(null);
+    useEffect(() => {
+        const observer = new ResizeObserver((entries) => {
+            var _a;
+            if (!inputRef.current)
+                return;
+            // update input width to match the width of the invisible span
+            // this is needed to center the input
+            inputRef.current.style.width = `${(_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect.width}px`;
+        });
+        if (inputValueSpyRef.current) {
+            observer.observe(inputValueSpyRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    const handleInputChange = useCallback((event) => {
+        // Replace commas with dots
+        const value = event.target.value.replace(/,/g, ".");
+        // Check that the input value is a valid number
+        const isValidAmount = /^\d*\.?\d{0,6}$/.test(value);
+        if (isValidAmount)
+            onChange(value || "");
+    }, [onChange]);
+    return (jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsx("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: jsxs("label", { className: "tw-flex tw-max-w-full tw-cursor-text tw-items-center tw-overflow-hidden tw-rounded-squid-l tw-px-squid-s tw-py-squid-xxs focus-within:tw-bg-material-light-thin hover:tw-bg-material-light-thin", children: [jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsx("span", { children: "$" }), jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-[calc(100%-3.125rem)] tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }) }), jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsx(Chip, { label: `$${amount}`, onClick: () => {
+                        onChange(amount);
+                    } }, amount))) })] }));
+}
+
 /*
  *      bignumber.js v9.1.2
  *      A JavaScript library for arbitrary-precision arithmetic.
@@ -8709,6 +8745,12 @@ const AnimationWrapper = (playerProps) => {
     }, []);
     return (jsx("div", { id: "squid-lottie-animation", className: clsx("tw-h-full [&>*]:tw-h-full", "tw-transition-all", display ? "tw-opacity-100" : "tw-opacity-0"), children: showAnimation && jsx(Player, Object.assign({}, playerProps)) }));
 };
+function AnimationCard({ children }) {
+    return (jsx("div", { className: "tw-flex tw-h-[130px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-animation-bg tw-py-squid-s tw-text-material-light-thin mobile-xs-height:tw-h-[160px]", style: {
+            // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
+            boxShadow: "0 1px 0 currentColor",
+        }, children: children }));
+}
 
 const borderRadiusClassMap = {
     sm: "tw-rounded-menu-sm before:tw-rounded-menu-sm",
@@ -19005,6 +19047,10 @@ function ModalContentDivider() {
     return (jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
+function ModalTitle({ title }) {
+    return (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-m tw-py-squid-xs", children: jsx(BodyText, { size: "small", children: title }) }));
+}
+
 function NavigationBar(_a) {
     var { title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, subtitle, paddingRight = 0 } = _a, props = __rest$1(_a, ["title", "displayBackButton", "logoUrl", "transparent", "displayButtonShadows", "onBackButtonClick", "actions", "isLoading", "subtitle", "paddingRight"]);
     return (jsxs("nav", Object.assign({}, props, { className: cn("tw-flex tw-max-h-[120px] tw-flex-row-reverse tw-text-grey-300 mobile-xs-height:tw-flex-col", transparent ? "tw-bg-transparent" : "tw-bg-grey-900", props.className), children: [jsxs("div", { className: cn("tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs tw-pl-squid-m", displayBackButton
@@ -19062,7 +19108,7 @@ function LogoContainer({ children }) {
     return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, }) {
     var _a, _b;
     const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
     const WalletButtonTag = isWalletButtonInteractive ? "button" : "div";
@@ -19071,13 +19117,13 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
         !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) &&
         !!token &&
         (!!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) || !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel));
-    return (jsxs("section", { className: "tw-relative tw-flex tw-h-full tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-pb-squid-m mobile-lg:tw-w-card-large", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), showWalletButtonLabel && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+    return (jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), showWalletButtonLabel && (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-300"
                                                     : "tw-text-royal-500", children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-600"
-                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
                     symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : "",
                     price: tokenPrice,
@@ -19086,7 +19132,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                 }, balance: balance, criticalPriceImpactPercentage: criticalPriceImpactPercentage, error: error, formatIfVerySmall: {
                     token: "0.001",
                     usd: "0.01",
-                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: showNumericInputDetails, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading })] }));
+                }, maxUsdDecimals: maxUsdDecimals, isLoading: isFetching, priceImpactPercentage: priceImpactPercentage, showDetails: showNumericInputDetails, direction: direction, forcedAmount: amount, inputModeButton: inputModeButton, balanceButton: balanceButton, isInteractive: isInputInteractive && !isLoading, debounceInput: debounceInput })] }));
 }
 
 function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, actions, subtitle, title, }) {
@@ -27373,7 +27419,7 @@ function NumericInput(_a) {
     var { priceImpactPercentage, balance = "0", error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 2, formatIfVerySmall = {
         token: "0.001",
         usd: "0.01",
-    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
+    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, debounceInput = true } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton", "debounceInput"]);
     const [inputValue, setInputValue] = useState("");
     const [userInputType, setUserInputType] = useState(UserInputType.TOKEN);
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
@@ -27388,16 +27434,14 @@ function NumericInput(_a) {
             ? safeNewValue
             : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
-    }, [userInputType, token.price, direction, token.decimals]);
+    }, [userInputType, token.price, token.decimals]);
     const onBalanceButtonClick = useCallback(() => {
         if (balanceChipClickable) {
             updateInputValue(balance);
             onAmountChange(balance);
         }
-    }, [balance, direction, onAmountChange, updateInputValue]);
-    const onAmountChangeDebounced = useCallback(debounce$1(onAmountChange, 1000), [
-        onAmountChange,
-    ]);
+    }, [balance, onAmountChange, updateInputValue]);
+    const onAmountChangeDebounced = useCallback(debounce$1(onAmountChange, debounceInput ? 1000 : 0), [onAmountChange]);
     const handleInputChange = (e) => {
         const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
         const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
@@ -27518,9 +27562,9 @@ function NumericInput(_a) {
     }, [userInputType, balance, token.price]);
     const containerClassname = "tw-px-squid-xs !tw-h-full tw-pt-squid-xxs mobile-xs-height:tw-pb-squid-s tw-text-heading-small tw-font-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = useRef(null);
-    return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
+    return (jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-cursor-default tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
@@ -27537,114 +27581,6 @@ function NumericInput(_a) {
                                 : notInteractiveChipClassName), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxs("div", { children: [userInputType === UserInputType.USD && (jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsx(CaptionText, { children: balanceFormatted })] }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsx(Chip, { label: "Max" })] }) }))] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
-    const [isInputVisible, setIsInputVisible] = useState(false);
-    const [inputValue, setInputValue] = useState(String(value !== null && value !== void 0 ? value : 0));
-    useEffect(() => {
-        if (!isInputVisible)
-            return;
-        const handleOutsideClick = (event) => {
-            var _a;
-            const clickedElementIsDifferentThanMenu = event.target !== menuRef.current;
-            const clickedElementIsDifferentThanSlider = event.target !== sliderRef.current;
-            const sliderContainsClickedElement = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
-            const hideInput = clickedElementIsDifferentThanMenu &&
-                (!clickedElementIsDifferentThanSlider || !sliderContainsClickedElement);
-            if (hideInput) {
-                handleCloseInput();
-            }
-        };
-        document.addEventListener("click", handleOutsideClick);
-        return () => {
-            document.removeEventListener("click", handleOutsideClick);
-        };
-    }, [isInputVisible]);
-    const menuRef = useRef(null);
-    const sliderRef = useRef(null);
-    const handleSubmit = useCallback((value) => {
-        handleCloseInput();
-        onChange === null || onChange === void 0 ? void 0 : onChange(value === "" ? undefined : Number(value));
-    }, [onChange]);
-    const handleKeyDown = useCallback((e) => {
-        // block unwanted (but still valid) characters
-        if (["e", "E", "+", "-"].includes(e.key)) {
-            e.preventDefault();
-            return;
-        }
-        // close input when pressing escape
-        if (e.key === "Escape") {
-            handleCloseInput();
-        }
-    }, []);
-    const handleOpenInput = useCallback(() => {
-        setIsInputVisible(true);
-    }, []);
-    const handleCloseInput = useCallback(() => {
-        setIsInputVisible(false);
-    }, []);
-    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn("tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption tw-font-caption tw-leading-[10px] -tw-outline-offset-2 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin", value === 0 || value === undefined
-                    ? "tw-text-grey-600"
-                    : "tw-text-grey-300", isInputVisible ? "tw-bg-material-light-thin" : "tw-bg-transparent", isSelected && "tw-outline tw-outline-2 tw-outline-royal-500"), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === "percentage" ? "%" : "$" })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
-                        e.preventDefault();
-                        handleSubmit(inputValue);
-                    }, children: jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
-                            const isValid = e.target.checkValidity();
-                            if (!isValid)
-                                return;
-                            setInputValue(e.target.value);
-                        }, showIcon: false, actionButtonProps: {
-                            label: "Ok",
-                            onClick: () => {
-                                handleSubmit(inputValue);
-                            },
-                            variant: "primary",
-                        } }) }) }))] }));
-}
-
-const switchSizeClassMap = {
-    small: "tw-w-[36px] tw-h-squid-m tw-p-0.5",
-    large: "tw-w-[54px] tw-h-squid-l tw-p-[3px]",
-};
-const switchKnobSizeClassMap = {
-    small: "tw-w-4 tw-h-4",
-    large: "tw-w-6 tw-h-6",
-};
-const switchKnobCheckedClassMap = {
-    large: {
-        checked: "tw-left-[26px]",
-        unchecked: "tw-left-[2px]",
-    },
-    small: {
-        checked: "tw-left-[17px]",
-        unchecked: "tw-left-[1px]",
-    },
-};
-function Switch({ checked = false, onChange, size, disabled = false, inputProps, }) {
-    return (
-    // Switch container
-    jsxs("label", { className: clsx("tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors", 
-        // size styles
-        switchSizeClassMap[size], 
-        // checked styles
-        disabled || !checked ? "tw-bg-grey-800" : "tw-bg-status-positive", 
-        // disabled styles
-        disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer", 
-        // Focus visible styles
-        "tw-focus-visible-within-outline"), children: [jsx("input", Object.assign({}, inputProps, { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" })), jsx("span", { style: {
-                    filter: disabled
-                        ? "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.10))"
-                        : "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
-                }, className: clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all", 
-                // size styles
-                switchKnobSizeClassMap[size], 
-                // checked styles
-                switchKnobCheckedClassMap[size][checked ? "checked" : "unchecked"], disabled
-                    ? "group-data-[squid-theme-type=dark]:tw-bg-grey-700 group-data-[squid-theme-type=light]:tw-bg-grey-900"
-                    : checked
-                        ? "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900"
-                        : "tw-bg-grey-500") })] }));
-}
-
 function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
     const [pressedButton, setPressedButton] = useState(null);
     const inputRef = useRef(null);
@@ -27756,6 +27692,114 @@ function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarnin
                             }, onMouseLeave: handleUpdateValue, className: cn("tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xxs tw-text-left tw-text-caption tw-font-caption tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin"), children: jsx(CirclePlusIcon, {}) })] })] }) }));
 }
 
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
+    const [isInputVisible, setIsInputVisible] = useState(false);
+    const [inputValue, setInputValue] = useState(String(value !== null && value !== void 0 ? value : 0));
+    useEffect(() => {
+        if (!isInputVisible)
+            return;
+        const handleOutsideClick = (event) => {
+            var _a;
+            const clickedElementIsDifferentThanMenu = event.target !== menuRef.current;
+            const clickedElementIsDifferentThanSlider = event.target !== sliderRef.current;
+            const sliderContainsClickedElement = (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target);
+            const hideInput = clickedElementIsDifferentThanMenu &&
+                (!clickedElementIsDifferentThanSlider || !sliderContainsClickedElement);
+            if (hideInput) {
+                handleCloseInput();
+            }
+        };
+        document.addEventListener("click", handleOutsideClick);
+        return () => {
+            document.removeEventListener("click", handleOutsideClick);
+        };
+    }, [isInputVisible]);
+    const menuRef = useRef(null);
+    const sliderRef = useRef(null);
+    const handleSubmit = useCallback((value) => {
+        handleCloseInput();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value === "" ? undefined : Number(value));
+    }, [onChange]);
+    const handleKeyDown = useCallback((e) => {
+        // block unwanted (but still valid) characters
+        if (["e", "E", "+", "-"].includes(e.key)) {
+            e.preventDefault();
+            return;
+        }
+        // close input when pressing escape
+        if (e.key === "Escape") {
+            handleCloseInput();
+        }
+    }, []);
+    const handleOpenInput = useCallback(() => {
+        setIsInputVisible(true);
+    }, []);
+    const handleCloseInput = useCallback(() => {
+        setIsInputVisible(false);
+    }, []);
+    return (jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxs("button", { className: cn("tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xs tw-pr-[40px] tw-text-left tw-text-caption tw-font-caption tw-leading-[10px] -tw-outline-offset-2 placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin", value === 0 || value === undefined
+                    ? "tw-text-grey-600"
+                    : "tw-text-grey-300", isInputVisible ? "tw-bg-material-light-thin" : "tw-bg-transparent", isSelected && "tw-outline tw-outline-2 tw-outline-royal-500"), children: [value !== null && value !== void 0 ? value : 0, jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === "percentage" ? "%" : "$" })] }), jsx("button", { onClick: handleOpenInput, className: "tw-absolute tw-right-squid-xs tw-flex tw-h-[26px] tw-w-[26px] tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-xxs !tw-font-medium tw-leading-[10px] hover:tw-bg-material-light-thin", children: jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsx("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        handleSubmit(inputValue);
+                    }, children: jsx(Input, { autoFocus: true, min: min, max: max, onKeyDown: handleKeyDown, step: decimalsFormat, placeholder: "0", type: "number", defaultValue: value, value: inputValue, onChange: (e) => {
+                            const isValid = e.target.checkValidity();
+                            if (!isValid)
+                                return;
+                            setInputValue(e.target.value);
+                        }, showIcon: false, actionButtonProps: {
+                            label: "Ok",
+                            onClick: () => {
+                                handleSubmit(inputValue);
+                            },
+                            variant: "primary",
+                        } }) }) }))] }));
+}
+
+const switchSizeClassMap = {
+    small: "tw-w-[36px] tw-h-squid-m tw-p-0.5",
+    large: "tw-w-[54px] tw-h-squid-l tw-p-[3px]",
+};
+const switchKnobSizeClassMap = {
+    small: "tw-w-4 tw-h-4",
+    large: "tw-w-6 tw-h-6",
+};
+const switchKnobCheckedClassMap = {
+    large: {
+        checked: "tw-left-[26px]",
+        unchecked: "tw-left-[2px]",
+    },
+    small: {
+        checked: "tw-left-[17px]",
+        unchecked: "tw-left-[1px]",
+    },
+};
+function Switch({ checked = false, onChange, size, disabled = false, inputProps, }) {
+    return (
+    // Switch container
+    jsxs("label", { className: clsx("tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors", 
+        // size styles
+        switchSizeClassMap[size], 
+        // checked styles
+        disabled || !checked ? "tw-bg-grey-800" : "tw-bg-status-positive", 
+        // disabled styles
+        disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer", 
+        // Focus visible styles
+        "tw-focus-visible-within-outline"), children: [jsx("input", Object.assign({}, inputProps, { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" })), jsx("span", { style: {
+                    filter: disabled
+                        ? "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.10))"
+                        : "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
+                }, className: clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all", 
+                // size styles
+                switchKnobSizeClassMap[size], 
+                // checked styles
+                switchKnobCheckedClassMap[size][checked ? "checked" : "unchecked"], disabled
+                    ? "group-data-[squid-theme-type=dark]:tw-bg-grey-700 group-data-[squid-theme-type=light]:tw-bg-grey-900"
+                    : checked
+                        ? "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900"
+                        : "tw-bg-grey-500") })] }));
+}
+
 const imageWrapperClassName = "tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center";
 const tokenImageClassName = "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover";
 const themeKeyVariantMap = {
@@ -69390,10 +69434,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                     ? ""
                     : showSwapInfoSection
                         ? "tw-animate-scale-and-fade-up"
-                        : "tw-animate-scale-and-fade-down"), children: [jsx("div", { className: "tw-flex tw-h-[130px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-animation-bg tw-py-squid-s tw-text-material-light-thin mobile-xs-height:tw-h-[160px]", style: {
-                            // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
-                            boxShadow: "0 1px 0 currentColor",
-                        }, children: jsx(AnimationWrapper, { style: {
+                        : "tw-animate-scale-and-fade-down"), children: [jsx(AnimationCard, { children: jsx(AnimationWrapper, { style: {
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
@@ -69730,6 +69771,12 @@ const parseSquidTheme = (userTheme, themeType) => {
         "button-md-secondary-text": fullPublicTheme.color["grey-800"],
         "button-md-tertiary-bg": fullPublicTheme.color["grey-800"],
         "button-md-tertiary-text": fullPublicTheme.color["grey-300"],
+        "button-sm-primary-bg": fullPublicTheme.color["royal-500"],
+        "button-sm-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
+        "button-sm-secondary-bg": fullPublicTheme.color["grey-100"],
+        "button-sm-secondary-text": fullPublicTheme.color["grey-800"],
+        "button-sm-tertiary-bg": fullPublicTheme.color["grey-800"],
+        "button-sm-tertiary-text": fullPublicTheme.color["grey-300"],
     };
     const defaultInputColors = {
         "input-placeholder": fullPublicTheme.color["grey-600"],
@@ -69885,4 +69932,4 @@ function ThemeProvider(_a) {
     return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-flex tw-font-squid-main tw-h-d-screen mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, 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, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, 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, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, 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$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationCard, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, 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, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, 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, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, 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$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ChipProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
     label?: string;
     icon?: React.ReactNode;
 }

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

@@ -0,0 +1,6 @@
+interface LargeNumericInputProps {
+    value?: string;
+    onChange: (value: string) => void;
+}
+export declare function LargeNumericInput({ onChange, value }: LargeNumericInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -34,6 +34,7 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
         tooltip?: Omit<TooltipProps, "children">;
         hideMaxChip?: boolean;
     };
+    debounceInput?: boolean;
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,7 @@
 export * from "./Input";
+export * from "./LargeNumericInput";
 export * from "./NumericInput";
+export * from "./RangeInput";
 export * from "./SettingsSlider";
 export * from "./Switch";
 export * from "./Tooltip";
-export * from "./RangeInput";

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

@@ -3,4 +3,7 @@ import { Player } from "@lottiefiles/react-lottie-player";
 interface Props extends React.ComponentProps<typeof Player> {
 }
 export declare const AnimationWrapper: (playerProps: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function AnimationCard({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,5 @@
+interface ModalTitleProps {
+    title: string;
+}
+export declare function ModalTitle({ title }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -48,6 +48,8 @@ interface SwapConfigurationProps {
         disabled?: boolean;
     };
     showNumericInputDetails?: boolean;
+    fullHeight?: boolean;
+    debounceInput?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export 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, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,6 +16,7 @@ export * from "./Join";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./ModalContent";
+export * from "./ModalTitle";
 export * from "./NavigationBar";
 export * from "./PipeSeparator";
 export * from "./ProductCard";

package/dist/esm/types/stories/buttons/Chip.stories.d.ts

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Chip } from "../../components/buttons/Chip";
 declare const meta: Meta<typeof Chip>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Text: Story;
 export declare const Icon: Story;
+export declare const Interactive: Story;

package/dist/esm/types/stories/controls/Input.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Input } from "../../components/controls/Input";
 declare const meta: Meta<typeof Input>;
 export default meta;

package/dist/esm/types/stories/controls/LargeNumericInput.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { LargeNumericInput } from "../../components/controls/LargeNumericInput";
+declare const meta: Meta<typeof LargeNumericInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/types/stories/layout/SwapConfiguration.stories.d.ts

@@ -4,7 +4,9 @@ declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const EmptyVariantPrimary: Story;
+export declare const EmptyVariantPrimaryLoading: Story;
 export declare const EmptyVariantWithoutNumericInputDetails: Story;
+export declare const WithoutNumericInputDetailsLoading: Story;
 export declare const EmptyVariantAccent: Story;
 export declare const Loading: Story;
 export declare const LoadingWithAllProps: Story;