@0xsquid/ui 0.6.2 → 0.7.0

package/dist/cjs/index.js

@@ -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" }) }));
@@ -2819,14 +2819,16 @@ const switchCircleSizeClassMap = {
     small: 'tw-w-4 tw-h-4',
     large: 'tw-w-6 tw-h-6',
 };
-function Switch({ checked = false, onChange, size }) {
+function Switch({ checked = false, onChange, size, disabled = false, }) {
     return (
     // Switch container
-    jsxRuntime.jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-cursor-pointer tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin tw-transition-colors', 
+    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 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: {
+        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800', 
+        // disabled styles
+        disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'), children: [jsxRuntime.jsx("input", { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsxRuntime.jsx("span", { style: {
                     filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
                 }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all', 
                 // size styles
@@ -2864,10 +2866,8 @@ function Tooltip({ children, tooltipContent, tooltipWidth = 'container', thresho
 }
 
 const animationDuration = '500ms';
-function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
+function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode = true, boostDisabledMessage = 'Boost disabled', }) {
     const boostIndicatorRef = react.useRef(null);
-    // force normal mode if canToggleBoostMode is false
-    const boostMode = canToggleBoostMode ? _boostMode : 'normal';
     function handleToggleBoostMode() {
         if (!boostIndicatorRef.current || !canToggleBoostMode)
             return;
@@ -2946,8 +2946,8 @@ 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' || boostDisabledMessage
+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') })] }));
 }
@@ -2956,19 +2956,20 @@ function EmojiSadIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: jsxRuntime.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM13.5341 12.4645C11.5815 10.5118 8.41568 10.5118 6.46306 12.4645C6.07254 12.855 6.07254 13.4882 6.46306 13.8787C6.85358 14.2692 7.48675 14.2692 7.87727 13.8787C9.04885 12.7071 10.9483 12.7071 12.1199 13.8787C12.5104 14.2692 13.1436 14.2692 13.5341 13.8787C13.9247 13.4882 13.9247 12.855 13.5341 12.4645ZM8.5 7.5C8.5 8.32843 7.94036 9 7.25 9C6.55964 9 6 8.32843 6 7.5C6 6.67157 6.55964 6 7.25 6C7.94036 6 8.5 6.67157 8.5 7.5ZM12.75 9C13.4404 9 14 8.32843 14 7.5C14 6.67157 13.4404 6 12.75 6C12.0596 6 11.5 6.67157 11.5 7.5C11.5 8.32843 12.0596 9 12.75 9Z", fill: "currentColor" }) }));
 }
 
+function 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 })] }));
+}
+
 const detailStateClassMap = {
     loading: 'tw-opacity-33 tw-pointer-events-none',
     empty: 'tw-pointer-events-none tw-hidden',
     error: 'tw-opacity-33 tw-pointer-events-none',
     full: '',
 };
-function DetailsToolbar({ state = 'full', errorMessage, boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }) {
+function DetailsToolbar({ state = 'full', errorMessage = 'Something went wrong', boostMode = 'normal', onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }) {
     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: cn('tw-h-squid-[50px] tw-flex tw-w-[480px] tw-items-center tw-justify-around tw-bg-grey-900 tw-py-squid-xxs tw-text-grey-500', state === 'error' ? 'tw-px-squid-l' : 'tw-px-squid-m'), children: state === 'error' && errorMessage ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ErrorMessage, { message: errorMessage }), helpButton ? (jsxRuntime.jsx(Button, { onClick: helpButton.onClick, size: "md", variant: "tertiary", label: helpButton.label })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: detailClassName, children: jsxRuntime.jsx(FeeButton, { feeInUsd: feeInUsd, onClick: onFeeButtonClick }) }), jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === 'loading' ? (jsxRuntime.jsx(Loader, { size: "32" })) : (jsxRuntime.jsx(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 })] }));
-};
 
 function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
     return (jsxRuntime.jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-h-squid-l tw-cursor-pointer tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsxRuntime.jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsxRuntime.jsx(CaptionText, { className: labelClassName, children: label })] }) }));
