@0xsquid/ui 0.6.0 → 0.6.2

package/dist/cjs/index.js

@@ -2588,7 +2588,7 @@ function CaptionText(_a) {
 }
 
 function UsdAmount({ usdAmount }) {
-    return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500/65", children: "$" }), jsxRuntime.jsx(CaptionText, { children: usdAmount.toString() })] }));
+    return (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
 // font size, line height, and letter spacing classes
@@ -2772,7 +2772,7 @@ 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("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", 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: "", 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,
@@ -2782,11 +2782,94 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
                 }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
 }
 
+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" }) }));
+};
+
+// font size, line height, and letter spacing classes
+const textClassMap = {
+    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
+    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
+    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
+};
+function HeadingText({ children, bold, size }) {
+    const fontWeightClass = bold
+        ? 'tw-font-heading-bold'
+        : 'tw-font-heading-regular';
+    return (jsxRuntime.jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
+}
+
+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" }) })] }));
+}
+
+const switchSizeClassMap = {
+    small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
+    large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
+};
+const switchCircleSizeClassMap = {
+    small: 'tw-w-4 tw-h-4',
+    large: 'tw-w-6 tw-h-6',
+};
+function Switch({ checked = false, onChange, size }) {
+    return (
+    // Switch container
+    jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors', 
+        // size styles
+        switchSizeClassMap[size], 
+        // checked styles
+        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsxRuntime.jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
+                    filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
+                }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
+                // size styles
+                switchCircleSizeClassMap[size], 
+                // disabled and checked styles
+                checked
+                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
+}
+
+const borderRadiusClassMap = {
+    sm: 'tw-rounded-squid-s',
+    lg: 'tw-rounded-squid-m',
+};
+function Menu(_a) {
+    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
+    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
+}
+
+const tooltipWidthClassMap = {
+    max: 'tw-w-max',
+    container: 'tw-w-full',
+};
+const tooltipThresholdClassMap = {
+    xxs: 'tw-pb-squid-xxs',
+    xs: 'tw-pb-squid-xs',
+    s: 'tw-pb-squid-s',
+    m: 'tw-pb-squid-m',
+    l: 'tw-pb-squid-l',
+    xl: 'tw-pb-squid-xl',
+    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 }), 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, onToggleBoostMode, }) {
+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)
+        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
@@ -2800,11 +2883,11 @@ function BoostButton({ boostMode, onToggleBoostMode, }) {
             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,
-                } })] }));
+    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group 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-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale 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 group-disabled:tw-grayscale", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", 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 group-disabled:tw-grayscale 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);
@@ -2859,93 +2942,14 @@ function FeeButton(_a) {
     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 })] })] })));
 }
 
-// font size, line height, and letter spacing classes
-const textClassMap = {
-    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
-    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
-    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
-};
-function HeadingText({ children, bold, size }) {
-    const fontWeightClass = bold
-        ? 'tw-font-heading-bold'
-        : 'tw-font-heading-regular';
-    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" }) })] }));
-}
-
-const switchSizeClassMap = {
-    small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
-    large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
-};
-const switchCircleSizeClassMap = {
-    small: 'tw-w-4 tw-h-4',
-    large: 'tw-w-6 tw-h-6',
-};
-function Switch({ checked = false, onChange, size }) {
-    return (
-    // Switch container
-    jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin', 
-        // size styles
-        switchSizeClassMap[size], 
-        // checked styles
-        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsxRuntime.jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
-                    filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
-                }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin', 
-                // size styles
-                switchCircleSizeClassMap[size], 
-                // disabled and checked styles
-                checked
-                    ? 'tw-right-0.5 tw-bg-grey-100'
-                    : 'tw-left-0.5 tw-bg-grey-500') })] }));
-}
-
-const borderRadiusClassMap = {
-    sm: 'tw-rounded-squid-s',
-    lg: 'tw-rounded-squid-m',
-};
-function Menu(_a) {
-    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
-    return (jsxRuntime.jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxRuntime.jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsxRuntime.jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsxRuntime.jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsxRuntime.jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsxRuntime.jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsxRuntime.jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
-}
-
-const tooltipWidthClassMap = {
-    max: 'tw-w-max',
-    container: 'tw-w-full',
-};
-const tooltipThresholdClassMap = {
-    xxs: 'tw-pb-squid-xxs',
-    xs: 'tw-pb-squid-xs',
-    s: 'tw-pb-squid-s',
-    m: 'tw-pb-squid-m',
-    l: 'tw-pb-squid-l',
-    xl: 'tw-pb-squid-xl',
-    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 })] }));
-}
-
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, }) {
-    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: estimatedTime, 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' || boostDisabledMessage
+                    ? 'tw-bg-grey-300'
+                    : 'tw-bg-status-positive') })] }));
 }
 
 function EmojiSadIcon() {
@@ -2958,9 +2962,9 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }) {
+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, { 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 }) })] })) }));
+    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 })] }));
@@ -3065,8 +3069,11 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
     return (jsxRuntime.jsxs("li", { className: "tw-flex tw-h-[50px] tw-scroll-px-5 tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-grey-900 tw-px-5 tw-py-squid-xs tw-text-grey-300", children: [icon, jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsxRuntime.jsx(BodyText, { size: "small", children: label }), showHelpIcon ? jsxRuntime.jsx(HelpIcon, { className: "tw-text-grey-600" }) : null] }), jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] }));
 }
 
