@0xsquid/ui 0.6.1 → 0.6.3

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
@@ -2619,8 +2619,8 @@ function AddressButton(_a) {
 function ArrowRightIcon() {
     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: "M14 6L20 12L14 18M19 12H4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ChevronArrowIcon() {
-    return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ChevronArrowIcon({ size = '16', className, }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function ArrowTriangle() {
     return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
@@ -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-w-fit tw-items-center tw-text-grey-100", children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    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,
@@ -2822,19 +2822,19 @@ const switchCircleSizeClassMap = {
 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', 
+    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', 
+                }, 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-right-0.5 tw-bg-grey-100'
-                    : 'tw-left-0.5 tw-bg-grey-500') })] }));
+                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
 }
 
 const borderRadiusClassMap = {
@@ -2883,9 +2883,9 @@ function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostM
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    return (jsxRuntime.jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxRuntime.jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxRuntime.jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsxRuntime.jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxRuntime.jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+    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 peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                            } })] }), 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,
                     } })] }) }));
 }
@@ -2946,8 +2946,10 @@ function SettingsButton({ label }) {
     return (jsxRuntime.jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsxRuntime.jsx(CaptionText, { children: label }) }));
 }
 
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsxRuntime.jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsxRuntime.jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
+    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' || !canToggleBoostMode
+                    ? 'tw-bg-grey-300'
+                    : 'tw-bg-status-positive') })] }));
 }
 
 function EmojiSadIcon() {
@@ -2962,7 +2964,7 @@ const detailStateClassMap = {
 };
 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, canToggleBoostMode: canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
+    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: state === 'loading' ? false : 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 })] }));
@@ -3067,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() {
@@ -3098,10 +3103,16 @@ function DropdownMenu({ dropdownRef, items, className, }) {
     return (jsxRuntime.jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsxRuntime.jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsxRuntime.jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
-function Modal({ children }) {
+function Modal({ children, className, onBackdropClick }) {
     return (
-    // modal container
-    jsxRuntime.jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
+    // modal container (backdrop)
+    jsxRuntime.jsx("div", { onClick: onBackdropClick
+            ? (event) => {
+                if (event.target === event.currentTarget) {
+                    onBackdropClick();
+                }
+            }
+            : undefined, className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className), children: children }) }));
 }
 
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
@@ -3124,10 +3135,6 @@ function SwapInputsIcon() {
     return (jsxRuntime.jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_40_7936", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function WalletAddress({ address, ens }) {
-    return (jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-gap-1", children: ens || address ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsxRuntime.jsx("span", { className: "tw-text-grey-600", children: jsxRuntime.jsx(ChevronArrowIcon, {}) })] })) : null }));
-}
-
 function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
     var _a;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
@@ -3136,22 +3143,22 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? 'button' : 'div';
-    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs 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, {})] })] }))] }));
+    return (jsxRuntime.jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxRuntime.jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsxRuntime.jsx("div", { className: "tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsxRuntime.jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsxRuntime.jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsxRuntime.jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsxRuntime.jsx(SwapInputsIcon, {}), jsxRuntime.jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxRuntime.jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, {}), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxRuntime.jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin', direction === 'to' && 'tw-pointer-events-none'), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsx(CaptionText, { children: balance }), jsxRuntime.jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
     return (jsxRuntime.jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
-function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
+function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }) {
     // handles if route component is mounted
     const [isRouteVisible, setIsRouteVisible] = react.useState(false);
-    const currentStepCount = Math.round(_currentStepCount);
+    const currentStepIndex = Math.round(_currentStepIndex);
     // handles if route component is animating to show
     const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = react.useState(false);
-    const currentStep = steps[currentStepCount - 1];
-    const isLastStep = currentStepCount === steps.length;
-    const isFirstStep = currentStepCount === 1;
+    const currentStep = steps[currentStepIndex];
+    const isLastStep = currentStepIndex === steps.length - 1;
+    const isFirstStep = currentStepIndex === 0;
     react.useEffect(() => {
         // we do not want to unmount the route component if the animation to show route is running
         if (isShowRouteAnimationRunning)
@@ -3159,18 +3166,21 @@ function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
         // unmount route component when the animation of hiding is done
         const timeoutId = setTimeout(() => {
             setIsRouteVisible(false);
-        }, 350);
+        }, 200);
         return () => {
             clearTimeout(timeoutId);
         };
     }, [isShowRouteAnimationRunning]);
+    const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full tw-rounded-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxRuntime.jsxs("button", { onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsxRuntime.jsx(SwapStepSeparator, {})] })), jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent }), !isFirstStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsxRuntime.jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: cn('tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800', isShowRouteAnimationRunning
-                    ? 'tw-animate-slide-to-top'
-                    : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
+                    }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsxRuntime.jsx(SwapStepSeparator, {})] })), currentStep && (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent })), !isFirstStep && (jsxRuntime.jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsxRuntime.jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsxRuntime.jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxRuntime.jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsxRuntime.jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                            ? 'tw-animate-fade-in'
+                            : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
+                            ? 'tw-animate-slide-to-top'
+                            : 'tw-animate-slide-to-bottom'), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsxRuntime.jsx("button", { onClick: collapseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsxRuntime.jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsxRuntime.jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsxRuntime.jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsxRuntime.jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })] }))] }));
 }
 
 function TokenPair({ firstToken, secondToken }) {
@@ -3180,7 +3190,7 @@ function TokenPair({ firstToken, secondToken }) {
 }
 
 /**
- * Parsing the user readable config to css variables with HSL values
+ * Parsing the user readable config to css variables
  * @param style
  */
 const getParsedStyle = (style) => {
@@ -3274,5 +3284,4 @@ exports.Switch = Switch;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.UsdAmount = UsdAmount;
-exports.WalletAddress = WalletAddress;
 exports.useModal = useModal;

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

@@ -1,5 +1,8 @@
 export declare function ArrowRightIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronArrowIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronArrowIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeDownIcon({ size }: {

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/Modal.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 interface ModalProps {
     children: React.ReactNode;
+    className?: string;
+    onBackdropClick?: () => void;
 }
-export declare function Modal({ children }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { SwapStep } from '../../types/components';
-export declare function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }: {
+export declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
     steps: SwapStep[];
-    currentStepCount: number;
+    currentStepIndex: number;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -9,4 +9,3 @@ export * from './SwapConfiguration';
 export * from './SwapProgressViewHeader';
 export * from './SwapStepsCollapsed';
 export * from './TokenPair';
-export * from './WalletAddress';

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/services/internal/colorService.d.ts

@@ -1,28 +1,11 @@
 import { ConfigTheme } from '../../types/config';
 /**
- * Converts Hex color to HSL
- * Because the current daisy theme only accepts HSL css variables
- * @param hex
- * @returns HSL string
- */
-export declare const toHSL: (hex: string) => string;
-export declare const generateForegroundColorFrom: (input: string, percentage?: number) => string;
-export declare const generateFocusColorFrom: (input: string) => string;
-/**
- * Parsing the user readable config to css variables with HSL values
+ * Parsing the user readable config to css variables
  * @param style
  */
 export declare const getParsedStyle: (style?: ConfigTheme) => {
     [key: string]: string | undefined;
 } | undefined;
-export declare const isColorDark: (colorHEX: string | undefined) => boolean;
-export declare const getListItemHoverClassName: ({ transparentWidget }: {
-    transparentWidget?: boolean | undefined;
-}) => string;
-export declare function getDominantColor({ imageUrl, sampleSize, }: {
-    imageUrl: string;
-    sampleSize?: number;
-}): Promise<number[]>;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;

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/SwapConfiguration.stories.d.ts

@@ -14,3 +14,5 @@ export declare const HighPriceImpact: Story;
 export declare const IsFetching: Story;
 export declare const AllProps: Story;
 export declare const ToDirection: Story;
+export declare const FromAddressEmpty: Story;
+export declare const ToAddressEmpty: Story;

package/dist/{esm/types/stories/layout/SwapProgressView.stories.d.ts → cjs/types/stories/layout/SwapStepsCollapsed.stories.d.ts}

@@ -6,4 +6,5 @@ type Story = StoryObj<typeof meta>;
 export declare const FirstStep: Story;
 export declare const MiddleStep: Story;
 export declare const LastStep: Story;
-export declare const LongerRoute: Story;
+export declare const ShortRoute: Story;
+export declare const LongRoute: 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/cjs/types/types/components.d.ts

@@ -12,7 +12,6 @@ export type SwapStepDescriptionBlock = {
 export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
-    routeStepOrder: number;
 };
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';

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
@@ -2617,8 +2617,8 @@ function AddressButton(_a) {
 function ArrowRightIcon() {
     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: "M14 6L20 12L14 18M19 12H4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ChevronArrowIcon() {
-    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ChevronArrowIcon({ size = '16', className, }) {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function ArrowTriangle() {
     return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
@@ -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-w-fit tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-cursor-pointer tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-cursor-pointer tw-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+    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,
@@ -2820,19 +2820,19 @@ const switchCircleSizeClassMap = {
 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', 
+    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', 
+                }, 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-right-0.5 tw-bg-grey-100'
-                    : 'tw-left-0.5 tw-bg-grey-500') })] }));
+                    ? 'tw-translate-x-0 tw-bg-grey-100'
+                    : '-tw-translate-x-full tw-bg-grey-500') })] }));
 }
 
 const borderRadiusClassMap = {
@@ -2881,9 +2881,9 @@ function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostM
             onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
         }
     }