@@ -3047,10 +3048,12 @@ const listItemSizeMap = {
     large: 'tw-max-w-list-item-large tw-h-list-item-large tw-px-squid-xs',
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected"]);
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
+    var { itemTitle, mainImageUrl, subtitle, detail, icon, secondaryImageUrl, size = 'large', mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly } = _a, props = __rest(_a, ["itemTitle", "mainImageUrl", "subtitle", "detail", "icon", "secondaryImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly"]);
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn('tw-group/list-item tw-flex tw-bg-grey-900 tw-text-grey-300', listItemSizeMap[size], className), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-w-full tw-cursor-pointer tw-items-center tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin', isSelected && 'tw-bg-material-light-thin'), children: [size === 'large' ? (jsxRuntime.jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx(BadgeImage, { extraMarginForBadge: false, imageUrl: mainImageUrl, badgeUrl: secondaryImageUrl, size: "md", rounded: false })) })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon ? (mainIcon) : (jsxRuntime.jsx("img", { src: mainImageUrl, className: "tw-h-[30px] tw-w-[30px] tw-rounded-squid-xs" })) })), jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-[40px] tw-w-full tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xs', 
                     // 'large' variant has extra padding
-                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("span", { className: "tw-flex tw-max-h-4 tw-items-center", children: [size === 'large' ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, jsxRuntime.jsx("span", { className: "min-tw-w-4 min-tw-h-4", children: icon ? icon : null })] })] }) })));
+                    size === 'large' && 'tw-px-squid-xxs'), children: [typeof itemTitle === 'string' ? (jsxRuntime.jsx(BodyText, { size: "small", className: "tw-truncate !tw-leading-[18px]", children: itemTitle })) : (itemTitle), size === 'large' && subtitle ? (jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-xs !tw-leading-[10px] tw-text-grey-500", children: subtitle })) : null] }), jsxRuntime.jsxs("button", { onClick: onDetailClick, className: cn('tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin', size === 'large' ? 'tw-h-squid-xl' : 'tw-h-squid-l', showDetailOnHoverOnly
+                        ? 'tw-hidden group-hover/list-item:tw-flex'
+                        : 'tw-flex'), children: [size === 'large' && detail ? (jsxRuntime.jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })) : null, icon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] })] }) })));
 }
 
 function MenuItem({ label, imageUrl, icon }) {
@@ -3070,10 +3073,10 @@ function SettingsItem({ icon, label, controls, transparentControls = false, show
 }
 
 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)] }) }));
+    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, { className: "tw-text-grey-500" })) : 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 LoadingSkeleton({ className }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100", height: "20", viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_1083_18992)", children: [jsxRuntime.jsx("mask", { id: "mask0_1083_18992", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "20", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1083_18992)" }) }), jsxRuntime.jsx("g", { mask: "url(#mask0_1083_18992)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "currentColor" }) })] }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1083_18992", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient", children: [jsxRuntime.jsx("stop", { "stop-color": "#D9D9D9", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.395881", "stop-color": "#737373", "stop-opacity": "0.33" }), jsxRuntime.jsx("stop", { offset: "0.597867", "stop-color": "#737373", "stop-opacity": "0.66" }), jsxRuntime.jsx("stop", { offset: "0.697004", "stop-color": "#737373", "stop-opacity": "0.33" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1083_18992", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
 }
 
 function SwapStepSeparator() {
@@ -3103,10 +3106,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, }) {
@@ -3129,11 +3138,7 @@ 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, }) {
+function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd = '0', balance = '0', isFetching = false, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }) {
     var _a;
     const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > 5
         ? 'tw-text-status-negative'
@@ -3141,22 +3146,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: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (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)
@@ -3164,18 +3169,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 }) {
@@ -3185,7 +3193,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) => {
@@ -3255,6 +3263,7 @@ exports.Chip = Chip;
 exports.DetailsToolbar = DetailsToolbar;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuItem = DropdownMenuItem;
+exports.ErrorMessage = ErrorMessage;
 exports.FeeButton = FeeButton;
 exports.HeadingText = HeadingText;
 exports.HistoryItem = HistoryItem;
@@ -3279,5 +3288,4 @@ exports.Switch = Switch;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.UsdAmount = UsdAmount;
-exports.WalletAddress = WalletAddress;
 exports.useModal = useModal;

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

@@ -7,5 +7,5 @@ interface BoostButtonProps {
     }) => void;
     boostDisabledMessage?: string;
 }