-function SwapDetailListItem({ label, detail, icon, }) {
-    return (jsxRuntime.jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsxRuntime.jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), typeof detail === 'string' ? (jsxRuntime.jsx(CaptionText, { children: detail })) : (detail)] }) }));
+function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
+    return (jsxRuntime.jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsxRuntime.jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), isLoading ? (jsxRuntime.jsx(LoadingSkeleton, {})) : typeof detail === 'string' ? (jsxRuntime.jsx(CaptionText, { children: detail })) : (detail)] }) }));
+}
+function LoadingSkeleton() {
+    return (jsxRuntime.jsx("div", { className: "tw-h-squid-xs tw-w-16 tw-animate-pulse tw-rounded-full tw-bg-grey-700" }));
 }
 
 function SwapStepSeparator() {
@@ -3131,7 +3138,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' }), 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 }) }), 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/icons/Percent.d.ts

@@ -0,0 +1,8 @@
+export declare function PercentIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PathSquareIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,8 @@ interface BoostProps {
         boostMode: BoostMode;
     }) => void;
     estimatedTime: string;
+    boostDisabledMessage?: string;
+    canToggleBoostMode?: boolean;
 }
-export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, }: 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

@@ -10,6 +10,8 @@ interface DetailsToolbarProps {
     onFeeButtonClick?: () => void;
     feeInUsd?: string;
     estimatedTime?: string;
+    canToggleBoostMode?: boolean;
+    boostDisabledMessage?: string;
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }: 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/SwapDetailListItem.d.ts

@@ -3,6 +3,7 @@ interface SwapDetailListItemProps {
     label: string;
     icon: React.ReactNode;
     detail?: React.ReactNode;
+    isLoading?: boolean;
 }
-export declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapDetailListItem({ label, detail, icon, isLoading, }: SwapDetailListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
-    children?: string;
     bold?: boolean;
 }
 export declare function CaptionText({ children, bold, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,3 @@
-export declare function SwapDetailsView(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapDetailsView({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Boosted: Story;
+export declare const Disabled: 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/SwapDetailListItem.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithDetail: Story;
+export declare const Loading: Story;

package/dist/cjs/types/stories/views/SwapDetailsView.stories.d.ts

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

package/dist/esm/index.js

@@ -2586,7 +2586,7 @@ function CaptionText(_a) {
 }
 
 function UsdAmount({ usdAmount }) {
-    return (jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsx(CaptionText, { className: "tw-text-grey-500/65", children: "$" }), jsx(CaptionText, { children: usdAmount.toString() })] }));
+    return (jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsx(CaptionText, { children: usdAmount.toString() })] }));
 }
 
 // font size, line height, and letter spacing classes
