@0xsquid/ui 0.7.2 → 0.7.4

package/dist/cjs/index.js

@@ -2532,6 +2532,24 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
+function debounce(func, delay) {
+    let timeoutId;
+    const debounced = function (...args) {
+        // @ts-expect-error - 'this' implicitly has type 'any' because it does not have a type annotation.
+        const context = this;
+        const later = () => {
+            timeoutId = null;
+            func.apply(context, args);
+        };
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(later, delay);
+    };
+    debounced.cancel = () => {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+    };
+    return debounced;
+}
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2794,6 +2812,135 @@ const PasteButton = () => {
     return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
 };
 
+const NumericInput = (_a) => {
+    var _b;
+    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "sourceTokenUsdPrice"]);
+    const [inputValue, setInputValue] = react.useState(initialValue);
+    // Probably a better way to handle this
+    // This was introduce to handle the "MAX" button setting an amount
+    // Other than that, this component is only sending value to the exterior
+    // Without this, we were losing inputs such as ".05" that were forced parsed to "0.05" after debounce
+    react.useEffect(() => {
+        if (forcedUpdateValue && forcedUpdateValue !== '0') {
+            setInputValue(forcedUpdateValue);
+        }
+    }, [forcedUpdateValue]);
+    /**
+     * Get the number of decimals of inputValue
+     * If there are more decimals than the maxDecimals
+     * remove the extra decimals
+     */
+    react.useEffect(() => {
+        var _a;
+        const split = inputValue.split('.');
+        if (split.length > 1) {
+            const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+            if (maxDecimals && decimals.length > maxDecimals) {
+                const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
+                setInputValue(newValue);
+                onParsedValueChanged(newValue);
+            }
+        }
+    }, [maxDecimals]);
+    const debouncePriceChanged = (value = '') => {
+        if (value.endsWith('.'))
+            return;
+        onParsedValueChanged(value);
+    };
+    // useCallback to memoizes the debounce function, prevents recreating it
+    const debouncePriceUpdate = react.useCallback(debounce(debouncePriceChanged, 700), []);
+    const handlePriceChanged = (event) => {
+        var _a;
+        try {
+            const formattedInput = event.currentTarget.value
+                .replace(/[^0-9\.\,$%]/g, '')
+                .replace(',', '.');
+            if (formattedInput.includes('$') || formattedInput.includes('%')) {
+                let cleanedInput = formattedInput;
+                if (formattedInput.includes('$') && formattedInput.includes('%')) {
+                    // only allow one of them
+                    cleanedInput = formattedInput
+                        .replaceAll('$', '')
+                        .replaceAll('%', '')
+                        .concat('%');
+                }
+                else if (formattedInput.includes('%')) {
+                    // remove duplicates & always add % at the end
+                    cleanedInput = formattedInput.replaceAll('%', '').concat('%');
+                }
+                else if (formattedInput.includes('$')) {
+                    // Always add $ at the beginning
+                    cleanedInput = formattedInput.replaceAll('$', '');
+                    cleanedInput = `$${cleanedInput}`;
+                }
+                setInputValue(cleanedInput);
+                debouncePriceUpdate.cancel();
+                return;
+            }
+            // This is to prevent the user from typing more decimals than the decimals attribute of the token
+            if (maxDecimals !== undefined) {
+                const split = formattedInput.split('.');
+                if (split.length > 1) {
+                    const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+                    if (decimals.length > maxDecimals) {
+                        // Don't update anything
+                        return;
+                    }
+                }
+            }
+            // if input includes at least one character different than `0` (zero), `.` (dot), or `,` (comma)
+            // means that user is typing a valid amount, for example: 1.02 or 0.005
+            // if so, then update the input value and fetch the price
+            if (/[^0,.]/.test(formattedInput)) {
+                setInputValue(formattedInput);
+                debouncePriceUpdate(formattedInput);
+            }
+            else if (
+            // Means the user is currently typing and will add decimal, no need to fetch or parse
+            // example input: 0.00
+            (formattedInput.includes('.') && formattedInput.endsWith('0')) ||
+                formattedInput.endsWith('.') ||
+                (formattedInput === '0' && (inputValue === '' || inputValue === '0'))) {
+                setInputValue(formattedInput);
+            }
+            else if (!isNaN(+formattedInput)) {
+                setInputValue(formattedInput.toString());
+                debouncePriceUpdate(formattedInput.toString());
+                // onParsedValueChanged(formattedInput.toString());
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        catch (error) {
+            setInputValue('');
+        }
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (inputValue.includes('%')) {
+            const percentage = Number(inputValue.replace('%', ''));
+            // If the percentage is greater than 100, set it to 100
+            const formattedPercentage = percentage > 100 ? 100 : percentage;
+            const valueByPercentage = Number(balance) * (formattedPercentage / 100);
+            // If the value is 0, we want to show 0, not 0.0000
+            const formattedValue = valueByPercentage === 0 ? '0' : valueByPercentage.toFixed(4);
+            setInputValue(formattedValue);
+            onParsedValueChanged(formattedValue);
+        }
+        if (inputValue.includes('$')) {
+            const usdAmount = Number(inputValue.replace('$', ''));
+            if (usdAmount > 0) {
+                const newValue = usdAmount / Number(sourceTokenUsdPrice !== null && sourceTokenUsdPrice !== void 0 ? sourceTokenUsdPrice : 0);
+                const newValueFormatted = newValue.toFixed(4);
+                setInputValue(newValueFormatted);
+                onParsedValueChanged(newValueFormatted);
+            }
+        }
+    };
+    return (jsxRuntime.jsx("form", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", onSubmit: handleSubmit, children: jsxRuntime.jsx("input", Object.assign({}, props, { onChange: handlePriceChanged, value: inputValue, type: "string", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : '0', className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular 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-400 focus:tw-outline-none" })) }));
+};
+
 // font size, line height, and letter spacing classes
 const textClassMap = {
     small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
@@ -3043,15 +3190,20 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
                     ] })) : null] }) }));
 }
 
