@0xsquid/ui 0.5.0 → 0.6.1

package/dist/cjs/index.js

@@ -2772,91 +2772,27 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
         }
         return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
     }, [chainBgColor, tokenBgColor]);
-    return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    return (jsxRuntime.jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
+                }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsxRuntime.jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsxRuntime.jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
                     backgroundColor: tokenBgColor,
-                }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                }, children: jsxRuntime.jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
                 }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
 }
 
-const animationDuration = '500ms';
-function BoostButton({ boostMode, onToggleBoostMode, }) {
-    const boostIndicatorRef = react.useRef(null);
-    function handleToggleBoostMode() {
-        if (!boostIndicatorRef.current)
-            return;
-        // we don't want to trigger the animation when the component is mounted
-        // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
-        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
-            boostIndicatorRef.current.dataset.boostMode = 'boost';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    return (jsxRuntime.jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
-                            boxShadow: generateMarkerLines(40),
-                        } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
-                    transitionDuration: animationDuration,
-                } })] }));
-}
-function generateMarkerLines(count) {
-    const halfCount = Math.ceil(count / 2);
-    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `-${(index + 1) * 6}px 0 currentColor`;
-    });
-    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `${(index + 1) * 6}px 0 currentColor`;
-    });
-    const allShadows = [...rightShadows, ...leftShadows];
-    return allShadows.join(', ');
-}
-
-const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
-};
-const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
-    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
-    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
-};
-// right now all variants have the same disabled styles
-// in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
-function Button(_a) {
-    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
-    return (jsxRuntime.jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
-        // disabled styles
-        buttonDisabledClass, 
-        // custom classes from props
-        props.className), children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
-        // label only
-        jsxRuntime.jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
-        // icon only
-        icon) : (
-        // icon and label
-        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
-}
-
-function Chip(_a) {
-    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
-}
-
-function EthereumIcon() {
-    return (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
+function SearchIcon() {
+    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
 
-function FeeButton() {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(Chip, { label: "Fee" }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: '560' })] })] }));
+function Input(_a) {
+    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { 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-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', 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, showPasteButton ? (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(PasteButton, {}) })) : null] }));
 }
+const PasteButton = () => {
+    return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
+};
 
 // font size, line height, and letter spacing classes
 const textClassMap = {
@@ -2871,22 +2807,6 @@ function HeadingText({ children, bold, size }) {
     return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
 }
 
-function SettingsButton({ label }) {
-    return (jsxRuntime.jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
-}
-
-function SearchIcon() {
-    return (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
-}
-
-function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsxRuntime.jsx("input", Object.assign({}, props, { 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-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', 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, showPasteButton ? (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(PasteButton, {}) })) : null] }));
-}
-const PasteButton = () => {
-    return (jsxRuntime.jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: "Paste" }) }));
-};
-
 function SettingsSlider({ value, type }) {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
 }
@@ -2940,11 +2860,94 @@ const tooltipThresholdClassMap = {
     xxl: 'tw-pb-squid-xxl',
 };
 function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
-    return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), jsxRuntime.jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })] }));
+    return (jsxRuntime.jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsxRuntime.jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsxRuntime.jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
+}
+
+const animationDuration = '500ms';
+function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
+    const boostIndicatorRef = react.useRef(null);
+    // force normal mode if canToggleBoostMode is false
+    const boostMode = canToggleBoostMode ? _boostMode : 'normal';
+    function handleToggleBoostMode() {
+        if (!boostIndicatorRef.current || !canToggleBoostMode)
+            return;
+        // we don't want to trigger the animation when the component is mounted
+        // so we set the animation duration only when user clicks the button
+        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+                                boxShadow: generateMarkerLines(40),
+                            } })] }), jsxRuntime.jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: animationDuration,
+                    } })] }) }));
+}
+function generateMarkerLines(count) {
+    const halfCount = Math.ceil(count / 2);
+    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `-${(index + 1) * 6}px 0 currentColor`;
+    });
+    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `${(index + 1) * 6}px 0 currentColor`;
+    });
+    const allShadows = [...rightShadows, ...leftShadows];
+    return allShadows.join(', ');
+}
+
+const buttonSizeClassMap = {
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
+    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
+};
+const buttonVariantClassMap = {
+    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
+    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
+    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
+};
+// right now all variants have the same disabled styles
+// in the future, we can add more disabled styles for different variants
+const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
+function Button(_a) {
+    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
+    return (jsxRuntime.jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+        // disabled styles
+        buttonDisabledClass, 
+        // custom classes from props
+        props.className), children: size === 'lg' ? (jsxRuntime.jsx("span", { className: "tw-px-squid-m", children: jsxRuntime.jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+        // label only
+        jsxRuntime.jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+        // icon only
+        icon) : (
+        // icon and label
+        jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
+}
+
+function Chip(_a) {
+    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsxRuntime.jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
+}
+
+function EthereumIcon() {
+    return (jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
+}
+
+function FeeButton(_a) {
+    var { feeInUsd = '0', chipLabel = 'Fee', className } = _a, props = __rest(_a, ["feeInUsd", "chipLabel", "className"]);
+    return (jsxRuntime.jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsxRuntime.jsx(Chip, { label: chipLabel }), jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Chip, { icon: jsxRuntime.jsx(EthereumIcon, {}) }), jsxRuntime.jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
+}
+
+function SettingsButton({ label }) {
+    return (jsxRuntime.jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
 }
 
-function Boost({ boostMode, onToggleBoostMode }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
 }
 
 function EmojiSadIcon() {
@@ -2957,16 +2960,16 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, }) {
+function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }) {
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, {}) }), 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(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
+    return (jsxRuntime.jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsxRuntime.jsx(ErrorMessage, { message: errorMessage })) : (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(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsxRuntime.jsx(ChevronLargeDownIcon, {}) })) }), jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
 const ErrorMessage = ({ message }) => {
     return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsxRuntime.jsx(EmojiSadIcon, {}), jsxRuntime.jsx(CaptionText, { children: message })] }));
 };
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
-    return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: labelClassName, children: label })] }) }));
+    return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: labelClassName, children: label })] }) }));
 }
 
 function useModal(props) {
@@ -3020,7 +3023,7 @@ function RefreshIcon() {
 
 function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
     const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
-    return (jsxRuntime.jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
+    return (jsxRuntime.jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsxRuntime.jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsxRuntime.jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsxRuntime.jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center", children: [jsxRuntime.jsx(CaptionText, { children: fromLabel }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronRightSmallIcon, {}) }), jsxRuntime.jsx(CaptionText, { children: toLabel })] }), jsxRuntime.jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsxRuntime.jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsxRuntime.jsx(CaptionText, { children: dateCompleted })) }), jsxRuntime.jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsxRuntime.jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx(BodyText, { size: "small", children: fromAmount }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronLargeRightIcon, {}) }), jsxRuntime.jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsxRuntime.jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
                         {
                             label: 'Repeat swap',
                             icon: jsxRuntime.jsx(RefreshIcon, {}),
@@ -3038,14 +3041,14 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
 }
 
 const listItemSizeMap = {
-    small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs tw-mx-squid-xs',
-    large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs tw-mx-squid-xs',
+    small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
+    large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className"]);
-    return (jsxRuntime.jsxs("li", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-300', listItemSizeMap[size], className), 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: false })) })) : (jsxRuntime.jsx("div", { className: "tw-h-[30px] tw-w-[30px]", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
-                // 'large' variant has extra padding
-                size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsxRuntime.jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] })));
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected"]);
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+                    // 'large' variant has extra padding
+                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsxRuntime.jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] }) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3092,7 +3095,7 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
 }
 
 function DropdownMenu({ dropdownRef, items, className, }) {
-    return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
+    return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
 function Modal({ children }) {
@@ -3130,7 +3133,10 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs 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, { className: "tw-text-grey-600", size: "small", children: ":" }), jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), 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 }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
+    const isInteractive = direction === 'from';
+    // improve accessibility
+    const BalanceButtonTag = isInteractive ? 'button' : 'div';
+    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), address ? (jsxRuntime.jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" })) : null, jsxRuntime.jsx(WalletAddress, { ens: address })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {

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

@@ -1,9 +1,11 @@
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
+    canToggleBoostMode?: boolean;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
+    boostDisabledMessage?: string;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1,7 @@
-export declare function FeeButton(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    feeInUsd?: string;
+    chipLabel?: string;
+}
+export declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -4,6 +4,9 @@ interface BoostProps {
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
+    estimatedTime: string;
+    boostDisabledMessage?: string;
+    canToggleBoostMode?: boolean;
 }
-export declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): import("react/jsx-runtime").JSX.Element;
+export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,11 @@ interface DetailsToolbarProps {
         boostMode: BoostMode;
     }) => void;
     onInvertSwapButtonClick?: () => void;