@@ -2770,7 +2770,7 @@ 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("button", { onClick: onClick, className: "tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center tw-text-grey-100 focus:tw-outline-none", 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: "", 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,
@@ -2780,11 +2780,94 @@ function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor
                 }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, { className: "tw-text-material-light-thick" })] })] }));
 }
 
+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" }) }));
+};
+
+// font size, line height, and letter spacing classes
+const textClassMap = {
+    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
+    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
+    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
+};
+function HeadingText({ children, bold, size }) {
+    const fontWeightClass = bold
+        ? 'tw-font-heading-bold'
+        : 'tw-font-heading-regular';
+    return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
+}
+
+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" }) })] }));
+}
+
+const switchSizeClassMap = {
+    small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
+    large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
+};
+const switchCircleSizeClassMap = {
+    small: 'tw-w-4 tw-h-4',
+    large: 'tw-w-6 tw-h-6',
+};
+function Switch({ checked = false, onChange, size }) {
+    return (
+    // Switch container
+    jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors', 
+        // size styles
+        switchSizeClassMap[size], 
+        // checked styles
+        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
+                    filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
+                }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
+                // size styles
+                switchCircleSizeClassMap[size], 
+                // disabled and checked styles
+                checked
+                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
+}
+
+const borderRadiusClassMap = {
+    sm: 'tw-rounded-squid-s',
+    lg: 'tw-rounded-squid-m',
+};
+function Menu(_a) {
+    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
+    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
+}
+
+const tooltipWidthClassMap = {
+    max: 'tw-w-max',
+    container: 'tw-w-full',
+};
+const tooltipThresholdClassMap = {
+    xxs: 'tw-pb-squid-xxs',
+    xs: 'tw-pb-squid-xs',
+    s: 'tw-pb-squid-s',
+    m: 'tw-pb-squid-m',
+    l: 'tw-pb-squid-l',
+    xl: 'tw-pb-squid-xl',
+    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 }), 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, onToggleBoostMode, }) {
+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)
+        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
@@ -2798,11 +2881,11 @@ function BoostButton({ boostMode, onToggleBoostMode, }) {
             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,
-                } })] }));
+    return (jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("button", { onClick: handleToggleBoostMode, disabled: !canToggleBoostMode, className: "tw-group 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-w-full tw-items-center tw-justify-between tw-transition-transform group-disabled:tw-grayscale 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 group-disabled:tw-grayscale", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center group-disabled:tw-grayscale", 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 group-disabled:tw-grayscale 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);
@@ -2857,93 +2940,14 @@ function FeeButton(_a) {
     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 })] })] })));
 }
 