+function LoadingSkeleton({ className, height = '20', }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+}
+
 const listItemSizeMap = {
     small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName"]);
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("button", { onClick: (event) => {
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null)] }), jsxRuntime.jsxs("button", { onClick: (event) => {
                         // prevent click event from bubbling up to parent
                         event.stopPropagation();
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
@@ -3079,9 +3231,6 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
     return (jsxRuntime.jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsxRuntime.jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), isLoading ? (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-text-grey-500" })) : typeof detail === 'string' ? (jsxRuntime.jsx(CaptionText, { children: detail })) : (detail)] }) }));
 }
-function LoadingSkeleton({ className }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "20", viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
-}
 
 function SwapStepSeparator() {
     return (jsxRuntime.jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsxRuntime.jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
@@ -3142,7 +3291,7 @@ function SwapInputsIcon() {
     return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }) {
     var _a;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
@@ -3150,7 +3299,9 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? 'button' : 'div';
-    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-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 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), 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: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular 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-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "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-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin', direction === 'to' && 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-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 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), 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: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "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-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxRuntime.jsxs(BalanceButtonTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive
+                            ? 'hover:tw-bg-material-light-thin'
+                            : 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3277,6 +3428,7 @@ exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.NavigationBar = NavigationBar;
+exports.NumericInput = NumericInput;
 exports.ProductCard = ProductCard;
 exports.SectionTitle = SectionTitle;
 exports.SettingsButton = SettingsButton;

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

@@ -0,0 +1,4 @@
+export declare function LoadingSkeleton({ className, height, }: {
+    className?: string;
+    height?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from 'react';
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    onParsedValueChanged: (value: string) => void;
+    initialValue?: string;
+    forcedUpdateValue?: string;
+    maxDecimals?: number;
+    balance?: string;
+    sourceTokenUsdPrice?: number;
+}
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 export * from './Input';
+export * from './NumericInput';
 export * from './SettingsSlider';
 export * from './Switch';
 export * from './Tooltip';

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -18,12 +18,13 @@ interface SwapConfigurationProps {
         textColor: string;
     };
     address?: string;
-    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,7 +14,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     showDetailOnHoverOnly?: boolean;
     rounded?: boolean;
     detailButtonClassName?: string;
+    loading?: {
+        subtitle?: boolean;
+    };
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,3 +8,10 @@ import { ClassValue } from 'clsx';
  * @returns The combined class names as a string.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;
+type AnyFunction = (...args: any[]) => any;
+interface DebouncedFunction<F extends AnyFunction> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
+export {};

package/dist/cjs/types/stories/lists/ListItem.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeWithLongTitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
@@ -13,7 +14,9 @@ export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
+export declare const LargeLoading: Story;
 export declare const Small: Story;
+export declare const SmallWithLongTitle: Story;
 export declare const SmallWithIcon: Story;
 export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2530,6 +2530,24 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 const cn = (...inputs) => {
     return twMerge(clsx(inputs));
 };
+function debounce(func, delay) {
+    let timeoutId;
+    const debounced = function (...args) {
+        // @ts-expect-error - 'this' implicitly has type 'any' because it does not have a type annotation.
+        const context = this;
+        const later = () => {
+            timeoutId = null;
+            func.apply(context, args);
+        };
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(later, delay);
+    };
+    debounced.cancel = () => {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+    };
+    return debounced;
+}
 
 const badgeSizeClassMap = {
     sm: 'tw-w-4 tw-h-4',
@@ -2792,6 +2810,135 @@ const PasteButton = () => {
     return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
 };
 
+const NumericInput = (_a) => {
+    var _b;
+    var { onParsedValueChanged, initialValue = '', forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice } = _a, props = __rest(_a, ["onParsedValueChanged", "initialValue", "forcedUpdateValue", "maxDecimals", "balance", "sourceTokenUsdPrice"]);
+    const [inputValue, setInputValue] = useState(initialValue);
+    // Probably a better way to handle this
+    // This was introduce to handle the "MAX" button setting an amount
+    // Other than that, this component is only sending value to the exterior
+    // Without this, we were losing inputs such as ".05" that were forced parsed to "0.05" after debounce
+    useEffect(() => {
+        if (forcedUpdateValue && forcedUpdateValue !== '0') {
+            setInputValue(forcedUpdateValue);
+        }
+    }, [forcedUpdateValue]);
+    /**
+     * Get the number of decimals of inputValue
+     * If there are more decimals than the maxDecimals
+     * remove the extra decimals
+     */
+    useEffect(() => {
+        var _a;
+        const split = inputValue.split('.');
+        if (split.length > 1) {
+            const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+            if (maxDecimals && decimals.length > maxDecimals) {
+                const newValue = `${split[0]}.${decimals.slice(0, maxDecimals)}`;
+                setInputValue(newValue);
+                onParsedValueChanged(newValue);
+            }
+        }
+    }, [maxDecimals]);
+    const debouncePriceChanged = (value = '') => {
+        if (value.endsWith('.'))
+            return;
+        onParsedValueChanged(value);
+    };
+    // useCallback to memoizes the debounce function, prevents recreating it
+    const debouncePriceUpdate = useCallback(debounce(debouncePriceChanged, 700), []);
+    const handlePriceChanged = (event) => {
+        var _a;
+        try {
+            const formattedInput = event.currentTarget.value
+                .replace(/[^0-9\.\,$%]/g, '')
+                .replace(',', '.');
+            if (formattedInput.includes('$') || formattedInput.includes('%')) {
+                let cleanedInput = formattedInput;
+                if (formattedInput.includes('$') && formattedInput.includes('%')) {
+                    // only allow one of them
+                    cleanedInput = formattedInput
+                        .replaceAll('$', '')
+                        .replaceAll('%', '')
+                        .concat('%');
+                }
+                else if (formattedInput.includes('%')) {
+                    // remove duplicates & always add % at the end
+                    cleanedInput = formattedInput.replaceAll('%', '').concat('%');
+                }
+                else if (formattedInput.includes('$')) {
+                    // Always add $ at the beginning
+                    cleanedInput = formattedInput.replaceAll('$', '');
+                    cleanedInput = `$${cleanedInput}`;
+                }
+                setInputValue(cleanedInput);
+                debouncePriceUpdate.cancel();
+                return;
+            }
+            // This is to prevent the user from typing more decimals than the decimals attribute of the token
+            if (maxDecimals !== undefined) {
+                const split = formattedInput.split('.');
+                if (split.length > 1) {
+                    const decimals = (_a = split[1]) !== null && _a !== void 0 ? _a : '';
+                    if (decimals.length > maxDecimals) {
+                        // Don't update anything
+                        return;
+                    }
+                }
+            }
+            // if input includes at least one character different than `0` (zero), `.` (dot), or `,` (comma)
+            // means that user is typing a valid amount, for example: 1.02 or 0.005
+            // if so, then update the input value and fetch the price
+            if (/[^0,.]/.test(formattedInput)) {
+                setInputValue(formattedInput);
+                debouncePriceUpdate(formattedInput);
+            }
+            else if (
+            // Means the user is currently typing and will add decimal, no need to fetch or parse
+            // example input: 0.00
+            (formattedInput.includes('.') && formattedInput.endsWith('0')) ||
+                formattedInput.endsWith('.') ||
+                (formattedInput === '0' && (inputValue === '' || inputValue === '0'))) {
+                setInputValue(formattedInput);
+            }
+            else if (!isNaN(+formattedInput)) {
+                setInputValue(formattedInput.toString());
+                debouncePriceUpdate(formattedInput.toString());
+                // onParsedValueChanged(formattedInput.toString());
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        catch (error) {
+            setInputValue('');
+        }
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (inputValue.includes('%')) {
+            const percentage = Number(inputValue.replace('%', ''));
+            // If the percentage is greater than 100, set it to 100
+            const formattedPercentage = percentage > 100 ? 100 : percentage;
+            const valueByPercentage = Number(balance) * (formattedPercentage / 100);
+            // If the value is 0, we want to show 0, not 0.0000
+            const formattedValue = valueByPercentage === 0 ? '0' : valueByPercentage.toFixed(4);
+            setInputValue(formattedValue);
+            onParsedValueChanged(formattedValue);
+        }
+        if (inputValue.includes('$')) {
+            const usdAmount = Number(inputValue.replace('$', ''));
+            if (usdAmount > 0) {
+                const newValue = usdAmount / Number(sourceTokenUsdPrice !== null && sourceTokenUsdPrice !== void 0 ? sourceTokenUsdPrice : 0);
+                const newValueFormatted = newValue.toFixed(4);
+                setInputValue(newValueFormatted);
+                onParsedValueChanged(newValueFormatted);
+            }
+        }
+    };
+    return (jsx("form", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", onSubmit: handleSubmit, children: jsx("input", Object.assign({}, props, { onChange: handlePriceChanged, value: inputValue, type: "string", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : '0', className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular 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-400 focus:tw-outline-none" })) }));
+};
+
 // font size, line height, and letter spacing classes
 const textClassMap = {
     small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
@@ -3041,15 +3188,20 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
                     ] })) : null] }) }));
 }
 