-    return (jsx(Tooltip, { tooltipWidth: "max", tooltipContent: canToggleBoostMode ? null : boostDisabledMessage, children: jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+    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 peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                            } })] }), 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,
                     } })] }) }));
 }
@@ -2944,8 +2944,10 @@ function SettingsButton({ label }) {
     return (jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsx(CaptionText, { children: label }) }));
 }
 
-function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode, }) {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, boostDisabledMessage: boostDisabledMessage, canToggleBoostMode: canToggleBoostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: estimatedTime, className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
+function Boost({ boostMode, onToggleBoostMode, estimatedTime, boostDisabledMessage, canToggleBoostMode = true, }) {
+    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' || !canToggleBoostMode
+                    ? 'tw-bg-grey-300'
+                    : 'tw-bg-status-positive') })] }));
 }
 
 function EmojiSadIcon() {
@@ -2960,7 +2962,7 @@ const detailStateClassMap = {
 };
 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, canToggleBoostMode: canToggleBoostMode, boostDisabledMessage: boostDisabledMessage }) })] })) }));
+    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: state === 'loading' ? false : 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 })] }));
@@ -3065,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() {
@@ -3096,10 +3101,16 @@ function DropdownMenu({ dropdownRef, items, className, }) {
     return (jsx("div", { ref: dropdownRef, className: "tw-relative", children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "tw-flex tw-w-[144px] tw-flex-col tw-gap-squid-xxs tw-overflow-auto tw-px-0 tw-py-squid-xxs", children: items.map((item) => (jsx(DropdownMenuItem, Object.assign({}, item), item.label))) }) }) }));
 }
 