-// font size, line height, and letter spacing classes
-const textClassMap = {
-    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
-    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
-    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
-};
-function HeadingText({ children, bold, size }) {
-    const fontWeightClass = bold
-        ? 'tw-font-heading-bold'
-        : 'tw-font-heading-regular';
-    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" }) })] }));
-}
-
-const switchSizeClassMap = {
-    small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
-    large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
-};
-const switchCircleSizeClassMap = {
-    small: 'tw-w-4 tw-h-4',
-    large: 'tw-w-6 tw-h-6',
-};
-function Switch({ checked = false, onChange, size }) {
-    return (
-    // Switch container
-    jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin', 
-        // size styles
-        switchSizeClassMap[size], 
-        // checked styles
-        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
-                    filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
-                }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin', 
-                // size styles
-                switchCircleSizeClassMap[size], 
-                // disabled and checked styles
-                checked
-                    ? 'tw-right-0.5 tw-bg-grey-100'
-                    : 'tw-left-0.5 tw-bg-grey-500') })] }));
-}
-
-const borderRadiusClassMap = {
-    sm: 'tw-rounded-squid-s',
-    lg: 'tw-rounded-squid-m',
-};
-function Menu(_a) {
-    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
-    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick tw-backdrop-blur/20 tw-backdrop-saturate-150 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
-}
-
-const tooltipWidthClassMap = {
-    max: 'tw-w-max',
-    container: 'tw-w-full',
-};
-const tooltipThresholdClassMap = {
-    xxs: 'tw-pb-squid-xxs',
-    xs: 'tw-pb-squid-xs',
-    s: 'tw-pb-squid-s',
-    m: 'tw-pb-squid-m',
-    l: 'tw-pb-squid-l',
-    xl: 'tw-pb-squid-xl',
-    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 })] }));
-}
-
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, }) {
-    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: estimatedTime, 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' || boostDisabledMessage
+                    ? 'tw-bg-grey-300'
+                    : 'tw-bg-status-positive') })] }));
 }
 
 function EmojiSadIcon() {
@@ -2956,9 +2960,9 @@ const detailStateClassMap = {
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }) {
+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, { 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 }) })] })) }));
+    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 })] }));
@@ -3063,8 +3067,11 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
     return (jsxs("li", { className: "tw-flex tw-h-[50px] tw-scroll-px-5 tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-bg-grey-900 tw-px-5 tw-py-squid-xs tw-text-grey-300", children: [icon, jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-self-stretch", children: [jsx(BodyText, { size: "small", children: label }), showHelpIcon ? jsx(HelpIcon, { className: "tw-text-grey-600" }) : null] }), jsx("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-justify-center tw-rounded-squid-xs', transparentControls ? '' : 'tw-bg-grey-800'), children: controls })] }));
 }
 
-function SwapDetailListItem({ label, detail, icon, }) {
-    return (jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), typeof detail === 'string' ? (jsx(CaptionText, { children: detail })) : (detail)] }) }));
+function SwapDetailListItem({ label, detail, icon, isLoading = false, }) {
+    return (jsx("li", { className: "tw-swap-detail-list-item-gradient tw-h-squid-l tw-w-full tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-justify-between tw-gap-squid-xs tw-rounded-squid-xs tw-px-squid-xs", children: [jsx("div", { className: "tw-h-6 tw-w-6 tw-text-grey-500", children: icon }), jsx(CaptionText, { className: "tw-flex-1 tw-text-grey-500", children: label }), isLoading ? (jsx(LoadingSkeleton, {})) : typeof detail === 'string' ? (jsx(CaptionText, { children: detail })) : (detail)] }) }));
+}
+function LoadingSkeleton() {
+    return (jsx("div", { className: "tw-h-squid-xs tw-w-16 tw-animate-pulse tw-rounded-full tw-bg-grey-700" }));
 }
 
 function SwapStepSeparator() {
@@ -3129,7 +3136,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' }), 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 }) }), 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/icons/Percent.d.ts

@@ -0,0 +1,8 @@
+export declare function PercentIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PathSquareIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,8 @@ interface BoostProps {
         boostMode: BoostMode;
     }) => void;
     estimatedTime: string;
+    boostDisabledMessage?: string;
+    canToggleBoostMode?: boolean;
 }
-export declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, }: 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

@@ -10,6 +10,8 @@ interface DetailsToolbarProps {
     onFeeButtonClick?: () => void;
     feeInUsd?: string;
     estimatedTime?: string;
+    canToggleBoostMode?: boolean;
+    boostDisabledMessage?: string;
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }: 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/SwapDetailListItem.d.ts

@@ -3,6 +3,7 @@ interface SwapDetailListItemProps {
     label: string;
     icon: React.ReactNode;
     detail?: React.ReactNode;
+    isLoading?: boolean;
 }
