@0xsquid/ui 0.7.3 → 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',
@@ -3144,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'
@@ -3152,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, }) {
@@ -3279,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/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/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/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',
@@ -3142,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'
@@ -3150,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, }) {
@@ -3254,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/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/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/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';
@@ -291,6 +301,7 @@ interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
     amount?: string;
+    forcedAmount?: string;
     swapAmountUsd?: string;
     balance?: string;
     isFetching?: boolean;
@@ -305,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;
@@ -408,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.3",
+  "version": "0.7.4",
   "author": "",
   "license": "MIT",
   "scripts": {