@0xsquid/ui 0.24.0 → 0.25.0

package/dist/cjs/index.js

@@ -18578,7 +18578,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? 'tw-text-grey-600'
-                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
+                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
                     symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
                     price: tokenPrice,
@@ -25968,18 +25968,19 @@ const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
 const notInteractiveChipClassName = 'tw-cursor-not-allowed';
 const loadingClassName = 'tw-opacity-50';
-var InputMode;
-(function (InputMode) {
-    InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
-    InputMode[InputMode["USD"] = 1] = "USD";
-})(InputMode || (InputMode = {}));
-function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
-    token: '0.001',
-    usd: '0.01',
-}, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
-    var _a;
+var UserInputType;
+(function (UserInputType) {
+    UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
+    UserInputType[UserInputType["USD"] = 1] = "USD";
+})(UserInputType || (UserInputType = {}));
+function NumericInput(_a) {
+    var _b;
+    var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
+        token: '0.001',
+        usd: '0.01',
+    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
     const [inputValue, setInputValue] = React$1.useState('');
-    const [inputMode, setInputMode] = React$1.useState(InputMode.TOKEN);
+    const [userInputType, setUserInputType] = React$1.useState(UserInputType.TOKEN);
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     React$1.useEffect(() => {
         if (forcedAmount !== undefined) {
@@ -25988,11 +25989,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [forcedAmount]);
     const updateInputValue = React$1.useCallback((newValue) => {
         const safeNewValue = trimExtraDecimals(newValue, token.decimals);
-        const formattedAmount = inputMode === InputMode.TOKEN
+        const formattedAmount = userInputType === UserInputType.TOKEN
             ? safeNewValue
             : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
-    }, [inputMode, token.price, direction, token.decimals]);
+    }, [userInputType, token.price, direction, token.decimals]);
     const onBalanceButtonClick = React$1.useCallback(() => {
         if (balanceChipClickable) {
             updateInputValue(balance);
@@ -26004,7 +26005,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     ]);
     const handleInputChange = (e) => {
         let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
-        const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxUsdDecimals;
+        const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
             setInputValue(value);
@@ -26023,12 +26024,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const handleSwitchInputMode = () => {
         var _a;
         if (inputValue !== '') {
-            const convertedAmount = inputMode === InputMode.TOKEN
+            const convertedAmount = userInputType === UserInputType.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
                 : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
-        setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+        setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
+            ? UserInputType.USD
+            : UserInputType.TOKEN);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getRawAmounts = (amount) => {
@@ -26039,7 +26042,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                 isTokenAmountVerySmall: false,
                 isUsdAmountVerySmall: false,
             };
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -26079,7 +26082,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         var _a;
         if (isNaN(Number(inputValue)) || inputValue === '')
             return '0';
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             if (direction === 'from') {
                 return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
@@ -26092,13 +26095,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         }
     }, [
         inputValue,
-        inputMode,
+        userInputType,
         token.price,
         direction,
         inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
     ]);
     const AmountChip = isInteractive ? 'button' : 'div';
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
+    const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
@@ -26109,13 +26112,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const inputRef = React$1.useRef(null);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), 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 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-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 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
-                        : inputMode === InputMode.TOKEN
+                        : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
                             : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
                                                     ? formatIfVerySmall.token
                                                     : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
                                                 ? formatIfVerySmall.token
@@ -26418,6 +26421,11 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
     return (jsxRuntime.jsx("button", { onClick: onClick, className: cn('tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs -tw-outline-offset-2 hover:tw-bg-material-light-thin', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), children: jsxRuntime.jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
+const IconButton = (_a) => {
+    var { icon } = _a, props = __rest$1(_a, ["icon"]);
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { className: cn('tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', props.disabled ? 'tw-text-grey-600' : 'tw-text-grey-300', props.className), children: icon })));
+};
+
 function ArrowRotate() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M3.333 2.667v2c0 .368.299.666.667.666h1.833m6.841 8v-2a.667.667 0 00-.666-.666h-2M2.667 8A5.333 5.333 0 008 13.333c1.757 0 3.353-.85 4.333-2.161m1-3.172A5.333 5.333 0 008 2.667c-1.758 0-3.354.85-4.333 2.161" }) }));
 }