+    onFeeButtonClick?: () => void;
+    feeInUsd?: string;
+    estimatedTime?: string;
+    canToggleBoostMode?: boolean;
+    boostDisabledMessage?: string;
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/dist/cjs/types/stories/buttons/BoostButton.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Boost: Story;
+export declare const Disabled: Story;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Boost>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Boosted: Story;

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
 export declare const Error: Story;
+export declare const BoostDisabled: Story;

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

@@ -8,7 +8,9 @@ export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
 export declare const LargeWithSecondaryImage: Story;
+export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
 export declare const Small: Story;
 export declare const SmallWithIcon: Story;
+export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: Story;

package/dist/esm/index.js

@@ -2770,91 +2770,27 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
         }
         return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
     }, [chainBgColor, tokenBgColor]);
-    return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    return (jsxs("div", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
                     backgroundImage: bgGradient,
-                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
+                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "", className: "tw-rounded-full" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-cursor-pointer tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
                     backgroundColor: tokenBgColor,
-                }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px]" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl -tw-translate-x-[2px] tw-rounded-full" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
                     backgroundColor: tokenBgColor,
                     color: tokenTextColor,
                 }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
 }
 
-const animationDuration = '500ms';
-function BoostButton({ boostMode, onToggleBoostMode, }) {
-    const boostIndicatorRef = useRef(null);
-    function handleToggleBoostMode() {
-        if (!boostIndicatorRef.current)
-            return;
-        // we don't want to trigger the animation when the component is mounted
-        // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
-        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
-            boostIndicatorRef.current.dataset.boostMode = 'boost';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    return (jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
-                            boxShadow: generateMarkerLines(40),
-                        } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
-                    transitionDuration: animationDuration,
-                } })] }));
-}
-function generateMarkerLines(count) {
-    const halfCount = Math.ceil(count / 2);
-    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `-${(index + 1) * 6}px 0 currentColor`;
-    });
-    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `${(index + 1) * 6}px 0 currentColor`;
-    });
-    const allShadows = [...rightShadows, ...leftShadows];
-    return allShadows.join(', ');
-}
-
-const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
-};
-const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
-    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
-    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
-};
-// right now all variants have the same disabled styles
-// in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
-function Button(_a) {
-    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
-    return (jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
-        // disabled styles
-        buttonDisabledClass, 
-        // custom classes from props
-        props.className), children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
-        // label only
-        jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
-        // icon only
-        icon) : (
-        // icon and label
-        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
-}
-
-function Chip(_a) {
-    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
-    return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
-}
-
-function EthereumIcon() {
-    return (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
+function SearchIcon() {
+    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
 
-function FeeButton() {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: '560' })] })] }));
+function Input(_a) {
+    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
+    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { 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-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', 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, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, {}) })) : null] }));
 }
+const PasteButton = () => {
+    return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
+};
 
 // font size, line height, and letter spacing classes
 const textClassMap = {
@@ -2869,22 +2805,6 @@ function HeadingText({ children, bold, size }) {
     return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
 }
 
-function SettingsButton({ label }) {
-    return (jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsx(CaptionText, { children: label }) }));
-}
-
-function SearchIcon() {
-    return (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
-}
-
-function Input(_a) {
-    var { placeholder = 'Search', showIcon = true, showPasteButton = false, className, icon } = _a, props = __rest(_a, ["placeholder", "showIcon", "showPasteButton", "className", "icon"]);
-    return (jsxs("div", { className: "tw-relative tw-w-full tw-text-grey-600", children: [jsx("input", Object.assign({}, props, { 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-medium tw-text-grey-300 tw-outline-none tw-outline-offset-0 placeholder:tw-text-grey-600 focus:tw-outline-2 focus:tw-outline-royal-500', showIcon ? 'tw-pl-[44px]' : 'tw-px-2.5', showPasteButton ? 'tw-px-[70px]' : 'tw-pr-2.5', 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, showPasteButton ? (jsx("div", { className: "tw-absolute tw-inset-y-0 tw-right-1.5 tw-flex tw-items-center tw-justify-center", children: jsx(PasteButton, {}) })) : null] }));
-}
-const PasteButton = () => {
-    return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
-};
-
 function SettingsSlider({ value, type }) {
     return (jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
 }
@@ -2938,11 +2858,94 @@ const tooltipThresholdClassMap = {
     xxl: 'tw-pb-squid-xxl',
 };
 function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
-    return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })] }));
+    return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), tooltipContent ? (jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })) : null] }));
+}
+
+const animationDuration = '500ms';
+function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
+    const boostIndicatorRef = useRef(null);
+    // force normal mode if canToggleBoostMode is false
+    const boostMode = canToggleBoostMode ? _boostMode : 'normal';
+    function handleToggleBoostMode() {
+        if (!boostIndicatorRef.current || !canToggleBoostMode)
+            return;
+        // we don't want to trigger the animation when the component is mounted
+        // so we set the animation duration only when user clicks the button
+        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+                                boxShadow: generateMarkerLines(40),
+                            } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                        transitionDuration: animationDuration,
+                    } })] }) }));
+}
+function generateMarkerLines(count) {
+    const halfCount = Math.ceil(count / 2);
+    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `-${(index + 1) * 6}px 0 currentColor`;
+    });
+    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `${(index + 1) * 6}px 0 currentColor`;
+    });
+    const allShadows = [...rightShadows, ...leftShadows];
+    return allShadows.join(', ');
+}
+
+const buttonSizeClassMap = {
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
+    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
+};
+const buttonVariantClassMap = {
+    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
+    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
+    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
+};
+// right now all variants have the same disabled styles
+// in the future, we can add more disabled styles for different variants
+const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
+function Button(_a) {
+    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
+    return (jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+        // disabled styles
+        buttonDisabledClass, 
+        // custom classes from props
+        props.className), children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+        // label only
+        jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+        // icon only
+        icon) : (
+        // icon and label
+        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
+}
+
+function Chip(_a) {
+    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
+    return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
+}
+
+function EthereumIcon() {
+    return (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
+}
+
+function FeeButton(_a) {
+    var { feeInUsd = '0', chipLabel = 'Fee', className } = _a, props = __rest(_a, ["feeInUsd", "chipLabel", "className"]);
+    return (jsxs("button", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-xl tw-w-full tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin', className), children: [jsx(Chip, { label: chipLabel }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: feeInUsd })] })] })));
+}
+
+function SettingsButton({ label }) {
+    return (jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsx(CaptionText, { children: label }) }));
 }
 
-function Boost({ boostMode, onToggleBoostMode }) {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }) {
+    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
 }
 
 function EmojiSadIcon() {
@@ -2955,16 +2958,16 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, }) {
+function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }) {
     const detailClassName = cn('tw-w-[190px]', detailStateClassMap[state]);
-    return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), 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(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }) })] })) }));
+    return (jsx("aside", { className: "tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-500", children: state === 'error' ? (jsx(ErrorMessage, { message: errorMessage })) : (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(Button, { variant: "tertiary", size: "md", onClick: onInvertSwapButtonClick, className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { estimatedTime: estimatedTime !== null && estimatedTime !== void 0 ? estimatedTime : '0s', boostMode: boostMode, onToggleBoostMode: onToggleBoostMode, canToggleBoostMode: canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
 }
 const ErrorMessage = ({ message }) => {
     return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-status-negative", children: [jsx(EmojiSadIcon, {}), jsx(CaptionText, { children: message })] }));
 };
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
-    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: labelClassName, children: label })] }) }));
+    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: labelClassName, children: label })] }) }));
 }
 
 function useModal(props) {
@@ -3018,7 +3021,7 @@ function RefreshIcon() {
 
 function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
     const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
-    return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
+    return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-cursor-pointer tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { className: "-tw-left-[85px] tw-top-7", dropdownRef: modalRef, items: [
                         {
                             label: 'Repeat swap',
                             icon: jsx(RefreshIcon, {}),
@@ -3036,14 +3039,14 @@ function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted,
 }
 
 const listItemSizeMap = {
-    small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs tw-mx-squid-xs',
-    large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs tw-mx-squid-xs',
+    small: 'tw-max-w-list-item-small tw-h-list-item-small tw-px-squid-xs',
+    large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className"]);
-    return (jsxs("li", Object.assign({}, props, { className: cn('tw-flex tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-300', listItemSizeMap[size], className), 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: false })) })) : (jsx("div", { className: "tw-h-[30px] tw-w-[30px]", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
-                // 'large' variant has extra padding
-                size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "!tw-leading-[13px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] })));
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected"]);
+    return (jsx("li", Object.assign({}, props, { className: cn('tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+                    // 'large' variant has extra padding
+                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] }) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3090,7 +3093,7 @@ function SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = fals
 }
 
 function DropdownMenu({ dropdownRef, items, className, }) {
-    return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item)))) }) }) }));
+    return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
 function Modal({ children }) {
@@ -3128,7 +3131,10 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: address })] }) }), 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 }) }), jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) }), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
+    const isInteractive = direction === 'from';
+    // improve accessibility
+    const BalanceButtonTag = isInteractive ? 'button' : 'div';
+    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), address ? (jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" })) : null, jsx(WalletAddress, { ens: address })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {

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

@@ -1,9 +1,11 @@
 import { BoostMode } from '../../types/components';
 interface BoostButtonProps {
     boostMode: BoostMode;
+    canToggleBoostMode?: boolean;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
+    boostDisabledMessage?: string;
 }
-export declare function BoostButton({ boostMode, onToggleBoostMode, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1,7 @@
-export declare function FeeButton(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    feeInUsd?: string;
+    chipLabel?: string;
+}
+export declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -4,6 +4,9 @@ interface BoostProps {
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
+    estimatedTime: string;
+    boostDisabledMessage?: string;
+    canToggleBoostMode?: boolean;
 }
-export declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): import("react/jsx-runtime").JSX.Element;
+export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,6 +7,11 @@ interface DetailsToolbarProps {
         boostMode: BoostMode;
     }) => void;
     onInvertSwapButtonClick?: () => void;
+    onFeeButtonClick?: () => void;
+    feeInUsd?: string;
+    estimatedTime?: string;
+    canToggleBoostMode?: boolean;
+    boostDisabledMessage?: string;
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/dist/esm/types/stories/buttons/BoostButton.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Normal: Story;
 export declare const Boost: Story;
+export declare const Disabled: Story;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Boost>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Boosted: Story;

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const Loading: Story;
 export declare const Empty: Story;
 export declare const Error: Story;
+export declare const BoostDisabled: Story;

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

@@ -8,7 +8,9 @@ export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
 export declare const LargeWithSecondaryImage: Story;
+export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
 export declare const Small: Story;
 export declare const SmallWithIcon: Story;
+export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: Story;

package/dist/index.css

@@ -746,11 +746,6 @@ video {
   margin-right: auto;
 }
 
-.tw-mx-squid-xs {
-  margin-left: 0.625rem;
-  margin-right: 0.625rem;
-}
-
 .tw-mx-squid-xxs {
   margin-left: 0.3125rem;
   margin-right: 0.3125rem;
@@ -1028,6 +1023,10 @@ video {
   min-height: 195px;
 }
 
+.tw-min-h-\[30px\] {
+  min-height: 30px;
+}
+
 .tw-min-h-button {
   min-height: 3.75rem;
 }
@@ -1156,6 +1155,10 @@ video {
   width: 90px;
 }
 
+.tw-w-\[92px\] {
+  width: 92px;
+}
+
 .tw-w-\[94px\] {
   width: 94px;
 }
@@ -1182,6 +1185,10 @@ video {
   width: max-content;
 }
 
+.tw-w-squid-l {
+  width: 1.875rem;
+}
+
 .tw-w-squid-m {
   width: 1.25rem;
 }
@@ -1198,8 +1205,8 @@ video {
   min-width: 24rem;
 }
 
-.tw-min-w-\[209px\] {
-  min-width: 209px;
+.tw-min-w-\[30px\] {
+  min-width: 30px;
 }
 
 .tw-min-w-\[60px\] {
@@ -1446,6 +1453,12 @@ video {
   overflow-x: hidden;
 }
 
+.tw-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .tw-rounded-2xl {
   border-radius: 1rem;
 }
@@ -2053,6 +2066,10 @@ video {
   line-height: 13px !important;
 }
 
+.\!tw-leading-\[18px\] {
+  line-height: 18px !important;
+}
+
 .\!tw-leading-\[20px\] {
   line-height: 20px !important;
 }

package/dist/index.d.ts

@@ -62,11 +62,13 @@ type ThemeType = 'light' | 'dark';
 
 interface BoostButtonProps {
     boostMode: BoostMode;
+    canToggleBoostMode?: boolean;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
+    boostDisabledMessage?: string;
 }
-declare function BoostButton({ boostMode, onToggleBoostMode, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
+declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     label?: string;
@@ -83,7 +85,11 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function Chip({ label, icon, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
-declare function FeeButton(): react_jsx_runtime.JSX.Element;
+interface FeeButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    feeInUsd?: string;
+    chipLabel?: string;
+}
+declare function FeeButton({ feeInUsd, chipLabel, className, ...props }: FeeButtonProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsButtonProps {
     label: string;
@@ -129,8 +135,11 @@ interface BoostProps {
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
     }) => void;
+    estimatedTime: string;
+    boostDisabledMessage?: string;
+    canToggleBoostMode?: boolean;
 }
-declare function Boost({ boostMode, onToggleBoostMode }: BoostProps): react_jsx_runtime.JSX.Element;
+declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
@@ -140,8 +149,13 @@ interface DetailsToolbarProps {
         boostMode: BoostMode;
     }) => void;
     onInvertSwapButtonClick?: () => void;
+    onFeeButtonClick?: () => void;
+    feeInUsd?: string;
+    estimatedTime?: string;
+    canToggleBoostMode?: boolean;
+    boostDisabledMessage?: string;
 }
-declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
+declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownMenuItemProps {
     label: string;
@@ -173,10 +187,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
     icon?: React.ReactNode;
     size?: ListItemSize;
     mainIcon?: React.ReactNode;
+    isSelected?: boolean;
     className?: string;
 }
 type ListItemSize = 'small' | 'large';
-declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
+declare function ListItem({ itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size, mainIcon, className, isSelected, ...props }: ListItemProps): react_jsx_runtime.JSX.Element;
 
 interface MenuItemProps {
     label: string;

package/package.json

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