-function Modal({ children }) {
+function Modal({ children, className, onBackdropClick }) {
     return (
-    // modal container
-    jsx("div", { className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-thick tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end", children: children }) }));
+    // modal container (backdrop)
+    jsx("div", { onClick: onBackdropClick
+            ? (event) => {
+                if (event.target === event.currentTarget) {
+                    onBackdropClick();
+                }
+            }
+            : undefined, className: "tw-absolute tw-inset-0 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-backdrop-blur/20 tw-backdrop-saturate-150", children: jsx("div", { className: cn('tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className), children: children }) }));
 }
 
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, label = '', onAddressButtonClick, isLoading, }) {
@@ -3122,10 +3133,6 @@ function SwapInputsIcon() {
     return (jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { "clip-path": "url(#clip0_40_7936)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10.5C20 16.0228 15.5228 20.5 10 20.5C4.47715 20.5 0 16.0228 0 10.5C0 4.97715 4.47715 0.5 10 0.5C15.5228 0.5 20 4.97715 20 10.5ZM8.38268 4.57612C8.75636 4.7309 9 5.09554 9 5.5V15.5C9 16.0523 8.55228 16.5 8 16.5C7.44772 16.5 7 16.0523 7 15.5V7.91421L5.70711 9.20711C5.31658 9.59763 4.68342 9.59763 4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289L7.29289 4.79289C7.57889 4.5069 8.00901 4.42134 8.38268 4.57612ZM11 15.5C11 15.9045 11.2436 16.2691 11.6173 16.4239C11.991 16.5787 12.4211 16.4931 12.7071 16.2071L15.7071 13.2071C16.0976 12.8166 16.0976 12.1834 15.7071 11.7929C15.3166 11.4024 14.6834 11.4024 14.2929 11.7929L13 13.0858V5.5C13 4.94771 12.5523 4.5 12 4.5C11.4477 4.5 11 4.94771 11 5.5V15.5Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_40_7936", children: jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(0 0.5)" }) }) })] }));
 }
 
-function WalletAddress({ address, ens }) {
-    return (jsx("div", { className: "tw-flex tw-items-center tw-gap-1", children: ens || address ? (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", children: ens ? ens : (address === null || address === void 0 ? void 0 : address.slice(0, 6)) + '...' + (address === null || address === void 0 ? void 0 : address.slice(-4)) }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronArrowIcon, {}) })] })) : null }));
-}
-
 function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }) {
     var _a;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
@@ -3134,22 +3141,22 @@ function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0',
     const isInteractive = direction === 'from';
     // improve accessibility
     const BalanceButtonTag = isInteractive ? 'button' : 'div';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs 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, {})] })] }))] }));
+    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-pb-squid-m", children: [jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-l tw-py-squid-xs tw-leading-5 tw-text-grey-300", children: jsxs("button", { onClick: onWalletButtonClick, className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600 hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { size: "small", children: ":" }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsx(BodyText, { size: "small", className: address ? 'tw-text-grey-300' : 'tw-text-royal-400', children: address ? address : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: address ? 'tw-text-grey-600' : 'tw-text-royal-400' })] })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { onClick: onAssetsButtonClick, chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), direction === 'from' ? (jsx("div", { className: "tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("input", { className: "tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none", placeholder: "0", value: amount, onChange: onAmountChange }) })) : (jsx("div", { className: "tw-w-full tw-px-squid-m tw-pb-[15px] tw-pt-[5px]", children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300", children: jsx("span", { children: amount }) }) })), !(token === null || token === void 0 ? void 0 : token.iconUrl) || isFetching ? null : (jsxs("footer", { className: "tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-m tw-text-grey-500", children: [jsxs("div", { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin'), children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage && direction === 'to' ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs(BalanceButtonTag, { className: cn('tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs', isInteractive && 'hover:tw-bg-material-light-thin', direction === 'to' && 'tw-pointer-events-none'), children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
 function SwapProgressViewHeader({ title, description, }) {
     return (jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
-function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
+function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }) {
     // handles if route component is mounted
     const [isRouteVisible, setIsRouteVisible] = useState(false);
-    const currentStepCount = Math.round(_currentStepCount);
+    const currentStepIndex = Math.round(_currentStepIndex);
     // handles if route component is animating to show
     const [isShowRouteAnimationRunning, setIsShowRouteAnimationRunning] = useState(false);
-    const currentStep = steps[currentStepCount - 1];
-    const isLastStep = currentStepCount === steps.length;
-    const isFirstStep = currentStepCount === 1;
+    const currentStep = steps[currentStepIndex];
+    const isLastStep = currentStepIndex === steps.length - 1;
+    const isFirstStep = currentStepIndex === 0;
     useEffect(() => {
         // we do not want to unmount the route component if the animation to show route is running
         if (isShowRouteAnimationRunning)
@@ -3157,18 +3164,21 @@ function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
         // unmount route component when the animation of hiding is done
         const timeoutId = setTimeout(() => {
             setIsRouteVisible(false);
-        }, 350);
+        }, 200);
         return () => {
             clearTimeout(timeoutId);
         };
     }, [isShowRouteAnimationRunning]);
+    const collapseRouteSteps = () => setIsShowRouteAnimationRunning(false);
     return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipContent: "View route", tooltipWidth: "max", containerClassName: "tw-w-full tw-rounded-full", childrenClassName: "tw-w-full tw-rounded-full", children: jsxs("button", { onClick: () => {
                         // mount route component and start animation
                         setIsRouteVisible(true);
                         setIsShowRouteAnimationRunning(true);
-                    }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsx(SwapStepSeparator, {})] })), jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent }), !isFirstStep && (jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxs("div", { className: cn('tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800', isShowRouteAnimationRunning
-                    ? 'tw-animate-slide-to-top'
-                    : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: () => setIsShowRouteAnimationRunning(false), className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] }))] }));
+                    }, className: "tw-relative tw-flex tw-min-h-button tw-w-full tw-items-center tw-overflow-hidden tw-rounded-squid-xxl tw-border tw-border-material-light-thin tw-bg-grey-800 tw-px-squid-xs tw-text-grey-300", children: [!isLastStep && (jsxs("span", { className: "tw-absolute -tw-top-1.5", children: [jsx("span", { className: "tw-absolute tw-top-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-grey-800 tw-to-transparent" }), jsx(SwapStepSeparator, {})] })), currentStep && (jsx(SwapStepItem, { descriptionBlocks: currentStep.descriptionBlocks, chipContent: currentStep.chipContent })), !isFirstStep && (jsxs("span", { className: "tw-absolute -tw-bottom-1.5", children: [jsx("span", { className: "tw-absolute tw-bottom-1 tw-h-full tw-w-full -tw-translate-x-1/2 tw-bg-gradient-to-b tw-from-transparent tw-to-grey-800" }), jsx(SwapStepSeparator, {})] }))] }) }), isRouteVisible && (jsxs("div", { className: "tw-absolute tw-top-0 tw-z-20 tw-flex tw-h-[536px] tw-w-full tw-flex-col tw-justify-end tw-gap-squid-xxs", children: [jsx("div", { className: cn('tw-absolute tw-top-0 tw-h-[536px] tw-w-full tw-rounded-squid-l tw-bg-material-dark-thick tw-opacity-0 tw-backdrop-blur/10', isShowRouteAnimationRunning
+                            ? 'tw-animate-fade-in'
+                            : 'tw-animate-fade-out'), onClick: collapseRouteSteps }), jsxs("div", { className: cn('tw-flex tw-max-h-[536px] tw-w-full tw-flex-col tw-gap-squid-xxs tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl', isShowRouteAnimationRunning
+                            ? 'tw-animate-slide-to-top'
+                            : 'tw-animate-slide-to-bottom'), children: [jsx("div", { className: "tw-flex tw-h-[52px] tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs", children: jsx("button", { onClick: collapseRouteSteps, className: "tw-flex tw-h-squid-xl tw-w-40 tw-items-center tw-justify-center tw-rounded-squid-xs tw-px-10 hover:tw-bg-material-light-thin", children: jsx("span", { className: "tw-flex tw-h-8 tw-w-8 tw-items-center tw-justify-center tw-text-grey-300", children: jsx(ChevronLargeDownIcon, { size: "32" }) }) }) }), jsx("ul", { className: "tw-flex tw-w-[400px] tw-flex-1 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks, chipContent: step.chipContent, showStepSeparator: !(index === steps.length - 1) }, index))) }), jsx("footer", { className: "tw-flex tw-items-end tw-justify-center tw-gap-squid-xs tw-self-stretch tw-p-squid-s", children: jsx(Button, { size: "md", variant: "secondary", label: "View on Squidscan", className: "tw-w-full" }) })] })] }))] }));
 }
 
 function TokenPair({ firstToken, secondToken }) {
@@ -3178,7 +3188,7 @@ function TokenPair({ firstToken, secondToken }) {
 }
 
 /**
- * Parsing the user readable config to css variables with HSL values
+ * Parsing the user readable config to css variables
  * @param style
  */
 const getParsedStyle = (style) => {
@@ -3235,4 +3245,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: clsx('tw-text-base-content tw-group tw-relative tw-font-geist'), children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, WalletAddress, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useModal };

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

@@ -1,5 +1,8 @@
 export declare function ArrowRightIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronArrowIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronArrowIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowTriangle(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronTopSmallIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeDownIcon({ size }: {

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/Modal.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 interface ModalProps {
     children: React.ReactNode;
+    className?: string;
+    onBackdropClick?: () => void;
 }
-export declare function Modal({ children }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 import { SwapStep } from '../../types/components';
-export declare function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }: {
+export declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
     steps: SwapStep[];
-    currentStepCount: number;
+    currentStepIndex: number;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -9,4 +9,3 @@ export * from './SwapConfiguration';
 export * from './SwapProgressViewHeader';
 export * from './SwapStepsCollapsed';
 export * from './TokenPair';
-export * from './WalletAddress';

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/services/internal/colorService.d.ts

@@ -1,28 +1,11 @@
 import { ConfigTheme } from '../../types/config';
 /**
- * Converts Hex color to HSL
- * Because the current daisy theme only accepts HSL css variables
- * @param hex
- * @returns HSL string
- */
-export declare const toHSL: (hex: string) => string;
-export declare const generateForegroundColorFrom: (input: string, percentage?: number) => string;
-export declare const generateFocusColorFrom: (input: string) => string;
-/**
- * Parsing the user readable config to css variables with HSL values
+ * Parsing the user readable config to css variables
  * @param style
  */
 export declare const getParsedStyle: (style?: ConfigTheme) => {
     [key: string]: string | undefined;
 } | undefined;
-export declare const isColorDark: (colorHEX: string | undefined) => boolean;
-export declare const getListItemHoverClassName: ({ transparentWidget }: {
-    transparentWidget?: boolean | undefined;
-}) => string;
-export declare function getDominantColor({ imageUrl, sampleSize, }: {
-    imageUrl: string;
-    sampleSize?: number;
-}): Promise<number[]>;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;

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/SwapConfiguration.stories.d.ts

@@ -14,3 +14,5 @@ export declare const HighPriceImpact: Story;
 export declare const IsFetching: Story;
 export declare const AllProps: Story;
 export declare const ToDirection: Story;
+export declare const FromAddressEmpty: Story;
+export declare const ToAddressEmpty: Story;

package/dist/{cjs/types/stories/layout/SwapProgressView.stories.d.ts → esm/types/stories/layout/SwapStepsCollapsed.stories.d.ts}

@@ -6,4 +6,5 @@ type Story = StoryObj<typeof meta>;
 export declare const FirstStep: Story;
 export declare const MiddleStep: Story;
 export declare const LastStep: Story;
-export declare const LongerRoute: Story;
+export declare const ShortRoute: Story;
+export declare const LongRoute: 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/esm/types/types/components.d.ts

@@ -12,7 +12,6 @@ export type SwapStepDescriptionBlock = {
 export type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
-    routeStepOrder: number;
 };
 export type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 export type ThemeType = 'light' | 'dark';

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-\[70\%\] {
-  left: 70%;
+.tw-left-\[16px\] {
+  left: 16px;
+}
+
+.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;
 }
@@ -987,6 +983,10 @@ video {
   max-height: 535px;
 }
 
+.tw-max-h-\[536px\] {
+  max-height: 536px;
+}
+
 .tw-max-h-\[540px\] {
   max-height: 540px;
 }
@@ -1051,6 +1051,10 @@ video {
   width: 3rem;
 }
 
+.tw-w-16 {
+  width: 4rem;
+}
+
 .tw-w-36 {
   width: 9rem;
 }
@@ -1075,6 +1079,10 @@ video {
   width: 2rem;
 }
 
+.tw-w-96 {
+  width: 24rem;
+}
+
 .tw-w-\[1\.5px\] {
   width: 1.5px;
 }
@@ -1288,6 +1296,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 +1316,44 @@ 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-fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.tw-animate-fade-in {
+  animation: tw-fade-in 0.2s ease-out both;
+}
+
+@keyframes tw-fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.tw-animate-fade-out {
+  animation: tw-fade-out 0.2s ease-out both;
+}
+
+@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);
@@ -1311,7 +1367,7 @@ video {
 }
 
 .tw-animate-slide-to-bottom {
-  animation: tw-slide-to-bottom 0.35s ease-out both;
+  animation: tw-slide-to-bottom 0.2s ease-out both;
 }
 
 @keyframes tw-slide-to-top {
@@ -1644,6 +1700,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);
 }
@@ -1656,6 +1716,10 @@ video {
   background-color: inherit;
 }
 
+.tw-bg-material-dark-average {
+  background-color: var(--squid-theme-material-dark-average);
+}
+
 .tw-bg-material-dark-thick {
   background-color: var(--squid-theme-material-dark-thick);
 }
@@ -1694,10 +1758,6 @@ video {
   background-color: transparent;
 }
 
-.tw-bg-opacity-70 {
-  --tw-bg-opacity: 0.7;
-}
-
 .tw-bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -2261,6 +2321,12 @@ video {
   outline-color: var(--squid-theme-material-light-thin);
 }
 
+.tw-backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px);
+  -webkit-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);
+          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-backdrop-blur\/10 {
   --tw-backdrop-blur: blur(10px);
   -webkit-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);
@@ -2279,6 +2345,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 +2494,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

@@ -55,7 +55,6 @@ type SwapStepDescriptionBlock = {
 type SwapStep = {
     descriptionBlocks: SwapStepDescriptionBlock[];
     chipContent: React.ReactNode;
-    routeStepOrder: number;
 };
 type DetailsToolbarState = 'full' | 'loading' | 'empty' | 'error';
 type ThemeType = 'light' | 'dark';
@@ -222,8 +221,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[];
@@ -251,8 +251,10 @@ declare function Menu({ children, containerClassName, contentClassName, title, d
 
 interface ModalProps {
     children: React.ReactNode;
+    className?: string;
+    onBackdropClick?: () => void;
 }
-declare function Modal({ children }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onBackdropClick }: ModalProps): react_jsx_runtime.JSX.Element;
 
 interface NavigationBarProps {
     title?: string;
@@ -302,9 +304,9 @@ interface SwapProgressViewHeaderProps {
 }
 declare function SwapProgressViewHeader({ title, description, }: SwapProgressViewHeaderProps): react_jsx_runtime.JSX.Element;
 
-declare function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }: {
+declare function SwapStepsCollapsed({ steps, currentStepIndex: _currentStepIndex, }: {
     steps: SwapStep[];
-    currentStepCount: number;
+    currentStepIndex: number;
 }): react_jsx_runtime.JSX.Element;
 
 interface TokenPairProps {
@@ -319,12 +321,6 @@ interface TokenPairProps {
 }
 declare function TokenPair({ firstToken, secondToken }: TokenPairProps): react_jsx_runtime.JSX.Element;
 
-interface WalletAddressProps {
-    ens?: string;
-    address?: string;
-}
-declare function WalletAddress({ address, ens }: WalletAddressProps): react_jsx_runtime.JSX.Element;
-
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: string | undefined;
     size: TextSize;
@@ -333,7 +329,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;
@@ -397,4 +392,4 @@ declare function useModal(props?: {
     openModalButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, WalletAddress, useModal };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipThreshold, type TooltipWidth, UsdAmount, useModal };

package/package.json

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

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

@@ -1,6 +0,0 @@
-interface WalletAddressProps {
-    ens?: string;
-    address?: string;
-}
-export declare function WalletAddress({ address, ens }: WalletAddressProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/cjs/types/services/internal/walletService.d.ts

@@ -1 +0,0 @@
-export declare const formatWalletAddress: (walletAddress: string | undefined, trimLength?: number) => string;

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

@@ -1,6 +0,0 @@
-interface WalletAddressProps {
-    ens?: string;
-    address?: string;
-}
-export declare function WalletAddress({ address, ens }: WalletAddressProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/types/services/internal/walletService.d.ts

@@ -1 +0,0 @@
-export declare const formatWalletAddress: (walletAddress: string | undefined, trimLength?: number) => string;