@@ -62171,6 +62179,7 @@ exports.HeartSmallIcon = HeartSmallIcon;
 exports.HelpIcon = HelpIcon;
 exports.HistoryItem = HistoryItem;
 exports.HomeIcon = HomeIcon;
+exports.IconButton = IconButton;
 exports.IconLabel = IconLabel;
 exports.ImageIcon = ImageIcon;
 exports.ImageSparkle = ImageSparkle;

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

@@ -7,3 +7,5 @@ export * from './Chip';
 export * from './FeeButton';
 export * from './FilterButton';
 export * from './SettingsButton';
+export * from './IconButton';
+export * from './SettingsButton';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 import { TooltipProps } from './Tooltip';
 interface Token {
@@ -5,7 +6,7 @@ interface Token {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps {
+interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     token: Token;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -33,5 +34,5 @@ interface NumericInputProps {
         tooltip?: Omit<TooltipProps, 'children'>;
     };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/index.js

@@ -18558,7 +18558,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? 'tw-text-grey-600'
-                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
+                                                    : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
                     symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
                     price: tokenPrice,
@@ -25948,18 +25948,19 @@ const RegExpNonZeroValue = /[^0.]/;
 const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
 const notInteractiveChipClassName = 'tw-cursor-not-allowed';
 const loadingClassName = 'tw-opacity-50';
-var InputMode;
-(function (InputMode) {
-    InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
-    InputMode[InputMode["USD"] = 1] = "USD";
-})(InputMode || (InputMode = {}));
-function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
-    token: '0.001',
-    usd: '0.01',
-}, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
-    var _a;
+var UserInputType;
+(function (UserInputType) {
+    UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
+    UserInputType[UserInputType["USD"] = 1] = "USD";
+})(UserInputType || (UserInputType = {}));
+function NumericInput(_a) {
+    var _b;
+    var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
+        token: '0.001',
+        usd: '0.01',
+    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
     const [inputValue, setInputValue] = useState('');
-    const [inputMode, setInputMode] = useState(InputMode.TOKEN);
+    const [userInputType, setUserInputType] = useState(UserInputType.TOKEN);
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     useEffect(() => {
         if (forcedAmount !== undefined) {
@@ -25968,11 +25969,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     }, [forcedAmount]);
     const updateInputValue = useCallback((newValue) => {
         const safeNewValue = trimExtraDecimals(newValue, token.decimals);
-        const formattedAmount = inputMode === InputMode.TOKEN
+        const formattedAmount = userInputType === UserInputType.TOKEN
             ? safeNewValue
             : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
-    }, [inputMode, token.price, direction, token.decimals]);
+    }, [userInputType, token.price, direction, token.decimals]);
     const onBalanceButtonClick = useCallback(() => {
         if (balanceChipClickable) {
             updateInputValue(balance);
@@ -25984,7 +25985,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     ]);
     const handleInputChange = (e) => {
         let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
-        const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxUsdDecimals;
+        const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
             setInputValue(value);
@@ -26003,12 +26004,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const handleSwitchInputMode = () => {
         var _a;
         if (inputValue !== '') {
-            const convertedAmount = inputMode === InputMode.TOKEN
+            const convertedAmount = userInputType === UserInputType.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
                 : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
-        setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
+        setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
+            ? UserInputType.USD
+            : UserInputType.TOKEN);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const getRawAmounts = (amount) => {
@@ -26019,7 +26022,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
                 isTokenAmountVerySmall: false,
                 isUsdAmountVerySmall: false,
             };
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -26059,7 +26062,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         var _a;
         if (isNaN(Number(inputValue)) || inputValue === '')
             return '0';
-        if (inputMode === InputMode.TOKEN) {
+        if (userInputType === UserInputType.TOKEN) {
             if (direction === 'from') {
                 return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
             }
@@ -26072,13 +26075,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
         }
     }, [
         inputValue,
-        inputMode,
+        userInputType,
         token.price,
         direction,
         inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
     ]);
     const AmountChip = isInteractive ? 'button' : 'div';
-    const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
+    const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
     const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
@@ -26089,13 +26092,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
     const inputRef = useRef(null);
     return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), 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 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-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 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
-                        : inputMode === InputMode.TOKEN
+                        : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
                             : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
+                                : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
                                                     ? formatIfVerySmall.token
                                                     : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
                                                 ? formatIfVerySmall.token
@@ -26398,6 +26401,11 @@ function SettingsButton({ label, isSelected = false, onClick, }) {
     return (jsx("button", { onClick: onClick, className: cn('tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs -tw-outline-offset-2 hover:tw-bg-material-light-thin', isSelected && 'tw-outline tw-outline-2 tw-outline-royal-500'), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
 }
 
+const IconButton = (_a) => {
+    var { icon } = _a, props = __rest$1(_a, ["icon"]);
+    return (jsx("button", Object.assign({}, props, { className: cn('tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', props.disabled ? 'tw-text-grey-600' : 'tw-text-grey-300', props.className), children: icon })));
+};
+
 function ArrowRotate() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16", children: jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M3.333 2.667v2c0 .368.299.666.667.666h1.833m6.841 8v-2a.667.667 0 00-.666-.666h-2M2.667 8A5.333 5.333 0 008 13.333c1.757 0 3.353-.85 4.333-2.161m1-3.172A5.333 5.333 0 008 2.667c-1.758 0-3.354.85-4.333 2.161" }) }));
 }