-export declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapDetailListItem({ label, detail, icon, isLoading, }: SwapDetailListItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
-    children?: string;
     bold?: boolean;
 }
 export declare function CaptionText({ children, bold, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,3 @@
-export declare function SwapDetailsView(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapDetailsView({ isLoading }: {
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Boosted: Story;
+export declare const Disabled: 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/SwapDetailListItem.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithDetail: Story;
+export declare const Loading: Story;

package/dist/esm/types/stories/views/SwapDetailsView.stories.d.ts

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

package/dist/index.css

@@ -653,10 +653,6 @@ video {
   left: 0px;
 }
 
-.tw-left-0\.5 {
-  left: 0.125rem;
-}
-
 .tw-left-1\/2 {
   left: 50%;
 }
@@ -665,12 +661,16 @@ video {
   left: 1.25rem;
 }
 
-.tw-left-\[54px\] {
-  left: 54px;
+.tw-left-\[-14px\] {
+  left: -14px;
+}
+
+.tw-left-\[16px\] {
+  left: 16px;
 }
 
-.tw-left-\[70\%\] {
-  left: 70%;
+.tw-left-\[54px\] {
+  left: 54px;
 }
 
 .tw-left-\[calc\(50\%-1\.5px\)\] {
@@ -681,10 +681,6 @@ video {
   right: 0px;
 }
 
-.tw-right-0\.5 {
-  right: 0.125rem;
-}
-
 .tw-right-1 {
   right: 0.25rem;
 }
@@ -1051,6 +1047,10 @@ video {
   width: 3rem;
 }
 
+.tw-w-16 {
+  width: 4rem;
+}
+
 .tw-w-36 {
   width: 9rem;
 }
@@ -1075,6 +1075,10 @@ video {
   width: 2rem;
 }
 
+.tw-w-96 {
+  width: 24rem;
+}
+
 .tw-w-\[1\.5px\] {
   width: 1.5px;
 }
@@ -1155,6 +1159,10 @@ video {
   width: 90px;
 }
 
+.tw-w-\[92px\] {
+  width: 92px;
+}
+
 .tw-w-\[94px\] {
   width: 94px;
 }
@@ -1201,10 +1209,6 @@ video {
   min-width: 24rem;
 }
 
-.tw-min-w-\[209px\] {
-  min-width: 209px;
-}
-
 .tw-min-w-\[30px\] {
   min-width: 30px;
 }
@@ -1288,6 +1292,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-tw-translate-x-full {
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.tw-translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .tw-translate-x-1\/4 {
   --tw-translate-x: 25%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1298,6 +1312,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes tw-pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.tw-animate-pulse {
+  animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes tw-slide-to-bottom {
   0% {
     transform: translateY(0);
@@ -1644,6 +1668,10 @@ video {
   background-color: var(--squid-theme-grey-500);
 }
 
+.tw-bg-grey-700 {
+  background-color: var(--squid-theme-grey-700);
+}
+
 .tw-bg-grey-800 {
   background-color: var(--squid-theme-grey-800);
 }
@@ -2279,6 +2307,12 @@ video {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2422,6 +2456,11 @@ li {
   opacity: 1;
 }
 
+.tw-group:disabled .group-disabled\:tw-grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .tw-peer:hover ~ .peer-hover\:tw-block {
   display: block;
 }

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;
@@ -134,8 +136,10 @@ interface BoostProps {
         boostMode: BoostMode;
     }) => void;
     estimatedTime: string;
+    boostDisabledMessage?: string;
+    canToggleBoostMode?: boolean;
 }
-declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, }: BoostProps): react_jsx_runtime.JSX.Element;
+declare function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }: BoostProps): react_jsx_runtime.JSX.Element;
 
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
@@ -148,8 +152,10 @@ interface DetailsToolbarProps {
     onFeeButtonClick?: () => void;
     feeInUsd?: string;
     estimatedTime?: string;
+    canToggleBoostMode?: boolean;
+    boostDisabledMessage?: string;
 }
-declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, }: 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;
@@ -216,8 +222,9 @@ interface SwapDetailListItemProps {
     label: string;
     icon: React.ReactNode;
     detail?: React.ReactNode;
+    isLoading?: boolean;
 }
-declare function SwapDetailListItem({ label, detail, icon, }: SwapDetailListItemProps): react_jsx_runtime.JSX.Element;
+declare function SwapDetailListItem({ label, detail, icon, isLoading, }: SwapDetailListItemProps): react_jsx_runtime.JSX.Element;
 
 interface SwapStepItemProps {
     descriptionBlocks: SwapStepDescriptionBlock[];
@@ -327,7 +334,6 @@ interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare function BodyText({ size, children, bold, ...props }: BodyTextProps): react_jsx_runtime.JSX.Element;
 
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
-    children?: string;
     bold?: boolean;
 }
 declare function CaptionText({ children, bold, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;

package/package.json

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