-export declare function BoostButton({ boostMode: _boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoostButton({ boostMode, onToggleBoostMode, canToggleBoostMode, boostDisabledMessage, }: BoostButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     size: SwitchSize;
+    disabled?: boolean;
 }
-export declare function Switch({ checked, onChange, size }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ checked, onChange, size, disabled, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,10 @@
-export declare function EmptyHeartIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function FilledHeartIcon(): import("react/jsx-runtime").JSX.Element;
-export declare function BrokenHeartIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyHeartIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FilledHeartIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BrokenHeartIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function HeartSmallIcon(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { BoostMode, DetailsToolbarState } from '../../types/components';
 interface DetailsToolbarProps {
     state?: DetailsToolbarState;
-    errorMessage: string;
+    errorMessage?: string;
     boostMode?: BoostMode;
     onToggleBoostMode?: ({ boostMode }: {
         boostMode: BoostMode;
@@ -12,6 +12,10 @@ interface DetailsToolbarProps {
     estimatedTime?: string;
     canToggleBoostMode?: boolean;
     boostDisabledMessage?: string;
+    helpButton?: {
+        label: string;
+        onClick: () => void;
+    };
 }
-export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsToolbar({ state, errorMessage, boostMode, onToggleBoostMode, onInvertSwapButtonClick, onFeeButtonClick, feeInUsd, estimatedTime, canToggleBoostMode, boostDisabledMessage, helpButton, }: DetailsToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,3 @@
+export declare function ErrorMessage({ message }: {
+    message: 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/ProductCard.d.ts

@@ -1,6 +1,2 @@
 /// <reference types="react" />
-interface ProductCardProps {
-    children?: React.ReactNode;
-}
-export declare function ProductCard({ children }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ProductCard({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

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

@@ -21,6 +21,9 @@ interface SwapConfigurationProps {
     onAmountChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onWalletButtonClick?: () => void;
     onAssetsButtonClick?: () => void;
+    error?: {
+        message: string;
+    };
 }
-export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ priceImpactPercentage, amount, swapAmountUsd, balance, isFetching, chain, token, direction, onAmountChange, onWalletButtonClick, onAssetsButtonClick, address, error, }: SwapConfigurationProps): 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

@@ -1,6 +1,7 @@
 export * from './Boost';
 export * from './DetailsToolbar';
 export * from './DropdownMenu';
+export * from './ErrorMessage';
 export * from './Menu';
 export * from './Modal';
 export * from './NavigationBar';
@@ -9,4 +10,3 @@ export * from './SwapConfiguration';
 export * from './SwapProgressViewHeader';
 export * from './SwapStepsCollapsed';
 export * from './TokenPair';
-export * from './WalletAddress';

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

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

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 interface AssetsViewProps {
     chains: {
         name: string;
@@ -25,9 +25,5 @@ interface AssetsViewProps {
     }[];
 }
 export declare function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }: AssetsViewProps): import("react/jsx-runtime").JSX.Element;
-export declare const List: ({ children }: {
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const AddFavoriteToken: () => import("react/jsx-runtime").JSX.Element;
-export declare const RemoveFavoriteToken: () => import("react/jsx-runtime").JSX.Element;
+export declare const List: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,5 +5,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const LargeChecked: Story;
 export declare const LargeUnchecked: Story;
+export declare const LargeDisabled: Story;
 export declare const SmallChecked: Story;
 export declare const SmallUnchecked: Story;
+export declare const SmallDisabled: Story;

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

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

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ErrorMessage } from '../../components/layout/ErrorMessage';
+declare const meta: Meta<typeof ErrorMessage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -14,3 +14,6 @@ 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;
+export declare const Error: 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/ListItem.stories.d.ts

@@ -7,10 +7,13 @@ export declare const Large: Story;
 export declare const LargeWithSubtitle: Story;
 export declare const LargeWithDetail: Story;
 export declare const LargeWithIcon: Story;
+export declare const LargeWithDetailAndIcon: Story;
+export declare const LargeShowDetailOnHoverOnly: Story;
 export declare const LargeWithSecondaryImage: Story;
 export declare const LargeSelected: Story;
 export declare const LargeWithCustomIconAsImage: Story;
 export declare const Small: Story;
 export declare const SmallWithIcon: Story;
+export declare const SmallShowDetailOnHoverOnly: Story;
 export declare const SmallSelected: Story;
 export declare const SmallWithCustomIconAsImage: 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';