@0xsquid/ui 0.2.0 → 0.4.0

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useMemo, createContext } from 'react';
+import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -2572,16 +2572,6 @@ function __rest(s, e) {
     return t;
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -2645,6 +2635,9 @@ function ChevronRightSmallIcon() {
 function ArrowLeftIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M10 6L4 12L10 18M5 12H20", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
+function ChevronGrabberVerticalIcon({ size = '16', className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M5.33301 6.00002L7.52827 3.80476C7.78862 3.54441 8.21073 3.54441 8.47108 3.80476L10.6663 6.00002M5.33301 10L7.52827 12.1953C7.78862 12.4556 8.21073 12.4556 8.47108 12.1953L10.6663 10", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
 
 function ArrowButton(_a) {
     var { label, disabled } = _a, props = __rest(_a, ["label", "disabled"]);
@@ -2655,350 +2648,229 @@ function ArrowButton(_a) {
                 'aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800'), children: jsx(ArrowRightIcon, {}) })] })));
 }
 
-const animationDuration = '500ms';
-function BoostButton({ boostMode = 'normal', onToggleBoostMode, }) {
-    const boostIndicatorRef = useRef(null);
-    function handleToggleBoostMode() {
-        if (!boostIndicatorRef.current)
-            return;
-        // we don't want to trigger the animation when the component is mounted
-        // so we set the animation duration only when user clicks the button
-        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
-        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
-            boostIndicatorRef.current.dataset.boostMode = 'boost';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
-        }
-        else {
-            boostIndicatorRef.current.dataset.boostMode = 'normal';
-            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
-        }
-    }
-    return (jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
-                            boxShadow: generateMarkerLines(40),
-                        } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current', `tw-duration-${animationDuration}`) })] }));
-}
-function generateMarkerLines(count) {
-    const halfCount = Math.ceil(count / 2);
-    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `-${(index + 1) * 6}px 0 currentColor`;
-    });
-    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
-        return `${(index + 1) * 6}px 0 currentColor`;
-    });
-    const allShadows = [...rightShadows, ...leftShadows];
-    return allShadows.join(', ');
-}
-
-const buttonSizeClassMap = {
-    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
-    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
-};
-const buttonVariantClassMap = {
-    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
-    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
-    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
-};
-// right now all variants have the same disabled styles
-// in the future, we can add more disabled styles for different variants
-const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
-function Button(_a) {
-    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
-    return (jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
-        // disabled styles
-        buttonDisabledClass, 
-        // custom classes from props
-        props.className), children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
-        // label only
-        jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
-        // icon only
-        icon) : (
-        // icon and label
-        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
-}
-
-function Chip(_a) {
-    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
-    return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
+function PlusIcon() {
+    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: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
 }
 
+const SQUID_THEME_CSS_VARIABLE_PREFIX = '--squid-theme-';
 /**
  * Mapping between readable variables name and css variables used TailwindCSS config
  */
 const themeTypesKeys = {
     'accent-gold': {
-        cssVariable: '--squid-theme-accent-gold',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-gold`,
     },
     'accent-salmon': {
-        cssVariable: '--squid-theme-accent-salmon',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}accent-salmon`,
     },
     'grey-100': {
-        cssVariable: '--squid-theme-grey-100',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-100`,
     },
     'grey-200': {
-        cssVariable: '--squid-theme-grey-200',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-200`,
     },
     'grey-300': {
-        cssVariable: '--squid-theme-grey-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-300`,
     },
     'grey-400': {
-        cssVariable: '--squid-theme-grey-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-400`,
     },
     'grey-500': {
-        cssVariable: '--squid-theme-grey-500',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-500`,
     },
     'grey-600': {
-        cssVariable: '--squid-theme-grey-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-600`,
     },
     'grey-700': {
-        cssVariable: '--squid-theme-grey-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-700`,
     },
     'grey-800': {
-        cssVariable: '--squid-theme-grey-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-800`,
     },
     'grey-900': {
-        cssVariable: '--squid-theme-grey-900',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}grey-900`,
     },
     'material-dark-average': {
-        cssVariable: '--squid-theme-material-dark-average',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-average`,
     },
     'material-dark-thick': {
-        cssVariable: '--squid-theme-material-dark-thick',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thick`,
     },
     'material-dark-thin': {
-        cssVariable: '--squid-theme-material-dark-thin',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-dark-thin`,
     },
     'material-light-average': {
-        cssVariable: '--squid-theme-material-light-average',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-average`,
     },
     'material-light-thick': {
-        cssVariable: '--squid-theme-material-light-thick',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thick`,
     },
     'material-light-thin': {
-        cssVariable: '--squid-theme-material-light-thin',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}material-light-thin`,
     },
     'royal-100': {
-        cssVariable: '--squid-theme-royal-100',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-100`,
     },
     'royal-200': {
-        cssVariable: '--squid-theme-royal-200',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-200`,
     },
     'royal-300': {
-        cssVariable: '--squid-theme-royal-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-300`,
     },
     'royal-400': {
-        cssVariable: '--squid-theme-royal-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-400`,
     },
     'royal-500': {
-        cssVariable: '--squid-theme-royal-500',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-500`,
     },
     'royal-600': {
-        cssVariable: '--squid-theme-royal-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-600`,
     },
     'royal-700': {
-        cssVariable: '--squid-theme-royal-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-700`,
     },
     'royal-800': {
-        cssVariable: '--squid-theme-royal-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}royal-800`,
     },
     'status-negative': {
-        cssVariable: '--squid-theme-status-negative',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-negative`,
     },
     'status-positive': {
-        cssVariable: '--squid-theme-status-positive',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}status-positive`,
     },
     'volt-300': {
-        cssVariable: '--squid-theme-volt-300',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-300`,
     },
     'volt-400': {
-        cssVariable: '--squid-theme-volt-400',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-400`,
     },
     'volt-600': {
-        cssVariable: '--squid-theme-volt-600',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-600`,
     },
     'volt-700': {
-        cssVariable: '--squid-theme-volt-700',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-700`,
     },
     'volt-800': {
-        cssVariable: '--squid-theme-volt-800',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-800`,
     },
     'volt-900': {
-        cssVariable: '--squid-theme-volt-900',
+        cssVariable: `${SQUID_THEME_CSS_VARIABLE_PREFIX}volt-900`,
     },
 };
 
-/**
- * Parsing the user readable config to css variables with HSL values
- * @param style
- */
-const getParsedStyle = (style) => {
-    if (style) {
-        const styleKeys = Object.keys(themeTypesKeys);
-        const parsed = styleKeys.map((sk) => {
-            const themeItem = themeTypesKeys[sk];
-            let userValue = style[sk];
-            return {
-                [themeItem.cssVariable]: userValue,
-            };
-        });
-        // adds a variant with 0.05 opacity for each color
-        // will result in variables like this:
-        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
-        // styleKeys.forEach((sk) => {
-        //   const themeItem = themeTypesKeys[sk]
-        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
-        //     style[sk], // i.e "#ffffff"
-        //     0.05,
-        //   )
-        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
-        //   parsed.push({
-        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
-        //   })
-        // })
-        parsed.push({
-            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
-        });
-        return parsed.reduce((a, v) => {
-            const key = Object.keys(v)[0];
-            return Object.assign(Object.assign({}, a), { [key]: v[key] });
-        });
-    }
-};
-function getDominantColor(_a) {
-    return __awaiter(this, arguments, void 0, function* ({ imageUrl, sampleSize = 1000, }) {
-        return new Promise((resolve, reject) => {
-            const img = document.createElement('img');
-            img.src = imageUrl;
-            img.crossOrigin = 'Anonymous';
-            img.onload = () => {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                if (!ctx)
-                    return reject(new Error('Could not create canvas context'));
-                const width = img.width;
-                const height = img.height;
-                const aspectRatio = width / height;
-                const newWidth = Math.sqrt(sampleSize * aspectRatio);
-                const newHeight = Math.sqrt(sampleSize / aspectRatio);
-                canvas.width = newWidth;
-                canvas.height = newHeight;
-                ctx.drawImage(img, 0, 0, newWidth, newHeight);
-                const imageData = ctx.getImageData(0, 0, newWidth, newHeight);
-                const data = imageData.data;
-                const colorCounts = {};
-                for (let i = 0; i < data.length; i += 4) {
-                    const r = data[i];
-                    const g = data[i + 1];
-                    const b = data[i + 2];
-                    const color = `${r},${g},${b}`;
-                    colorCounts[color] = (colorCounts[color] || 0) + 1;
-                }
-                let dominantColor = '';
-                let maxCount = 0;
-                for (const color in colorCounts) {
-                    if (colorCounts[color] > maxCount) {
-                        dominantColor = color;
-                        maxCount = colorCounts[color];
-                    }
-                }
-                resolve(dominantColor.split(',').map(Number));
-            };
-            img.onerror = reject;
-        });
-    });
-}
-function getContrastColor({ r, g, b, }) {
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness >= 128 ? '#000' : '#fff';
-}
-/**
- * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
- *
- * @example getHexColorFromOpacityPercentage('#FF0000', 0.5) // '#FF000080'
- *
- * @param {string} color - The base color in hexadecimal format.
- * @param {number} opacity - The opacity percentage (0-1).
- * @returns {string} The hexadecimal color with opacity.
- */
-function getHexColorFromOpacityPercentage(color, opacity) {
-    return (color +
-        Math.round(opacity * 255)
-            .toString(16)
-            .padStart(2, '0')).toUpperCase();
-}
-
-function PlusIcon() {
-    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: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }) }));
-}
-
-const DEFAULT_RGB = [158, 121, 210];
-const imageClass = 'tw-w-10 tw-aspect-square tw-ml-2 tw-mr-2 -tw-translate-x-2 tw-flex tw-items-center tw-justify-center';
-function Dropdown({ chainImageUrl, tokenImageUrl, tokenSymbol, }) {
-    const [tokenImageRgb, setTokenImageRgb] = useState(DEFAULT_RGB);
-    const [chainImageRgb, setChainImageRgb] = useState(DEFAULT_RGB);
-    useEffect(() => {
-        if (tokenImageUrl) {
-            // get dominant color when image is loaded
-            getDominantColor({ imageUrl: tokenImageUrl })
-                .then((color) => {
-                setTokenImageRgb(color);
-            })
-                .catch((error) => {
-                setTokenImageRgb(DEFAULT_RGB);
-                console.error('Error getting dominant color for token:', error);
-            });
-        }
-        if (chainImageUrl) {
-            getDominantColor({ imageUrl: chainImageUrl })
-                .then((color) => {
-                setChainImageRgb(color);
-            })
-                .catch((error) => {
-                setChainImageRgb(DEFAULT_RGB);
-                console.error('Error getting dominant color for chain:', error);
-            });
-        }
-    }, []);
-    const dropdownGradient = useMemo(() => {
-        const defaultRgb = DEFAULT_RGB.join(',');
-        // if no chain icon, gradient is as follows:
-        // 0%-100% default color
+const imageClass = 'tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center';
+const defaultBgColor = `var(${themeTypesKeys['royal-500'].cssVariable})`;
+function AssetsButton({ chainImageUrl, tokenImageUrl, tokenSymbol, chainBgColor = defaultBgColor, tokenBgColor = defaultBgColor, tokenTextColor, }) {
+    const bgGradient = useMemo(() => {
         if (!chainImageUrl) {
-            return `linear-gradient(to right, rgb(${defaultRgb}), rgb(${defaultRgb}))`;
+            return `linear-gradient(to right, ${defaultBgColor}, ${defaultBgColor})`;
         }
-        const tokenRgb = tokenImageRgb.join(',');
-        const chainRgb = chainImageRgb.join(',');
-        // if chain icon present but no token icon, gradient is as follows:
-        // 0%-25% chain color, 25%-100% default color
         if (!tokenImageUrl) {
-            return `linear-gradient(to right, rgb(${chainRgb}) 25%, rgb(${defaultRgb}) 30%)`;
+            return `linear-gradient(90deg, ${chainBgColor} 54.86%, ${tokenBgColor} 95.83%)`;
         }
-        // if both chain and token icons present, gradient is as follows:
-        // 0%-20% chain color, 20%-100% token color
-        return `linear-gradient(to right, rgb(${chainRgb}) 20%, rgb(${tokenRgb}) 25%)`;
-    }, [chainImageUrl, tokenImageUrl, tokenImageRgb, chainImageRgb]);
-    return (jsxs("div", { className: "dropdown-mask tw-flex tw-h-10 tw-w-[209px] tw-items-center tw-text-grey-100", style: {
-            backgroundImage: dropdownGradient,
-        }, children: [jsx("div", { className: clsx(imageClass), children: chainImageUrl ? jsx("img", { src: chainImageUrl, alt: "" }) : jsx(PlusIcon, {}) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass), children: jsx("img", { src: tokenImageUrl, alt: "" }) })) : null, tokenImageUrl && chainImageUrl ? (jsx(TokenSymbol, { rgb: tokenImageRgb, symbol: tokenSymbol || '' })) : (jsx(SelectTokenLabel, {}))] }));
-}
-const TokenSymbol = ({ rgb, symbol, }) => {
-    return (jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", style: {
-            color: getContrastColor({
-                r: Number(rgb[0]),
-                g: Number(rgb[1]),
-                b: Number(rgb[2]),
-            }),
-        }, children: [jsx(BodyText, { size: "small", children: symbol }), jsx(ChevronArrowIcon, {})] }));
+        return `linear-gradient(to right, ${chainBgColor} 47.5%, ${tokenBgColor} 52.5%)`;
+    }, [chainBgColor, tokenBgColor]);
+    return (jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xl tw-min-w-[209px] tw-items-center tw-text-grey-100", children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-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-items-center tw-justify-between', tokenImageUrl ? 'tw-w-[90px]' : 'tw-w-full tw-max-w-[72px]'), style: {
+                    backgroundImage: bgGradient,
+                }, children: jsx("div", { className: clsx(imageClass), children: chainImageUrl ? (jsx("img", { src: chainImageUrl, alt: "" })) : (jsx(Fragment, { children: jsx(PlusIcon, {}) })) }) }), tokenImageUrl && chainImageUrl ? (jsx("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-rounded-bl-full tw-rounded-tl-full tw-border-b tw-border-t tw-border-material-light-thin'), style: {
+                    backgroundColor: tokenBgColor,
+                }, children: jsx("img", { src: tokenImageUrl, alt: "", className: "tw-h-full -tw-translate-x-[2px]" }) })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', tokenImageUrl && 'tw-pl-[7px]'), style: {
+                    backgroundColor: tokenBgColor,
+                    color: tokenTextColor,
+                }, children: [jsx(BodyText, { size: "small", className: "tw-leading-[13px]", children: tokenImageUrl ? tokenSymbol : 'Select token' }), jsx(ChevronLargeRightIcon, {})] })] }));
+}
+
+const animationDuration = '500ms';
+function BoostButton({ boostMode, onToggleBoostMode, }) {
+    const boostIndicatorRef = useRef(null);
+    function handleToggleBoostMode() {
+        if (!boostIndicatorRef.current)
+            return;
+        // we don't want to trigger the animation when the component is mounted
+        // so we set the animation duration only when user clicks the button
+        boostIndicatorRef.current.style.setProperty('--boost-animation-duration', animationDuration);
+        if (boostIndicatorRef.current.dataset.boostMode === 'normal') {
+            boostIndicatorRef.current.dataset.boostMode = 'boost';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'boost' });
+        }
+        else {
+            boostIndicatorRef.current.dataset.boostMode = 'normal';
+            onToggleBoostMode === null || onToggleBoostMode === void 0 ? void 0 : onToggleBoostMode({ boostMode: 'normal' });
+        }
+    }
+    return (jsxs("div", { onClick: handleToggleBoostMode, className: "tw-relative tw-flex tw-h-squid-xl tw-w-[140px] tw-flex-col tw-justify-between tw-overflow-hidden tw-bg-grey-900 tw-pb-squid-xxs tw-text-grey-300", children: [jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-left-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-r tw-from-grey-900 tw-to-transparent" }), jsx("span", { className: "tw-via-grey-900/70 tw-absolute tw-right-0 tw-top-0 tw-z-10 tw-h-full tw-w-8 tw-bg-gradient-to-l tw-from-grey-900 tw-to-transparent" }), jsxs("div", { ref: boostIndicatorRef, "data-boost-mode": boostMode, className: "tw-group tw-peer tw-flex tw-h-full tw-items-center tw-justify-between tw-transition-transform data-[boost-mode=boost]:tw-animate-move-to-left-with-spring-bounce data-[boost-mode=normal]:tw-animate-move-to-right-with-spring-bounce", children: [jsx("div", { className: "tw-w-1/2 tw-text-center", children: jsx(BodyText, { size: "small", className: "tw-text-grey-300", children: "Normal" }) }), jsxs("div", { className: "tw-w-1/2 tw-text-center", children: [jsx(BodyText, { size: "small", className: "tw-text-status-positive", children: "Boost" }), ' '] }), jsx("div", { className: "tw-absolute tw-bottom-0 tw-h-1.5 tw-w-[1.5px] tw-rounded-sm tw-bg-grey-500 tw-text-grey-500 group-data-[boost-mode=boost]:tw-left-[calc(50%-2px)] group-data-[boost-mode=normal]:tw-left-[calc(50%-6px)]", style: {
+                            boxShadow: generateMarkerLines(40),
+                        } })] }), jsx("div", { className: cn('tw-absolute tw-bottom-0.5 tw-left-[calc(50%-1.5px)] tw-z-20 tw-h-[10px] tw-w-[3px] tw-rounded-sm tw-transition-colors peer-data-[boost-mode=boost]:tw-bg-status-positive peer-data-[boost-mode=normal]:tw-bg-current'), style: {
+                    transitionDuration: animationDuration,
+                } })] }));
+}
+function generateMarkerLines(count) {
+    const halfCount = Math.ceil(count / 2);
+    const rightShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `-${(index + 1) * 6}px 0 currentColor`;
+    });
+    const leftShadows = Array.from({ length: halfCount }, (_, index) => {
+        return `${(index + 1) * 6}px 0 currentColor`;
+    });
+    const allShadows = [...rightShadows, ...leftShadows];
+    return allShadows.join(', ');
+}
+
+const buttonSizeClassMap = {
+    md: 'tw-px-squid-xs tw-py-squid-xxs tw-rounded-squid-m tw-border tw-flex tw-items-center tw-gap-squid-xxs tw-min-w-[60px] tw-h-squid-xl tw-justify-center',
+    lg: 'tw-border tw-rounded-squid-xxl tw-p-1 tw-h-button tw-w-full',
 };
-const SelectTokenLabel = () => {
-    return (jsxs("div", { className: "tw-mx-auto tw-flex tw-items-center tw-justify-center tw-gap-1.5", children: [jsx(BodyText, { size: "small", children: "Select token" }), jsx(ChevronArrowIcon, {})] }));
+const buttonVariantClassMap = {
+    primary: 'tw-bg-royal-500 tw-text-grey-100 tw-border-material-light-thin',
+    secondary: 'tw-bg-grey-100 tw-text-grey-800 tw-border-material-light-thin',
+    tertiary: 'tw-bg-grey-800 tw-text-grey-300 tw-border-material-light-thin',
 };
+// right now all variants have the same disabled styles
+// in the future, we can add more disabled styles for different variants
+const buttonDisabledClass = 'disabled:tw-bg-grey-800 disabled:tw-text-grey-600';
+function Button(_a) {
+    var { label, disabled, size, variant, icon } = _a, props = __rest(_a, ["label", "disabled", "size", "variant", "icon"]);
+    return (jsx("button", Object.assign({}, props, { disabled: disabled, className: clsx(buttonSizeClassMap[size], buttonVariantClassMap[variant], 
+        // disabled styles
+        buttonDisabledClass, 
+        // custom classes from props
+        props.className), children: size === 'lg' ? (jsx("span", { className: "tw-px-squid-m", children: jsx(BodyText, { size: "medium", children: label }) })) : size === 'md' ? (label && !icon ? (
+        // label only
+        jsx(BodyText, { size: "small", children: label })) : !label && icon ? (
+        // icon only
+        icon) : (
+        // icon and label
+        jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })));
+}
+
+function Chip(_a) {
+    var { label, icon } = _a, props = __rest(_a, ["label", "icon"]);
+    return (jsx("div", Object.assign({}, props, { className: cn('tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900', icon && 'tw-w-squid-m', props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
+}
 
 function EthereumIcon() {
     return (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M9.99866 2.91669L9.99866 12.6994L14.471 10.1298L9.99866 2.91669Z", fill: "currentColor" }), jsx("path", { d: "M9.99872 2.91669L5.52637 10.1298L9.99872 12.6995V8.15387V2.91669Z", fill: "currentColor" }), jsx("path", { d: "M9.99866 13.5226V17.0802L14.4737 10.9542L9.99866 13.5226Z", fill: "currentColor" }), jsx("path", { d: "M9.99872 17.0801V13.5225L5.52637 10.9542L9.99872 17.0801Z", fill: "currentColor" }), jsx("path", { d: "M9.99866 12.6994L14.4709 10.1298L9.99866 8.15387V12.6994Z", fill: "currentColor" }), jsx("path", { d: "M5.52637 10.1298L9.99865 12.6994V8.15387L5.52637 10.1298Z", fill: "currentColor" })] }));
 }
 
 function FeeButton() {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-px-squid-xs", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: 560 })] })] }));
+    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xs tw-rounded-squid-m tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(Chip, { label: "Fee" }), jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsx(Chip, { icon: jsx(EthereumIcon, {}) }), jsx(UsdAmount, { usdAmount: 560 })] })] }));
+}
+
+// font size, line height, and letter spacing classes
+const textClassMap = {
+    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
+    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
+    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
+};
+function HeadingText({ children, bold, size }) {
+    const fontWeightClass = bold
+        ? 'tw-font-heading-bold'
+        : 'tw-font-heading-regular';
+    return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
+}
+
+function SettingsButton({ label }) {
+    return (jsx("button", { className: "tw-flex tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs", children: jsx(CaptionText, { children: label }) }));
 }
 
 function SearchIcon() {
@@ -3013,6 +2885,10 @@ const PasteButton = () => {
     return (jsx("button", { className: "tw-h-[30px] tw-rounded-full tw-border tw-border-grey-700 tw-bg-grey-800 tw-px-2 tw-text-grey-300", children: jsx(CaptionText, { children: "Paste" }) }));
 };
 
+function SettingsSlider({ value, type }) {
+    return (jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-xs tw-border-royal-500 tw-p-squid-xs", children: [jsx("span", { className: "tw-flex tw-items-center tw-justify-center", children: type === 'percentage' ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) }), jsx(CaptionText, { className: "tw-text-grey-300", children: "%" })] })) : (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-text-grey-300", children: "$" }), jsx(CaptionText, { className: "tw-text-grey-600", children: String(value) })] })) }), jsx(Chip, { icon: jsx(ChevronGrabberVerticalIcon, { className: "tw-text-grey-900" }) })] }));
+}
+
 const switchSizeClassMap = {
     small: 'tw-w-[36px] tw-h-squid-m tw-p-0.5',
     large: 'tw-w-[54px] tw-h-squid-l tw-p-[3px]',
@@ -3021,14 +2897,14 @@ const switchCircleSizeClassMap = {
     small: 'tw-w-4 tw-h-4',
     large: 'tw-w-6 tw-h-6',
 };
-function Switch({ checked, onChange, size }) {
+function Switch({ checked = false, onChange, size }) {
     return (
     // Switch container
     jsxs("label", { className: clsx('tw-relative tw-inline-flex tw-items-center tw-justify-end tw-overflow-hidden tw-rounded-squid-m tw-border tw-border-material-light-thin', 
         // size styles
         switchSizeClassMap[size], 
         // checked styles
-        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsx("input", { checked: checked, onChange: (e) => onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
+        checked ? 'tw-bg-status-positive' : 'tw-bg-grey-800'), children: [jsx("input", { checked: checked, onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" }), jsx("span", { style: {
                     filter: 'drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))',
                 }, className: clsx('tw-absolute tw-rounded-full tw-border tw-border-material-light-thin', 
                 // size styles
@@ -3039,12 +2915,13 @@ function Switch({ checked, onChange, size }) {
                     : 'tw-left-0.5 tw-bg-grey-500') })] }));
 }
 
+const borderRadiusClassMap = {
+    sm: 'tw-rounded-squid-s',
+    lg: 'tw-rounded-squid-m',
+};
 function Menu(_a) {
-    var { children, menuClassName, contentClassName } = _a, props = __rest(_a, ["children", "menuClassName", "contentClassName"]);
-    return (jsx("div", Object.assign({}, props, { className: menuClassName, children: jsx("div", { style: {
-                boxShadow: '0px 2px 5px 1px rgba(0, 0, 0, 0.20), 0px 5px 20px -1px rgba(0, 0, 0, 0.33)',
-                backdropFilter: 'blur(calc(20px / 2))',
-            }, className: cn('tw-w-full tw-max-w-[320px] tw-items-center tw-justify-center tw-rounded-squid-m tw-border tw-border-material-light-thin tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick', contentClassName), children: typeof children === 'string' ? (jsx(CaptionText, { children: children })) : (children) }) })));
+    var { children, containerClassName, contentClassName, title, displayControls, rounded = 'lg' } = _a, props = __rest(_a, ["children", "containerClassName", "contentClassName", "title", "displayControls", "rounded"]);
+    return (jsx("div", Object.assign({}, props, { className: cn('tw-max-w-[320px]', containerClassName), children: jsxs("div", { className: cn('tw-backdrop-blur/10 tw-relative tw-inline-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-rounded-squid-m tw-bg-material-dark-thick tw-p-squid-s tw-text-center tw-text-material-light-thick group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2', borderRadiusClassMap[rounded], contentClassName), children: [title ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-py-squid-xxs tw-text-grey-100", children: jsx(BodyText, { size: "small", className: "tw-self-stretch !tw-leading-[10px]", children: title }) })) : null, typeof children === 'string' ? (jsx(CaptionText, { className: "tw-z-20 tw-self-stretch", children: children })) : (jsx("div", { className: "tw-z-20", children: children })), displayControls ? (jsx("div", { className: "tw-z-20 tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: jsx(Button, { size: "md", variant: "tertiary", label: "Learn more", className: "tw-self-stretch" }) })) : null, jsx("div", { className: cn('tw-backdrop-blur/10 tw-absolute tw-z-10 tw-h-full tw-w-full tw-border tw-border-material-light-thin tw-bg-material-light-thin', borderRadiusClassMap[rounded]) })] }) })));
 }
 
 const tooltipWidthClassMap = {
@@ -3060,12 +2937,12 @@ const tooltipThresholdClassMap = {
     xl: 'tw-pb-squid-xl',
     xxl: 'tw-pb-squid-xxl',
 };
-function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', className, }) {
-    return (jsxs("div", { className: cn('tw-relative', className), children: [jsx("div", { className: "tw-peer", children: children }), jsx(Menu, { menuClassName: cn('tw-absolute peer-hover:tw-block hover:tw-block tw-hidden tw-z-40', 'tw-left-1/2 -tw-translate-x-1/2 tw-bottom-full', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold]), children: tooltipContent })] }));
+function Tooltip({ children, tooltipContent, tooltipWidth = 'container', threshold = 'xxs', containerClassName, childrenClassName, tooltipClassName, }) {
+    return (jsxs("div", { className: cn('tw-relative', containerClassName), children: [jsx("div", { className: cn('tw-peer', childrenClassName), children: children }), jsx(Menu, { containerClassName: cn('tw-absolute tw-z-40 tw-hidden hover:tw-block peer-hover:tw-block', 'tw-bottom-full tw-left-1/2 -tw-translate-x-1/2', tooltipWidthClassMap[tooltipWidth], tooltipThresholdClassMap[threshold], tooltipClassName), children: tooltipContent })] }));
 }
 
-function Boost() {
-    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs", children: [jsx(BoostButton, {}), jsx(Chip, { label: "20s", className: "tw-bg-status-positive tw-text-grey-900" })] }));
+function Boost({ boostMode, onToggleBoostMode }) {
+    return (jsxs("div", { className: "tw-flex tw-h-squid-xl tw-items-center tw-gap-x-squid-xxs tw-bg-grey-900 tw-pr-squid-xxs", children: [jsx(BoostButton, { boostMode: boostMode, onToggleBoostMode: onToggleBoostMode }), jsx(Chip, { label: boostMode === 'normal' ? '10m' : '20s', className: cn('tw-text-grey-900 tw-transition-colors', boostMode === 'normal' ? 'tw-bg-grey-300' : 'tw-bg-status-positive') })] }));
 }
 
 var DetailsToolbarState;
@@ -3088,7 +2965,7 @@ const detailStateClassMap = {
 };
 function DetailsToolbar({ state = DetailsToolbarState.FULL, errorMessage, }) {
     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 === DetailsToolbarState.ERROR ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === DetailsToolbarState.LOADING ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", className: "tw-border-transparent tw-bg-transparent", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, {}) })] })) }));
+    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 === DetailsToolbarState.ERROR ? (jsx(ErrorMessage, { message: errorMessage })) : (jsxs(Fragment, { children: [jsx("div", { className: detailClassName, children: jsx(FeeButton, {}) }), jsx("div", { className: "tw-flex tw-h-squid-xl tw-w-squid-xxl tw-items-center tw-justify-center", children: state === DetailsToolbarState.LOADING ? (jsx(Loader, { size: "32" })) : (jsx(Button, { variant: "tertiary", size: "md", className: "tw-border-transparent tw-bg-transparent hover:tw-bg-material-light-thin", icon: jsx(ChevronLargeDownIcon, {}) })) }), jsx("div", { className: detailClassName, children: jsx(Boost, { boostMode: "boost" }) })] })) }));
 }
 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 })] }));
@@ -3097,30 +2974,19 @@ const ErrorMessage = ({ message }) => {
 function Modal({ children }) {
     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", style: {
-            backdropFilter: 'blur(20px)',
-        }, children: jsx("div", { className: "tw-relative tw-flex tw-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-gap-squid-xxs tw-self-end tw-overflow-hidden", children: children }) }));
+    jsx("div", { className: "tw-backdrop-blur/20 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", 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 }) }));
 }
 
-// font size, line height, and letter spacing classes
-const textClassMap = {
-    small: 'tw-text-heading-small tw-tracking-heading-small tw-leading-heading-small',
-    medium: 'tw-text-heading-medium tw-tracking-heading-medium tw-leading-heading-medium',
-    large: 'tw-text-heading-large tw-tracking-heading-large tw-leading-heading-large',
-};
-function HeadingText({ children, bold, size }) {
-    const fontWeightClass = bold
-        ? 'tw-font-heading-bold'
-        : 'tw-font-heading-regular';
-    return (jsx("h6", { className: clsx(textClassMap[size], fontWeightClass), children: children }));
-}
-
-function NavigationBar({ title, displayBackButton = false, logoUrl, }) {
-    return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-bg-grey-900 tw-text-grey-300'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}) })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { label: "Connect" }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
+function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, }) {
+    return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
+                            ? 'group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2'
+                            : undefined, variant: "tertiary", size: "md", icon: jsx(ArrowLeftIcon, {}) })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: jsx(AddressButton, { className: displayButtonShadows
+                                ? 'group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2 group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2'
+                                : undefined, label: "Connect" }) })] }), title ? (jsx("div", { className: "tw-flex tw-h-squid-xxl tw-items-center tw-px-squid-l tw-py-squid-xxs", children: jsx(HeadingText, { size: "small", children: title }) })) : null] }));
 }
 
 function ProductCard({ children }) {
-    return (jsx("div", { className: "tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs tw-backdrop-blur-[calc(1.25rem/2)]", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
+    return (jsx("div", { className: "tw-backdrop-blur/10 tw-h-card tw-min-h-card tw-w-card tw-rounded-squid-xl tw-border-[1px] tw-border-solid tw-border-material-light-thick tw-bg-material-light-thick tw-p-squid-xs", children: jsx("div", { className: "tw-relative tw-flex tw-h-full tw-max-h-[660px] tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-squid-l tw-bg-grey-900 tw-text-grey-300", children: children }) }));
 }
 
 function MaxIcon() {
@@ -3139,19 +3005,91 @@ function SwapConfiguration({ priceImpactPercentage, amount = 0, swapAmountUsd =
     const priceImpactClass = (priceImpactPercentage !== null && priceImpactPercentage !== void 0 ? priceImpactPercentage : 0) > 5
         ? 'tw-text-status-negative'
         : 'tw-text-grey-300';
-    return (jsxs("section", { className: "tw-h-[205px] tw-max-h-[205px] tw-bg-grey-900 tw-px-squid-l tw-pb-squid-m", children: [jsxs("header", { className: "tw-flex tw-items-center tw-gap-1 tw-py-squid-s tw-leading-5 tw-text-grey-300", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: "so-so.eth" })] }), jsx(Dropdown, { 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 }), jsx("input", { className: "tw-h-[75px] tw-w-full tw-bg-transparent tw-py-squid-m tw-text-heading-small tw-font-heading-regular tw-text-royal-400 placeholder:tw-text-grey-600 focus:tw-outline-none", placeholder: "0", value: 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-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-items-center tw-gap-1.5", 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("div", { className: "-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === 'from' ? 'Pay' : 'Receive' }), jsx(BodyText, { className: "tw-text-grey-600", size: "small", children: ":" }), jsx(WalletAddress, { ens: "so-so.eth" })] }) }), jsx("div", { className: "tw-px-squid-l", children: jsx(AssetsButton, { chainImageUrl: chain === null || chain === void 0 ? void 0 : chain.iconUrl, tokenImageUrl: token === null || token === void 0 ? void 0 : token.iconUrl, tokenSymbol: token === null || token === void 0 ? void 0 : token.symbol, chainBgColor: chain === null || chain === void 0 ? void 0 : chain.bgColor, tokenBgColor: token === null || token === void 0 ? void 0 : token.bgColor, tokenTextColor: token === null || token === void 0 ? void 0 : token.textColor }) }), jsx("div", { className: "tw-px-squid-m", children: jsx("input", { className: "tw-my-squid-xs 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-royal-400 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-outline-none", placeholder: "0", value: 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: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(SwapInputsIcon, {}), jsx(UsdAmount, { usdAmount: swapAmountUsd }), priceImpactPercentage ? (jsxs("span", { className: clsx('tw-flex tw-items-center', priceImpactClass), children: [jsx(ArrowTriangle, {}), jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat('%') })] })) : null] }), jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs hover:tw-bg-material-light-thin", children: [jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsx(CaptionText, { children: balance }), jsx(MaxIcon, {})] })] }))] }));
 }
 
-function DropdownMenuItem({ label, imageUrl, icon, }) {
-    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { children: label })] }) }));
+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 DotGrid1x3HorizontalIcon() {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.33325 8.00008C1.33325 7.2637 1.93021 6.66675 2.66659 6.66675C3.40297 6.66675 3.99992 7.2637 3.99992 8.00008C3.99992 8.73646 3.40297 9.33341 2.66659 9.33341C1.93021 9.33341 1.33325 8.73646 1.33325 8.00008ZM6.66659 8.00008C6.66659 7.2637 7.26354 6.66675 7.99992 6.66675C8.7363 6.66675 9.33325 7.2637 9.33325 8.00008C9.33325 8.73646 8.7363 9.33341 7.99992 9.33341C7.26354 9.33341 6.66659 8.73646 6.66659 8.00008ZM11.9999 8.00008C11.9999 7.2637 12.5969 6.66675 13.3333 6.66675C14.0696 6.66675 14.6666 7.2637 14.6666 8.00008C14.6666 8.73646 14.0696 9.33341 13.3333 9.33341C12.5969 9.33341 11.9999 8.73646 11.9999 8.00008Z", fill: "currentColor" }) }));
+function SwapStepSeparator() {
+    return (jsx("span", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-items-center tw-justify-center tw-self-stretch tw-py-0.5", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "21", viewBox: "0 0 4 21", fill: "none", children: jsx("path", { d: "M2 2.5V18.5", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }) }) }));
+}
+
+function DropdownMenuItem({ label, imageUrl, icon, labelClassName, }) {
+    return (jsx("li", { className: "tw-max-h-squid-xl tw-w-full tw-px-squid-xxs", children: jsxs("div", { className: "tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-xs tw-pl-squid-xxs hover:tw-bg-material-light-thin", children: [jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-between tw-rounded-squid-xs", children: imageUrl ? (jsx("img", { src: imageUrl, className: "tw-h-full tw-w-full tw-rounded-squid-xxs" })) : (icon) }), jsx(CaptionText, { className: labelClassName, children: label })] }) }));
+}
+
+function useModal(props) {
+    const [isModalOpen, setIsModalOpen] = useState(Boolean(props === null || props === void 0 ? void 0 : props.initialIsModalOpen));
+    const modalRef = useRef(null);
+    const openModalButtonRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            var _a;
+            // close modal if the user clicked outside of it
+            if (modalRef.current &&
+                !modalRef.current.contains(event.target) &&
+                !((_a = openModalButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                setIsModalOpen(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [modalRef]);
+    const openModal = useCallback(() => {
+        setIsModalOpen((prev) => !prev);
+    }, []);
+    const closeModal = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+    return {
+        isModalOpen,
+        openModal,
+        closeModal,
+        modalRef,
+        openModalButtonRef,
+    };
+}
+
+function CompassRound({ size = '20', className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("path", { d: "M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" }), jsx("path", { d: "M12.2135 7.27515L8.79307 8.208C8.5084 8.28564 8.286 8.50803 8.20837 8.7927L7.27552 12.2132C7.19069 12.5242 7.47609 12.8096 7.78713 12.7248L11.2076 11.7919C11.4923 11.7143 11.7146 11.4919 11.7923 11.2072L12.7251 7.78677C12.81 7.47573 12.5246 7.19032 12.2135 7.27515Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linejoin": "round" })] }));
+}
+function CircleX({ size = '20', className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsx("path", { d: "M12.5003 7.49996L7.50033 12.5M12.5003 12.5L7.50033 7.49996M17.7087 9.99996C17.7087 14.2572 14.2575 17.7083 10.0003 17.7083C5.74313 17.7083 2.29199 14.2572 2.29199 9.99996C2.29199 5.74276 5.74313 2.29163 10.0003 2.29163C14.2575 2.29163 17.7087 5.74276 17.7087 9.99996Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" }) }));
+}
+
+function DotGrid1x3HorizontalIcon({ className, size = '16', }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.33325 8.00008C1.33325 7.2637 1.93021 6.66675 2.66659 6.66675C3.40297 6.66675 3.99992 7.2637 3.99992 8.00008C3.99992 8.73646 3.40297 9.33341 2.66659 9.33341C1.93021 9.33341 1.33325 8.73646 1.33325 8.00008ZM6.66659 8.00008C6.66659 7.2637 7.26354 6.66675 7.99992 6.66675C8.7363 6.66675 9.33325 7.2637 9.33325 8.00008C9.33325 8.73646 8.7363 9.33341 7.99992 9.33341C7.26354 9.33341 6.66659 8.73646 6.66659 8.00008ZM11.9999 8.00008C11.9999 7.2637 12.5969 6.66675 13.3333 6.66675C14.0696 6.66675 14.6666 7.2637 14.6666 8.00008C14.6666 8.73646 14.0696 9.33341 13.3333 9.33341C12.5969 9.33341 11.9999 8.73646 11.9999 8.00008Z", fill: "currentColor" }) }));
+}
+
+function RefreshIcon() {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [jsx("path", { d: "M10.8333 17.4999C11.2936 17.4999 11.6667 17.1269 11.6667 16.6666C11.6667 16.2064 11.2936 15.8333 10.8333 15.8333C10.3731 15.8333 10 16.2064 10 16.6666C10 17.1269 10.3731 17.4999 10.8333 17.4999Z", fill: "currentColor" }), jsx("path", { d: "M17.5 9.16661C17.5 8.70638 17.1269 8.33328 16.6667 8.33328C16.2064 8.33328 15.8333 8.70638 15.8333 9.16661C15.8333 9.62685 16.2064 9.99995 16.6667 9.99995C17.1269 9.99995 17.5 9.62685 17.5 9.16661Z", fill: "currentColor" }), jsx("path", { d: "M16.6079 11.8899C17.0065 12.12 17.143 12.6297 16.9129 13.0283C16.6828 13.4268 16.1731 13.5634 15.7746 13.3333C15.376 13.1032 15.2394 12.5935 15.4695 12.1949C15.6997 11.7964 16.2093 11.6598 16.6079 11.8899Z", fill: "currentColor" }), jsx("path", { d: "M14.473 16.0785C14.8716 15.8483 15.0081 15.3387 14.778 14.9401C14.5479 14.5415 14.0382 14.405 13.6397 14.6351C13.2411 14.8652 13.1045 15.3749 13.3347 15.7734C13.5648 16.172 14.0744 16.3086 14.473 16.0785Z", fill: "currentColor" }), jsx("path", { d: "M15.7725 6.66661C15.3739 6.89673 14.8642 6.76017 14.6341 6.36159C14.404 5.96301 14.5405 5.45335 14.9391 5.22323C15.3377 4.99312 15.8474 5.12968 16.0775 5.52826C16.3076 5.92683 16.171 6.43649 15.7725 6.66661Z", fill: "currentColor" }), jsx("path", { d: "M7.70833 12.2917V16.875H3.125M7.5 16.4063C4.93915 15.4062 3.125 12.915 3.125 10C3.125 6.20304 6.20304 3.125 10 3.125C10.9614 3.125 11.8768 3.32235 12.7077 3.67876", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+
+function DropdownMenu({ dropdownRef, items, className, }) {
+    return (jsx("div", { ref: dropdownRef, children: jsx(Menu, { rounded: "sm", containerClassName: cn('tw-absolute tw-right-0 tw-z-20', className), contentClassName: "!tw-p-0", children: jsx("ul", { className: "custom-scrollbar 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)))) }) }) }));
 }
 
 function HistoryItem({ firstImageUrl, secondImageUrl, isPending, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, pendingLabel = 'Pending', }) {
-    return (jsxs("li", { className: "tw-flex tw-h-list-item-large tw-w-list-item-small tw-items-center tw-gap-squid-xs tw-bg-grey-900 tw-px-squid-m tw-py-squid-xxs tw-text-grey-300", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-z-20 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-z-10 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-w-[230px] tw-flex-col", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted }))] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] })] }));
+    const { isModalOpen, modalRef, openModalButtonRef, openModal } = useModal();
+    return (jsx("li", { className: "tw-h-list-item-large tw-min-w-list-item-small tw-self-stretch tw-bg-grey-900 tw-px-squid-xs tw-text-grey-300", children: jsxs("div", { className: "tw-group/history-item tw-relative tw-flex tw-flex-shrink-0 tw-items-center tw-gap-squid-xs tw-self-stretch tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxs("div", { className: "tw-relative tw-h-10 tw-w-[60px]", children: [isPending ? (jsx("span", { className: "tw-absolute -tw-left-[5px] tw-bottom-0 tw-z-30 tw-flex tw-h-squid-m tw-w-squid-m tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-grey-900 tw-bg-royal-400 tw-p-0.5", children: jsx(DotGrid1x3HorizontalIcon, {}) })) : null, jsx("img", { src: firstImageUrl, className: "tw-absolute tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" }), jsx("img", { src: secondImageUrl, className: "tw-absolute tw-left-5 tw-h-10 tw-w-10 tw-rounded-full tw-border tw-border-grey-900" })] }), jsxs("div", { className: "tw-flex tw-h-10 tw-flex-1 tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-justify-between tw-text-grey-500", children: [jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(CaptionText, { children: fromLabel }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronRightSmallIcon, {}) }), jsx(CaptionText, { children: toLabel })] }), jsx("div", { className: "tw-transition-opacity group-hover/history-item:tw-opacity-0", children: isPending ? (jsx(CaptionText, { className: "tw-text-royal-400", children: pendingLabel })) : (jsx(CaptionText, { children: dateCompleted })) }), jsx("button", { className: "tw-absolute tw-right-squid-xxs tw-top-squid-xxs tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-squid-xs tw-bg-material-light-thin tw-p-2 tw-text-grey-300 tw-opacity-0 tw-transition-opacity group-hover/history-item:tw-opacity-100", onClick: openModal, ref: openModalButtonRef, children: jsx(DotGrid1x3HorizontalIcon, { size: "24" }) })] }), jsxs("div", { className: "tw-flex tw-h-5 tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(BodyText, { size: "small", children: fromAmount }), jsx("span", { className: "tw-text-grey-600", children: jsx(ChevronLargeRightIcon, {}) }), jsx(BodyText, { size: "small", children: toAmount })] })] }), isModalOpen ? (jsx(DropdownMenu, { dropdownRef: modalRef, items: [
+                        {
+                            label: 'Repeat swap',
+                            icon: jsx(RefreshIcon, {}),
+                        },
+                        {
+                            label: 'View on xyz',
+                            icon: jsx(CompassRound, {}),
+                        },
+                        {
+                            label: 'Clear',
+                            labelClassName: 'tw-text-status-negative',
+                            icon: jsx(CircleX, { className: "tw-text-status-negative" }),
+                        },
+                    ] })) : null] }) }));
 }
 
 const listItemSizeMap = {
@@ -3172,11 +3110,129 @@ function SectionTitle({ title, icon, accessory, actionIcon, className, }) {
     return (jsxs("header", { className: cn('tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-400', className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] }));
 }
 
-const squidConfigContext = createContext(undefined);
-function SquidConfigProvider({ theme, children, }) {
-    const Provider = squidConfigContext.Provider;
+function HelpIcon({ size = '20', className, }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: [jsx("g", { "clip-path": "url(#clip0_457_36778)", children: jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6 7C6 4.46214 8.03736 3 10 3C12.1193 3 14 4.66531 14 7C14 7.93746 13.7596 8.6603 13.368 9.2586C13.0353 9.76679 12.6034 10.1601 12.2697 10.4639L12.1757 10.5497C11.8041 10.8904 11.534 11.1593 11.337 11.504C11.1513 11.8288 11 12.2794 11 13C11 13.5523 10.5523 14 10 14C9.44772 14 9 13.5523 9 13C9 11.9706 9.22366 11.1712 9.60051 10.5117C9.96604 9.87199 10.4459 9.42214 10.8243 9.07535L10.8834 9.02116L10.8834 9.02116L10.8834 9.02115C11.2572 8.67885 11.5066 8.45039 11.6945 8.16328C11.8654 7.9022 12 7.56254 12 7C12 5.83469 11.0807 5 10 5C8.96264 5 8 5.73786 8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7ZM10 15C9.44771 15 9 15.4477 9 16C9 16.5523 9.44771 17 10 17C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15Z", fill: "currentColor" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_457_36778", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
+}
+
+function SettingsItem({ icon, label, controls, transparentControls = false, showHelpIcon = true, }) {
+    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 SwapStepItem({ descriptionBlocks, chipContent, showStepSeparator = false, }) {
+    return (jsxs("li", { className: "tw-flex tw-w-list-item-large tw-flex-col tw-items-start tw-bg-grey-800 tw-text-grey-300", children: [showStepSeparator && jsx(SwapStepSeparator, {}), jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-text-royal-400", children: [jsx("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: jsx(Chip, { className: "tw-w-squid-xl tw-bg-royal-400 tw-text-grey-900", icon: typeof chipContent === 'string' ? (jsx(CaptionText, { children: chipContent })) : (chipContent) }) }), jsx("div", { className: "tw-flex tw-min-h-squid-l tw-flex-1 tw-flex-wrap tw-items-center tw-justify-start tw-gap-squid-xxs tw-py-squid-xxs", children: descriptionBlocks.map(({ type, value }, index) => {
+                            if (type === 'string') {
+                                return (
+                                // Instead of displaying the string into a single <BodyText />
+                                // we split it into multiple <BodyText />
+                                // for edge case where the string is too long to fit in one line
+                                value
+                                    .trim()
+                                    .split(' ')
+                                    .map((word, i) => (jsx(BodyText, { size: "small", className: "tw-leading-[20px]", children: word }, i))));
+                            }
+                            else if (type === 'image') {
+                                return (jsx("img", { src: value, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }, index));
+                            }
+                            return null;
+                        }) })] })] }));
+}
+
+function SwapStepsCollapsed({ steps, currentStepCount: _currentStepCount, }) {
+    // handles if route component is mounted
+    const [isRouteVisible, setIsRouteVisible] = useState(false);
+    const currentStepCount = Math.round(_currentStepCount);
+    // 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;
+    useEffect(() => {
+        // we do not want to unmount the route component if the animation to show route is running
+        if (isShowRouteAnimationRunning)
+            return;
+        // unmount route component when the animation of hiding is done
+        const timeoutId = setTimeout(() => {
+            setIsRouteVisible(false);
+        }, 350);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [isShowRouteAnimationRunning]);
+    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: "custom-scrollbar 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 }) {
+    return (jsxs("div", { className: "tw-relative tw-h-[42px] tw-w-[94px]", children: [jsxs("svg", { width: "94", height: "42", viewBox: "0 0 94 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "tw-absolute tw-z-10 tw-text-material-light-average", children: [jsx("g", { filter: "url(#filter0_b_457_51391)", children: jsx("path", { d: "M58.5042 35.4956L58.5043 35.4957C62.5071 39.4985 67.7544 41.5 73.0001 41.5C84.3219 41.5 93.5 32.3218 93.5 21C93.5 9.67822 84.3219 0.5 73.0001 0.5C67.7544 0.499977 62.5071 2.50151 58.5043 6.50431C57.9743 7.03437 57.4538 7.57007 56.9412 8.09756L56.9403 8.09852C55.2889 9.79812 53.7279 11.4027 52.097 12.5879C50.4734 13.7678 48.8225 14.5 47 14.5C45.1775 14.5 43.5266 13.7678 41.903 12.5879C40.2721 11.4027 38.7111 9.79812 37.0597 8.09852L37.0589 8.09766C36.5463 7.57013 36.0258 7.03441 35.4957 6.50431C31.4929 2.50151 26.2456 0.499977 20.9999 0.5C15.7543 0.500023 10.5071 2.50156 6.50431 6.50431C2.50153 10.5071 0.5 15.7544 0.5 21C0.5 26.2456 2.50153 31.4929 6.50431 35.4957C10.5071 39.4984 15.7543 41.5 20.9999 41.5C26.2456 41.5 31.4929 39.4985 35.4957 35.4957L35.4958 35.4956C36.023 34.968 36.5408 34.4349 37.0508 33.9099L37.0521 33.9086C38.7042 32.2077 40.2665 30.6013 41.8988 29.4147C43.5238 28.2333 45.1763 27.5 47 27.5C48.8237 27.5 50.4762 28.2333 52.1012 29.4147C53.7335 30.6013 55.2958 32.2077 56.9479 33.9086L56.9492 33.9099C57.4592 34.4349 57.977 34.968 58.5042 35.4956Z", stroke: "currentColor" }) }), jsx("defs", { children: jsxs("filter", { id: "filter0_b_457_51391", x: "-20", y: "-20", width: "134", height: "82", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [jsx("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }), jsx("feGaussianBlur", { in: "BackgroundImageFix", stdDeviation: "10" }), jsx("feComposite", { in2: "SourceAlpha", operator: "in", result: "effect1_backgroundBlur_457_51391" }), jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_backgroundBlur_457_51391", result: "shape" })] }) })] }), jsxs("div", { className: "tw-token-pair-mask tw-z-10 tw-flex tw-h-full tw-w-full tw-items-center tw-justify-between", style: {
+                    background: `linear-gradient(to right, ${firstToken.bgColor} 43.48%, ${secondToken.bgColor} 56.52%)`,
+                }, children: [jsx("img", { className: "tw-ml-[1px] tw-aspect-square tw-w-10", src: firstToken.imageUrl }), jsx("img", { className: "tw-mr-[1px] tw-aspect-square tw-w-10", src: secondToken.imageUrl })] })] }));
+}
+
+/**
+ * Parsing the user readable config to css variables with HSL values
+ * @param style
+ */
+const getParsedStyle = (style) => {
+    if (style) {
+        const styleKeys = Object.keys(themeTypesKeys);
+        const parsed = styleKeys.map((sk) => {
+            const themeItem = themeTypesKeys[sk];
+            let userValue = style[sk];
+            return {
+                [themeItem.cssVariable]: userValue,
+            };
+        });
+        // adds a variant with 0.05 opacity for each color
+        // will result in variables like this:
+        // var(--squid-theme-grey-100-005) --> grey-100 with 0.05 opacity
+        // styleKeys.forEach((sk) => {
+        //   const themeItem = themeTypesKeys[sk]
+        //   const valueWith005Opacity = getHexColorFromOpacityPercentage(
+        //     style[sk], // i.e "#ffffff"
+        //     0.05,
+        //   )
+        //   // { "--squid-theme-grey-100-005": "#ffffff80" }
+        //   parsed.push({
+        //     [`${themeItem.cssVariable}-005`]: valueWith005Opacity,
+        //   })
+        // })
+        parsed.push({
+            [`${themeTypesKeys['grey-100'].cssVariable}-005`]: getHexColorFromOpacityPercentage(style['grey-100'], 0.05),
+        });
+        return parsed.reduce((a, v) => {
+            const key = Object.keys(v)[0];
+            return Object.assign(Object.assign({}, a), { [key]: v[key] });
+        });
+    }
+};
+/**
+ * Returns a hexadecimal color with opacity based on the given color and opacity percentage.
+ *
+ * @example getHexColorFromOpacityPercentage('#FF0000', 0.5) // '#FF000080'
+ *
+ * @param {string} color - The base color in hexadecimal format.
+ * @param {number} opacity - The opacity percentage (0-1).
+ * @returns {string} The hexadecimal color with opacity.
+ */
+function getHexColorFromOpacityPercentage(color, opacity) {
+    return (color +
+        Math.round(opacity * 255)
+            .toString(16)
+            .padStart(2, '0')).toUpperCase();
+}
+
+function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     const parsedStyle = getParsedStyle(theme);
-    return (jsx(Provider, { value: theme, children: jsx("div", { style: parsedStyle, className: clsx('tw-text-base-content tw-relative tw-font-geist'), children: children }) }));
+    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, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, Dropdown, DropdownMenuItem, FeeButton, HeadingText, HistoryItem, Input, ListItem, Menu, MenuItem, Modal, NavigationBar, ProductCard, SectionTitle, SquidConfigProvider, SwapConfiguration, Switch, Tooltip, UsdAmount, WalletAddress };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, 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 };