@0xsquid/ui 2.6.4 → 2.6.6

package/dist/cjs/index.js

@@ -4451,7 +4451,9 @@ function ImageStack(_a) {
 
 function Chip(_a) {
     var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
-    return (jsxRuntime.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 ? (jsxRuntime.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 (jsxRuntime.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 ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
 const loaderSizeMap = {
@@ -4601,6 +4603,40 @@ const InputActionButton = ({ onClick, variant = "tertiary", label = "Paste", })
     return (jsxRuntime.jsx(Button$1, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0 !tw-rounded-input", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
 };
 
+const placeholder = "0";
+const suggestedAmounts = ["100", "500", "1000"];
+function LargeNumericInput({ onChange, value }) {
+    const inputRef = React$1.useRef(null);
+    const inputValueSpyRef = React$1.useRef(null);
+    React$1.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 = React$1.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 (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.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: [jsxRuntime.jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.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 })] }) }), jsxRuntime.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) => (jsxRuntime.jsx(Chip, { label: `$${amount}`, onClick: () => {
+                        onChange(amount);
+                    } }, amount))) })] }));
+}
+
 /*
  *      bignumber.js v9.1.2
  *      A JavaScript library for arbitrary-precision arithmetic.
@@ -8729,6 +8765,12 @@ const AnimationWrapper = (playerProps) => {
     }, []);
     return (jsxRuntime.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 && jsxRuntime.jsx(Player, Object.assign({}, playerProps)) }));
 };
+function AnimationCard({ children }) {
+    return (jsxRuntime.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",
@@ -19025,6 +19067,10 @@ function ModalContentDivider() {
     return (jsxRuntime.jsx("svg", { width: "100%", height: "11", viewBox: "0 0 400 11", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { x: "1", y: "5", width: "398", height: "1", fill: "currentColor" }) }));
 }
 
+function ModalTitle({ title }) {
+    return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.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
@@ -19082,7 +19128,7 @@ function LogoContainer({ children }) {
     return (jsxRuntime.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";
@@ -19091,13 +19137,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 (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.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: jsxRuntime.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: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), showWalletButtonLabel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
+    return (jsxRuntime.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: [jsxRuntime.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: jsxRuntime.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: jsxRuntime.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: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), showWalletButtonLabel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.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 }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-600"
-                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.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: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsxRuntime.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,
@@ -19106,7 +19152,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, }) {
@@ -27393,7 +27439,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] = React$1.useState("");
     const [userInputType, setUserInputType] = React$1.useState(UserInputType.TOKEN);
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
@@ -27408,16 +27454,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 = React$1.useCallback(() => {
         if (balanceChipClickable) {
             updateInputValue(balance);
             onAmountChange(balance);
         }
-    }, [balance, direction, onAmountChange, updateInputValue]);
-    const onAmountChangeDebounced = React$1.useCallback(debounce$1(onAmountChange, 1000), [
-        onAmountChange,
-    ]);
+    }, [balance, onAmountChange, updateInputValue]);
+    const onAmountChangeDebounced = React$1.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;
@@ -27538,9 +27582,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 = React$1.useRef(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.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))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.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: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.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))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.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: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
@@ -27557,114 +27601,6 @@ function NumericInput(_a) {
                                 : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs("div", { children: [userInputType === UserInputType.USD && (jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsxRuntime.jsx(CaptionText, { children: balanceFormatted })] }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsxRuntime.jsx(Chip, { label: "Max" })] }) }))] }))] }));
 }
 
-function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
-    const [isInputVisible, setIsInputVisible] = React$1.useState(false);
-    const [inputValue, setInputValue] = React$1.useState(String(value !== null && value !== void 0 ? value : 0));
-    React$1.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 = React$1.useRef(null);
-    const sliderRef = React$1.useRef(null);
-    const handleSubmit = React$1.useCallback((value) => {
-        handleCloseInput();
-        onChange === null || onChange === void 0 ? void 0 : onChange(value === "" ? undefined : Number(value));
-    }, [onChange]);
-    const handleKeyDown = React$1.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 = React$1.useCallback(() => {
-        setIsInputVisible(true);
-    }, []);
-    const handleCloseInput = React$1.useCallback(() => {
-        setIsInputVisible(false);
-    }, []);
-    return (jsxRuntime.jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.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, jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === "percentage" ? "%" : "$" })] }), jsxRuntime.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: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsxRuntime.jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsxRuntime.jsx("form", { onSubmit: (e) => {
-                        e.preventDefault();
-                        handleSubmit(inputValue);
-                    }, children: jsxRuntime.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
-    jsxRuntime.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: [jsxRuntime.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" })), jsxRuntime.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] = React$1.useState(null);
     const inputRef = React$1.useRef(null);
@@ -27776,6 +27712,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: jsxRuntime.jsx(CirclePlusIcon, {}) })] })] }) }));
 }
 
+function SettingsSlider({ value, type, onChange, decimalsFormat, max, min, isSelected = false, }) {
+    const [isInputVisible, setIsInputVisible] = React$1.useState(false);
+    const [inputValue, setInputValue] = React$1.useState(String(value !== null && value !== void 0 ? value : 0));
+    React$1.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 = React$1.useRef(null);
+    const sliderRef = React$1.useRef(null);
+    const handleSubmit = React$1.useCallback((value) => {
+        handleCloseInput();
+        onChange === null || onChange === void 0 ? void 0 : onChange(value === "" ? undefined : Number(value));
+    }, [onChange]);
+    const handleKeyDown = React$1.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 = React$1.useCallback(() => {
+        setIsInputVisible(true);
+    }, []);
+    const handleCloseInput = React$1.useCallback(() => {
+        setIsInputVisible(false);
+    }, []);
+    return (jsxRuntime.jsxs("div", { ref: sliderRef, className: "tw-relative tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-rounded-squid-xs", children: [jsxRuntime.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, jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium !tw-leading-[10px] tw-text-grey-300", children: type === "percentage" ? "%" : "$" })] }), jsxRuntime.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: jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) }) }), isInputVisible && (jsxRuntime.jsx(Menu, { menuRef: menuRef, containerClassName: "tw-absolute tw-bottom-full tw-z-10 tw-pb-squid-m tw-w-[160px]", children: jsxRuntime.jsx("form", { onSubmit: (e) => {
+                        e.preventDefault();
+                        handleSubmit(inputValue);
+                    }, children: jsxRuntime.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
+    jsxRuntime.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: [jsxRuntime.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" })), jsxRuntime.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 = {
@@ -69410,10 +69454,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                     ? ""
                     : showSwapInfoSection
                         ? "tw-animate-scale-and-fade-up"
-                        : "tw-animate-scale-and-fade-down"), children: [jsxRuntime.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: jsxRuntime.jsx(AnimationWrapper, { style: {
+                        : "tw-animate-scale-and-fade-down"), children: [jsxRuntime.jsx(AnimationCard, { children: jsxRuntime.jsx(AnimationWrapper, { style: {
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
@@ -69750,6 +69791,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"],
@@ -69915,6 +69962,7 @@ exports.ActionRow = ActionRow;
 exports.ActionStatusRow = ActionStatusRow;
 exports.ActionWrapper = ActionWrapper;
 exports.AddressButton = AddressButton;
+exports.AnimationCard = AnimationCard;
 exports.AnimationWrapper = AnimationWrapper;
 exports.Announcement = Announcement;
 exports.AppContainer = AppContainer;
@@ -70065,6 +70113,7 @@ exports.InteractionProperties = InteractionProperties;
 exports.InteractionTransactionView = InteractionTransactionView;
 exports.Join = Join;
 exports.LaptopIcon = LaptopIcon;
+exports.LargeNumericInput = LargeNumericInput;
 exports.LightningIcon = LightningIcon;
 exports.LimitIcon = LimitIcon;
 exports.LinkIcon = LinkIcon;
@@ -70083,6 +70132,7 @@ exports.MirrorIcon = MirrorIcon;
 exports.Modal = Modal;
 exports.ModalContent = ModalContent;
 exports.ModalContentDivider = ModalContentDivider;
+exports.ModalTitle = ModalTitle;
 exports.MoneyBagIcon = MoneyBagIcon;
 exports.MoonIcon = MoonIcon;
 exports.NavigationBar = NavigationBar;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;