+function LoadingSkeleton({ className, height = '20', }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsx("g", { mask: "url(#mask0_1083_18992)", children: jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsx("clipPath", { id: "clip0_1083_18992", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+}
+
 const listItemSizeMap = {
     small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName"]);
-    return (jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded = false, detailButtonClassName, loading } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading"]);
+    return (jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("div", { className: cn('tw-flex tw-w-full tw-max-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxs("button", { onClick: (event) => {
+                    size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-max-w-full tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' &&
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null)] }), jsxs("button", { onClick: (event) => {
                         // prevent click event from bubbling up to parent
                         event.stopPropagation();
                         onDetailClick === null || onDetailClick === void 0 ? void 0 : onDetailClick();
@@ -3077,9 +3229,6 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
 function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
     return (jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), isLoading ? (jsx(LoadingSkeleton, { className: "tw-text-grey-500" })) : typeof detail === 'string' ? (jsx(CaptionText, { children: detail })) : (detail)] }) }));
 }
-function LoadingSkeleton({ className }) {
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "20", viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsx("g", { mask: "url(#mask0_1083_18992)", children: jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsx("clipPath", { id: "clip0_1083_18992", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
-}
 
 function SwapStepSeparator() {
     return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
@@ -3140,7 +3289,7 @@ function SwapInputsIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }) {
     var _a;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
@@ -3148,7 +3297,9 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? 'button' : 'div';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular 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-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "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-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin', direction === 'to' && 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-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 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsx(NumericInput, { forcedUpdateValue: forcedAmount, initialValue: amount, onParsedValueChanged: (value) => onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "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-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] })), jsxs(BalanceButtonTag, { onClick: onBalanceButtonClick, className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive
+                            ? 'hover:tw-bg-material-light-thin'
+                            : 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
@@ -3252,4 +3403,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: clsx('tw-text-base-content tw-group tw-relative tw-font-geist'), children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useModal };

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

@@ -0,0 +1,4 @@
+export declare function LoadingSkeleton({ className, height, }: {
+    className?: string;
+    height?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from 'react';
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    onParsedValueChanged: (value: string) => void;
+    initialValue?: string;
+    forcedUpdateValue?: string;
+    maxDecimals?: number;
+    balance?: string;
+    sourceTokenUsdPrice?: number;
+}
+export declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 export * from './Input';
+export * from './NumericInput';
 export * from './SettingsSlider';
 export * from './Switch';
 export * from './Tooltip';

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -18,12 +18,13 @@ interface SwapConfigurationProps {
         textColor: string;
     };
     address?: string;
-    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,7 +14,10 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     showDetailOnHoverOnly?: boolean;
     rounded?: boolean;
     detailButtonClassName?: string;
+    loading?: {
+        subtitle?: boolean;
+    };
 }
 type ListItemSize = 'small' | 'large';
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,3 +8,10 @@ import { ClassValue } from 'clsx';
  * @returns The combined class names as a string.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;
+type AnyFunction = (...args: any[]) => any;
+interface DebouncedFunction<F extends AnyFunction> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends AnyFunction>(func: F, delay: number): DebouncedFunction<F>;
+export {};

package/dist/esm/types/stories/lists/ListItem.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ListItem>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Large: Story;
+export declare const LargeWithLongTitle: Story;
 export declare const LargeRoundedFull: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
@@ -13,7 +14,9 @@ export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
+export declare const LargeLoading: Story;
 export declare const Small: Story;
+export declare const SmallWithLongTitle: Story;
 export declare const SmallWithIcon: Story;
 export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;

package/dist/index.css

@@ -1139,10 +1139,18 @@ video {
   width: 54px;
 }
 
+.tw-w-\[56\%\] {
+  width: 56%;
+}
+
 .tw-w-\[60px\] {
   width: 60px;
 }
 
+.tw-w-\[67\%\] {
+  width: 67%;
+}
+
 .tw-w-\[72px\] {
   width: 72px;
 }
@@ -1245,6 +1253,10 @@ video {
   max-width: 72px;
 }
 
+.tw-max-w-full {
+  max-width: 100%;
+}
+
 .tw-max-w-list-item-large {
   max-width: 23.75rem;
 }
@@ -1279,6 +1291,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-tw-translate-x-6 {
+  --tw-translate-x: -1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-tw-translate-x-\[2px\] {
   --tw-translate-x: -2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
+import React$1, { InputHTMLAttributes } from 'react';
 
 interface BadgeImageProps {
     imageUrl?: string;
@@ -103,6 +103,16 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare function Input({ placeholder, showIcon, showPasteButton, className, icon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    onParsedValueChanged: (value: string) => void;
+    initialValue?: string;
+    forcedUpdateValue?: string;
+    maxDecimals?: number;
+    balance?: string;
+    sourceTokenUsdPrice?: number;
+}
+declare const NumericInput: ({ onParsedValueChanged, initialValue, forcedUpdateValue, maxDecimals, balance, sourceTokenUsdPrice, ...props }: Props) => react_jsx_runtime.JSX.Element;
+
 interface SettingsSliderProps {
     value: number;
     type: 'percentage' | 'amount';
@@ -197,9 +207,12 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     showDetailOnHoverOnly?: boolean;
     rounded?: boolean;
     detailButtonClassName?: string;
+    loading?: {
+        subtitle?: boolean;
+    };
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;
@@ -288,6 +301,7 @@ interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -302,14 +316,15 @@ interface SwapConfigurationProps {
         textColor: string;
     };
     address?: string;
-    onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onAmountChange?: (amount: string) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    onBalanceButtonClick?: () => void;
     error?: {
         message: string;
     };
 }
-declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ priceImpactPercentage, amount, forcedAmount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, onBalanceButtonClick, address, error, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;
@@ -405,4 +420,4 @@ declare function useModal(props?: {
     openModalButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };

package/package.json

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