@@ -62037,4 +62045,4 @@ function SquidConfigProvider({ theme = lightTheme, children, themeType = 'light'
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-h-screen tw-font-geist mobile-lg:tw-h-auto", children: children }));
 }
 
-export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, BackpackIcon, BadgeImage, BankIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, BackpackIcon, BadgeImage, BankIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, HomeIcon, IconButton, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };

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

@@ -7,3 +7,5 @@ export * from './Chip';
 export * from './FeeButton';
 export * from './FilterButton';
 export * from './SettingsButton';
+export * from './IconButton';
+export * from './SettingsButton';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SwapDirection } from '../../types/components';
 import { TooltipProps } from './Tooltip';
 interface Token {
@@ -5,7 +6,7 @@ interface Token {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps {
+interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     token: Token;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -33,5 +34,5 @@ interface NumericInputProps {
         tooltip?: Omit<TooltipProps, 'children'>;
     };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -171,7 +171,7 @@ interface Token$1 {
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps {
+interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     token: Token$1;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -199,7 +199,7 @@ interface NumericInputProps {
         tooltip?: Omit<TooltipProps, 'children'>;
     };
 }
-declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): react_jsx_runtime.JSX.Element;
+declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsSliderProps {
     value: number | undefined;
@@ -295,6 +295,11 @@ interface SettingsButtonProps {
 }
 declare function SettingsButton({ label, isSelected, onClick, }: SettingsButtonProps): react_jsx_runtime.JSX.Element;
 
+interface IconButtonProps extends React.ComponentProps<'button'> {
+    icon: React.ReactNode;
+}
+declare const IconButton: ({ icon, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
 declare function Approve(): react_jsx_runtime.JSX.Element;
 
 declare function ArrowRightIcon(): react_jsx_runtime.JSX.Element;
@@ -2520,4 +2525,4 @@ declare const baseTailwindConfig: Config;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };
+export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockIcon, ClockOutlineIcon, CoinsAddIcon, CoinsIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CompassRound, ConsoleIcon, Copy, CrossAnimatedIcon, DashboardFast, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, Dollar, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FilledHeartIcon, FilterButton, FilterIcon, GasIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, ImageIcon, ImageSparkle, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LightningIcon, LinkIcon, List, ListItem, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NotAllowedIcon, NumericInput, PathSquareIcon, PercentIcon, PieChartIcon, PipeSeparator, PlusIcon, PowerIcon, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, type PropertyListItemProps, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidConfigProvider, SquidLogo, type SquidTheme, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunriseIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, cn, darkTheme, lightTheme, linkActionTimelineProps, statusTextClassMap, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useVersion };

package/package.json

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