@0xsquid/ui 0.16.1 → 0.17.0

package/dist/cjs/index.js

@@ -2591,8 +2591,8 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
                         imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
-function LoadingSkeleton({ className, height = '20', }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
+function LoadingSkeleton({ className, height = '20', width = '100', }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
 }
 
 /******************************************************************************
@@ -2918,9 +2918,19 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps"]);
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps, autoFocusTimeout } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps", "autoFocusTimeout"]);
     const showActionButton = !!actionButtonProps;
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showActionButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!autoFocusTimeout)
+            return;
+        const timeoutId = setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, autoFocusTimeout);
+        return () => clearTimeout(timeoutId);
+    }, [autoFocusTimeout]);
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsxRuntime.jsx("input", Object.assign({}, props, { ref: inputRef, "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsxRuntime.jsx(SearchIcon, {}) })) : null, showActionButton ? (jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsxRuntime.jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
 const InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
     return (jsxRuntime.jsx(Button, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
@@ -6506,7 +6516,7 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, isFlipButtonDisabled, flipButtonDisabledMessage, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, flipButton, }) {
     const state = React.useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -6517,7 +6527,9 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-card tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsxRuntime.jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+    return (jsxRuntime.jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-card tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+                            ? flipButton.disabledMessage
+                            : undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsxRuntime.jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsxRuntime.jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
                                     'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
@@ -6679,13 +6691,26 @@ function ListItem(_a) {
             },
         }
         : {};
+    // There are two possible ways to handle loading state:
+    // Can be boolean or string
+    // If boolean and true, it will show a full loading skeleton
+    // If it's a non empty string, means that we want to display the skeleton + some text
+    const loadingComponent = () => {
+        if ((loading === null || loading === void 0 ? void 0 : loading.subtitle) === true) {
+            return (jsxRuntime.jsx(LoadingSkeleton, { className: "tw-text-grey-500", height: "10", width: "50" }));
+        }
+        if (typeof (loading === null || loading === void 0 ? void 0 : loading.subtitle) === 'string' && loading.subtitle.length > 0) {
+            return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(LoadingSkeleton, { className: "tw-text-grey-500", width: "50" }), jsxRuntime.jsx(CaptionText, { className: subtitleClassName, children: loading.subtitle })] }));
+        }
+        return null;
+    };
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? 'button' : 'div';
     const itemProps = isInteractive ? props : {};
     return (jsxRuntime.jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsxRuntime.jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxRuntime.jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsxRuntime.jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxRuntime.jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
                         : 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
 }
@@ -6895,9 +6920,9 @@ function LogoContainer({ children }) {
     return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }) {
     var _a, _b;
-    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-card tw-overflow-hidden tw-border-t tw-border-t-material-light-thin 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 : emptyAddressLabel }), 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 }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", 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: {
+    return (jsxRuntime.jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-card tw-overflow-hidden tw-border-t tw-border-t-material-light-thin 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 : emptyAddressLabel }), 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, variant: assetsButtonVariant }) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", 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: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
                     symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
                     price: tokenPrice,

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

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

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

@@ -1,4 +1,4 @@
-type AssetsButtonVariant = 'primary' | 'accent';
+import { AssetsButtonVariant } from '../../types/components';
 interface AssetsButtonProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;

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

@@ -7,8 +7,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     isError?: boolean;
     containerClassName?: string;
     actionButtonProps?: InputActionButtonProps;
+    autoFocusTimeout?: number;
 }
-export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, autoFocusTimeout, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 type InputActionButtonProps = {
     onClick?: () => void;
     variant?: ButtonVariant;

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

@@ -7,8 +7,11 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
-    isFlipButtonDisabled?: boolean;
-    flipButtonDisabledMessage?: string;
+    flipButton?: {
+        disabledMessage: string;
+        isDisabled: boolean;
+        tooltipDisplayDelayMs: number;
+    };
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -21,5 +24,5 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, flipButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { SwapDirection } from '../../types/components';
+import { AssetsButtonVariant, SwapDirection } from '../../types/components';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
@@ -28,6 +28,7 @@ interface SwapConfigurationProps {
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
+    assetsButtonVariant?: AssetsButtonVariant;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,7 +16,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     rounded?: boolean;
     detailButtonClassName?: string;
     loading?: {
-        subtitle?: boolean;
+        subtitle?: boolean | string;
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithoutIcon: Story;
 export declare const WithActionButton: Story;
 export declare const Error: Story;
+export declare const FocusAfter3Seconds: Story;

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

@@ -3,7 +3,8 @@ import { SwapConfiguration } from '../../components/layout/SwapConfiguration';
 declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
+export declare const EmptyVariantPrimary: Story;
+export declare const EmptyVariantAccent: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

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

@@ -32,3 +32,4 @@ export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
 export type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
 export type InputMode = 'token' | 'price';
+export type AssetsButtonVariant = 'primary' | 'accent';

package/dist/esm/index.js

@@ -2571,8 +2571,8 @@ function BadgeImage({ imageUrl, badgeUrl, size = 'sm', extraMarginForBadge, roun
                         imagesLoadState.badgeLoaded ? 'tw-block' : 'tw-hidden') })] })) : null] })) : null;
 }
 
-function LoadingSkeleton({ className, height = '20', }) {
-    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
+function LoadingSkeleton({ className, height = '20', width = '100', }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxs("defs", { children: [jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsx("stop", { stopColor: "currentColor" }), jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsx("clipPath", { id: "clip0_1246_29063", children: jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] }), ' '] }));
 }
 
 /******************************************************************************
@@ -2898,9 +2898,19 @@ function SearchIcon() {
 }
 
 function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps"]);
+    var { placeholder = 'Search', showIcon = true, className, icon, isError = false, containerClassName, actionButtonProps, autoFocusTimeout } = _a, props = __rest(_a, ["placeholder", "showIcon", "className", "icon", "isError", "containerClassName", "actionButtonProps", "autoFocusTimeout"]);
     const showActionButton = !!actionButtonProps;
-    return (jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsx("input", Object.assign({}, props, { "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showActionButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (!autoFocusTimeout)
+            return;
+        const timeoutId = setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, autoFocusTimeout);
+        return () => clearTimeout(timeoutId);
+    }, [autoFocusTimeout]);
+    return (jsxs("div", { className: cn('tw-relative tw-w-full tw-text-grey-600', containerClassName), children: [jsx("input", Object.assign({}, props, { ref: inputRef, "aria-invalid": isError, className: cn('tw-relative tw-h-10 tw-w-full tw-rounded-full tw-border tw-border-material-light-thin tw-bg-grey-900 tw-text-body-small tw-font-typography-regular tw-text-grey-300 placeholder:tw-text-grey-600 invalid:tw-outline-status-negative', showIcon ? 'tw-pl-[40px]' : 'tw-px-2.5', showActionButton ? 'tw-pr-[70px]' : 'tw-pr-2.5', isError && '!tw-outline-status-negative', className), placeholder: placeholder })), showIcon ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-h-full tw-w-[44px] tw-items-center tw-justify-center tw-px-squid-xs", children: icon || jsx(SearchIcon, {}) })) : null, showActionButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(InputActionButton, Object.assign({}, actionButtonProps)) })) : null] }));
 }
 const InputActionButton = ({ onClick, variant = 'tertiary', label = 'Paste', }) => {
     return (jsx(Button, { size: "md", variant: variant, onClick: onClick, className: "!tw-h-[30px] !tw-w-fit !tw-min-w-0", children: jsx(CaptionText, { children: label }) }));
@@ -6486,7 +6496,7 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, isFlipButtonDisabled, flipButtonDisabledMessage, }) {
+function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs = 0, flipButton, }) {
     const state = useMemo(() => {
         if (errorMessage)
             return 'error';
@@ -6497,7 +6507,9 @@ function DetailsToolbar({ errorMessage, boostMode = 'normal', onToggleBoostMode,
         return 'full';
     }, [errorMessage, isLoading, isEmpty]);
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-card tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: isFlipButtonDisabled ? flipButtonDisabledMessage : undefined, tooltipWidth: "max", children: jsx("button", { disabled: isFlipButtonDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !isFlipButtonDisabled &&
+    return (jsx("aside", { className: cn('tw-flex tw-h-[50px] tw-w-card tw-items-center tw-justify-around tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxs(Fragment, { children: [jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsx(Loader, { size: "32" })) : (jsx(Tooltip, { tooltipContent: (flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled)
+                            ? flipButton.disabledMessage
+                            : undefined, tooltipWidth: "max", displayDelayMs: flipButton === null || flipButton === void 0 ? void 0 : flipButton.tooltipDisplayDelayMs, children: jsx("button", { disabled: flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled, onClick: onInvertSwapButtonClick, className: "tw-group/flip-button tw-flex tw-h-squid-xl tw-min-w-[60px] tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-transparent tw-px-squid-xs tw-py-squid-xxs tw-text-grey-300 hover:tw-bg-material-light-thin disabled:tw-cursor-not-allowed", children: jsx(ChevronLargeDownIcon, { className: cn('tw-transition-transform tw-duration-150', !(flipButton === null || flipButton === void 0 ? void 0 : flipButton.isDisabled) &&
                                     'group-hover/flip-button:tw-rotate-180') }) }) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: state === 'loading' ? false : canToggleBoostMode, boostDisabledMessage: boostDisabledMessage, boostTooltipDisplayDelayMs: boostTooltipDisplayDelayMs }) })] })) }));
 }
 
@@ -6659,13 +6671,26 @@ function ListItem(_a) {
             },
         }
         : {};
+    // There are two possible ways to handle loading state:
+    // Can be boolean or string
+    // If boolean and true, it will show a full loading skeleton
+    // If it's a non empty string, means that we want to display the skeleton + some text
+    const loadingComponent = () => {
+        if ((loading === null || loading === void 0 ? void 0 : loading.subtitle) === true) {
+            return (jsx(LoadingSkeleton, { className: "tw-text-grey-500", height: "10", width: "50" }));
+        }
+        if (typeof (loading === null || loading === void 0 ? void 0 : loading.subtitle) === 'string' && loading.subtitle.length > 0) {
+            return (jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(LoadingSkeleton, { className: "tw-text-grey-500", width: "50" }), jsx(CaptionText, { className: subtitleClassName, children: loading.subtitle })] }));
+        }
+        return null;
+    };
     const isInteractive = !!props.onClick;
     const ItemTag = isInteractive ? 'button' : 'div';
     const itemProps = isInteractive ? props : {};
     return (jsx("li", Object.assign({}, containerProps, { className: cn('tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs(ItemTag, Object.assign({}, itemProps, { className: cn('tw-group/list-item tw-flex tw-w-full tw-max-w-full tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs', isSelected && 'tw-bg-material-light-thin', isInteractive && 'hover:tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: rounded })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs', 
                     // 'large' variant has extra padding
                     size === 'large' ? 'tw-w-[56%] tw-pl-squid-xxs' : 'tw-w-[67%]'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: cn('tw-max-w-full tw-truncate', subtitle && 'tw-h-[17px] !tw-leading-[17px]'), children: itemTitle })) : (itemTitle), size === 'large' &&
-                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (jsx(LoadingSkeleton, { className: "-tw-translate-x-6 tw-text-grey-500", height: "10" })) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                            ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, 'tw-hidden group-hover/list-item:tw-block'), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn('tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
                         ? 'tw-opacity-0 hover:tw-opacity-100 focus:tw-opacity-100 group-hover/list-item:tw-opacity-100 group-focus/list-item:tw-opacity-100'
                         : 'tw-flex', isDetailInteractive && 'hover:tw-bg-material-light-thin', detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })))] })) })));
 }
@@ -6875,9 +6900,9 @@ function LogoContainer({ children }) {
     return (jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }) {
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel = 'Connect wallet', balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }) {
     var _a, _b;
-    return (jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-card tw-overflow-hidden tw-border-t tw-border-t-material-light-thin 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 : emptyAddressLabel }), 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 }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
+    return (jsxs("section", { className: "tw-relative tw-h-[205px] tw-max-h-[205px] tw-w-card tw-overflow-hidden tw-border-t tw-border-t-material-light-thin 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 : emptyAddressLabel }), 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, variant: assetsButtonVariant }) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-4 tw-left-squid-l tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
                     symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : '',
                     price: tokenPrice,

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

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

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

@@ -1,4 +1,4 @@
-type AssetsButtonVariant = 'primary' | 'accent';
+import { AssetsButtonVariant } from '../../types/components';
 interface AssetsButtonProps {
     tokenImageUrl?: string;
     chainImageUrl?: string;

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

@@ -7,8 +7,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     isError?: boolean;
     containerClassName?: string;
     actionButtonProps?: InputActionButtonProps;
+    autoFocusTimeout?: number;
 }
-export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, autoFocusTimeout, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 type InputActionButtonProps = {
     onClick?: () => void;
     variant?: ButtonVariant;

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

@@ -7,8 +7,11 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
-    isFlipButtonDisabled?: boolean;
-    flipButtonDisabledMessage?: string;
+    flipButton?: {
+        disabledMessage: string;
+        isDisabled: boolean;
+        tooltipDisplayDelayMs: number;
+    };
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -21,5 +24,5 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, flipButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { SwapDirection } from '../../types/components';
+import { AssetsButtonVariant, SwapDirection } from '../../types/components';
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
@@ -28,6 +28,7 @@ interface SwapConfigurationProps {
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
+    assetsButtonVariant?: AssetsButtonVariant;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,7 +16,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     rounded?: boolean;
     detailButtonClassName?: string;
     loading?: {
-        subtitle?: boolean;
+        subtitle?: boolean | string;
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithoutIcon: Story;
 export declare const WithActionButton: Story;
 export declare const Error: Story;
+export declare const FocusAfter3Seconds: Story;

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

@@ -3,7 +3,8 @@ import { SwapConfiguration } from '../../components/layout/SwapConfiguration';
 declare const meta: Meta<typeof SwapConfiguration>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Empty: Story;
+export declare const EmptyVariantPrimary: Story;
+export declare const EmptyVariantAccent: Story;
 export declare const ChainOnly: Story;
 export declare const ChainAndToken: Story;
 export declare const WithSwapAmountUsd: Story;

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

@@ -32,3 +32,4 @@ export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';
 export type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
 export type InputMode = 'token' | 'price';
+export type AssetsButtonVariant = 'primary' | 'accent';

package/dist/index.css

@@ -1373,11 +1373,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-tw-translate-x-6 {
-  --tw-translate-x: -1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .tw-rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/index.d.ts

@@ -13,9 +13,10 @@ interface BadgeImageProps {
 type BadgeSize = 'sm' | 'md';
 declare function BadgeImage({ imageUrl, badgeUrl, size, extraMarginForBadge, rounded, }: BadgeImageProps): react_jsx_runtime.JSX.Element | null;
 
-declare function LoadingSkeleton({ className, height, }: {
+declare function LoadingSkeleton({ className, height, width, }: {
     className?: string;
     height?: string;
+    width?: string;
 }): react_jsx_runtime.JSX.Element;
 
 interface UsdAmountProps {
@@ -37,19 +38,6 @@ interface ArrowButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 }
 declare function ArrowButton({ label, disabled, ...props }: ArrowButtonProps): react_jsx_runtime.JSX.Element;
 
-type AssetsButtonVariant = 'primary' | 'accent';
-interface AssetsButtonProps {
-    tokenImageUrl?: string;
-    chainImageUrl?: string;
-    tokenSymbol?: string;
-    chainBgColor?: string;
-    tokenBgColor?: string;
-    tokenTextColor?: string;
-    onClick?: () => void;
-    variant?: AssetsButtonVariant;
-}
-declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
-
 type TextSize = 'small' | 'medium' | 'large';
 type SwitchSize = 'small' | 'large';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
@@ -82,6 +70,19 @@ declare enum SwapState {
 }
 type ThemeType = 'light' | 'dark';
 type SwapStepItemStatus = 'pending' | 'waiting' | 'ongoing' | 'executed' | 'success' | 'error' | 'warning';
+type AssetsButtonVariant = 'primary' | 'accent';
+
+interface AssetsButtonProps {
+    tokenImageUrl?: string;
+    chainImageUrl?: string;
+    tokenSymbol?: string;
+    chainBgColor?: string;
+    tokenBgColor?: string;
+    tokenTextColor?: string;
+    onClick?: () => void;
+    variant?: AssetsButtonVariant;
+}
+declare function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor: _chainBgColor, tokenBgColor: _tokenBgColor, tokenTextColor, onClick, variant, }: AssetsButtonProps): react_jsx_runtime.JSX.Element;
 
 interface BoostButtonProps {
     boostMode: BoostMode;
@@ -128,8 +129,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     isError?: boolean;
     containerClassName?: string;
     actionButtonProps?: InputActionButtonProps;
+    autoFocusTimeout?: number;
 }
-declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ placeholder, showIcon, className, icon, isError, containerClassName, actionButtonProps, autoFocusTimeout, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 type InputActionButtonProps = {
     onClick?: () => void;
     variant?: ButtonVariant;
@@ -219,8 +221,11 @@ interface DetailsToolbarProps {
     }) => void;
     onInvertSwapButtonClick?: () => void;
     onFeeButtonClick?: () => void;
-    isFlipButtonDisabled?: boolean;
-    flipButtonDisabledMessage?: string;
+    flipButton?: {
+        disabledMessage: string;
+        isDisabled: boolean;
+        tooltipDisplayDelayMs: number;
+    };
     feeInUsd?: string;
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
@@ -233,7 +238,7 @@ interface DetailsToolbarProps {
     };
     boostTooltipDisplayDelayMs?: number;
 }
-declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, isFlipButtonDisabled, flipButtonDisabledMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, isLoading, isEmpty, boostTooltipDisplayDelayMs, flipButton, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -277,7 +282,7 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     rounded?: boolean;
     detailButtonClassName?: string;
     loading?: {
-        subtitle?: boolean;
+        subtitle?: boolean | string;
     };
     containerProps?: React.HTMLAttributes<HTMLLIElement>;
 }
@@ -464,8 +469,9 @@ interface SwapConfigurationProps {
     };
     criticalPriceImpactPercentage?: number;
     emptyAddressLabel?: string;
+    assetsButtonVariant?: AssetsButtonVariant;
 }
-declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
+declare function SwapConfiguration({ amount, tokenPrice, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, emptyAddressLabel, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, amountUsd, assetsButtonVariant, }: SwapConfigurationProps): react_jsx_runtime.JSX.Element;
 
 interface SwapProgressViewHeaderProps {
     title: string;

package/package.json

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