@0xsquid/ui 2.6.6 → 2.7.0

package/dist/esm/index.js

@@ -61,6 +61,11 @@ const MEDIA_QUERIES = {
         key: "mobile-sm-height",
         value: 670,
     },
+    DESKTOP_MD: {
+        media: "(min-width: 768px)",
+        key: "desktop-md",
+        value: 768,
+    },
 };
 
 const THEME_COLOR_KEYS = [
@@ -2967,6 +2972,7 @@ const spacing$1 = {
     "squid-m": "1.25rem", // 20px
     "squid-l": "1.875rem", // 30px
     "squid-xl": "2.5rem", // 40px
+    "squid-xl2": "3.125rem", // 50px
     "squid-xxl": "3.75rem", // 60px
 };
 const backdropBlur = {
@@ -3694,24 +3700,366 @@ function IconLabel({ src, children, rounded }) {
     return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsx(CaptionText, { children: children })) : (children)] }));
 }
 
+var isMergeableObject = function isMergeableObject(value) {
+	return isNonNullObject(value)
+		&& !isSpecial(value)
+};
+
+function isNonNullObject(value) {
+	return !!value && typeof value === 'object'
+}
+
+function isSpecial(value) {
+	var stringValue = Object.prototype.toString.call(value);
+
+	return stringValue === '[object RegExp]'
+		|| stringValue === '[object Date]'
+		|| isReactElement(value)
+}
+
+// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
+var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
+
+function isReactElement(value) {
+	return value.$$typeof === REACT_ELEMENT_TYPE
+}
+
+function emptyTarget(val) {
+	return Array.isArray(val) ? [] : {}
+}
+
+function cloneUnlessOtherwiseSpecified(value, options) {
+	return (options.clone !== false && options.isMergeableObject(value))
+		? deepmerge(emptyTarget(value), value, options)
+		: value
+}
+
+function defaultArrayMerge(target, source, options) {
+	return target.concat(source).map(function(element) {
+		return cloneUnlessOtherwiseSpecified(element, options)
+	})
+}
+
+function getMergeFunction(key, options) {
+	if (!options.customMerge) {
+		return deepmerge
+	}
+	var customMerge = options.customMerge(key);
+	return typeof customMerge === 'function' ? customMerge : deepmerge
+}
+
+function getEnumerableOwnPropertySymbols(target) {
+	return Object.getOwnPropertySymbols
+		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
+			return Object.propertyIsEnumerable.call(target, symbol)
+		})
+		: []
+}
+
+function getKeys(target) {
+	return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
+}
+
+function propertyIsOnObject(object, property) {
+	try {
+		return property in object
+	} catch(_) {
+		return false
+	}
+}
+
+// Protects from prototype poisoning and unexpected merging up the prototype chain.
+function propertyIsUnsafe(target, key) {
+	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
+		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
+			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
+}
+
+function mergeObject(target, source, options) {
+	var destination = {};
+	if (options.isMergeableObject(target)) {
+		getKeys(target).forEach(function(key) {
+			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
+		});
+	}
+	getKeys(source).forEach(function(key) {
+		if (propertyIsUnsafe(target, key)) {
+			return
+		}
+
+		if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
+			destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
+		} else {
+			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
+		}
+	});
+	return destination
+}
+
+function deepmerge(target, source, options) {
+	options = options || {};
+	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
+	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
+	// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
+	// implementations can use it. The caller may not replace it.
+	options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
+
+	var sourceIsArray = Array.isArray(source);
+	var targetIsArray = Array.isArray(target);
+	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
+
+	if (!sourceAndTargetTypesMatch) {
+		return cloneUnlessOtherwiseSpecified(source, options)
+	} else if (sourceIsArray) {
+		return options.arrayMerge(target, source, options)
+	} else {
+		return mergeObject(target, source, options)
+	}
+}
+
+deepmerge.all = function deepmergeAll(array, options) {
+	if (!Array.isArray(array)) {
+		throw new Error('first argument should be an array')
+	}
+
+	return array.reduce(function(prev, next) {
+		return deepmerge(prev, next, options)
+	}, {})
+};
+
+var deepmerge_1 = deepmerge;
+
+var cjs = deepmerge_1;
+
+var deepmerge$1 = /*@__PURE__*/getDefaultExportFromCjs(cjs);
+
+/* eslint-disable @typescript-eslint/prefer-reduce-type-parameter */
+/**
+ * Parses the user readable config to css variables
+ * and adds the material-* variants
+ * @param style
+ */
+const parseSquidTheme = (userTheme, themeType) => {
+    var _a, _b;
+    const fullPublicTheme = deepmerge$1(lightTheme, userTheme);
+    // Add material-{light,dark}-{thin,average,thick} colors to the squid theme object
+    // using the following formula:
+    // material-light-thin -> grey-100 + 10% opacity
+    // material-light-average -> grey-100 + 33% opacity
+    // material-light-thick -> grey-100 + 66% opacity
+    // material-dark-thin -> grey-900 + 10% opacity
+    // material-dark-average -> grey-900 + 33% opacity
+    // material-dark-thick -> grey-900 + 66% opacity
+    const materialVariants = {
+        "material-light-thin": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.1),
+        "material-light-average": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.33),
+        "material-light-thick": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.66),
+        "material-dark-thin": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-900"], 0.1),
+        "material-dark-average": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-900"], 0.33),
+        "material-dark-thick": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-900"], 0.66),
+    };
+    // Add some other extra colors that are not part of the public theme
+    const opacityVariants = {
+        // opacity variants
+        "grey-100-005": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.05),
+        // color representing the blend of material-light and grey-900
+        "material-light-blend-grey-900": (_a = blendColors(materialVariants["material-light-thin"], fullPublicTheme.color["grey-900"])) !== null && _a !== void 0 ? _a : "",
+        // color representing the blend of material-light and grey-300
+        "material-light-blend-grey-800": (_b = blendColors(materialVariants["material-light-thin"], fullPublicTheme.color["grey-800"])) !== null && _b !== void 0 ? _b : "",
+    };
+    const defaultButtonColors = {
+        "button-lg-primary-bg": fullPublicTheme.color["royal-500"],
+        "button-lg-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
+        "button-lg-secondary-bg": fullPublicTheme.color["grey-100"],
+        "button-lg-secondary-text": fullPublicTheme.color["grey-800"],
+        "button-lg-tertiary-bg": fullPublicTheme.color["grey-800"],
+        "button-lg-tertiary-text": fullPublicTheme.color["grey-300"],
+        "button-md-primary-bg": fullPublicTheme.color["royal-500"],
+        "button-md-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
+        "button-md-secondary-bg": fullPublicTheme.color["grey-100"],
+        "button-md-secondary-text": fullPublicTheme.color["grey-800"],
+        "button-md-tertiary-bg": fullPublicTheme.color["grey-800"],
+        "button-md-tertiary-text": fullPublicTheme.color["grey-300"],
+        "button-sm-primary-bg": fullPublicTheme.color["royal-500"],
+        "button-sm-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
+        "button-sm-secondary-bg": fullPublicTheme.color["grey-100"],
+        "button-sm-secondary-text": fullPublicTheme.color["grey-800"],
+        "button-sm-tertiary-bg": fullPublicTheme.color["grey-800"],
+        "button-sm-tertiary-text": fullPublicTheme.color["grey-300"],
+    };
+    const defaultInputColors = {
+        "input-placeholder": fullPublicTheme.color["grey-600"],
+        "input-text": fullPublicTheme.color["grey-300"],
+        "input-selection": fullPublicTheme.color["grey-300"],
+        "input-bg": fullPublicTheme.color["grey-900"],
+    };
+    const defaultAnimationColors = {
+        "animation-bg": fullPublicTheme.color["royal-500"],
+        "animation-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
+    };
+    const defaultModalColors = {
+        "modal-backdrop": materialVariants["material-dark-average"],
+    };
+    const defaultMenuColors = {
+        "menu-bg": materialVariants["material-dark-thick"],
+        "menu-text": materialVariants["material-light-thick"],
+        "menu-backdrop": materialVariants["material-light-thin"],
+    };
+    // Adds the internal colors and any missing config to the full theme
+    const fullTheme = deepmerge$1({
+        color: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, materialVariants), opacityVariants), defaultButtonColors), defaultInputColors), defaultAnimationColors), defaultModalColors), defaultMenuColors),
+    }, fullPublicTheme);
+    return flatten(fullTheme, {
+        prefix: THEME_CSS_VARIABLE_PREFIX,
+    });
+};
+const BASE_FONT_SIZE = 16;
+const remToPx = (rem, addSuffix = true) => {
+    if (typeof rem === "string") {
+        const pxValue = Number(rem.replace("rem", "")) * BASE_FONT_SIZE;
+        return pxValue + (addSuffix ? "px" : "");
+    }
+    return rem * BASE_FONT_SIZE + (addSuffix ? "px" : "");
+};
+const pxToRem = (px, addSuffix = true) => {
+    if (typeof px === "string") {
+        const remValue = Number(px.replace("px", "")) / BASE_FONT_SIZE;
+        return remValue + (addSuffix ? "rem" : "");
+    }
+    return px / BASE_FONT_SIZE + (addSuffix ? "rem" : "");
+};
+function getContrastColor({ r, g, b, }, threshold = 128) {
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    return brightness >= threshold ? "dark" : "light";
+}
+/**
+ * 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 hexToRgb(hex) {
+    var _a;
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+    const cleanHex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
+        return r + r + g + g + b + b + (a != null ? a + a : "");
+    });
+    const [, r, g, b, a] = ((_a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(cleanHex)) !== null && _a !== void 0 ? _a : []);
+    if (r == null || g == null || b == null)
+        return null;
+    return {
+        r: parseInt(r, 16),
+        g: parseInt(g, 16),
+        b: parseInt(b, 16),
+        a: a != null ? parseInt(a, 16) / 255 : 1,
+    };
+}
+function rgbToHex(r, g, b) {
+    return ("#" +
+        [r, g, b]
+            .map((x) => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        })
+            .join(""));
+}
+// Example usage:
+// let foregroundColor = '#FBFBFD1A'
+// let bgColor = '#17191C'
+// let resultingColor = blendColors(foregroundColor, bgColor)
+// console.log(resultingColor) // Output: ~#2f3033
+function blendColors(foreground, background) {
+    const fg = hexToRgb(foreground);
+    const bg = hexToRgb(background);
+    if (fg == null || bg == null)
+        return null;
+    const r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    const g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    const b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return rgbToHex(r, g, b);
+}
+function adjustColorForContrast(foreground, background, factor = 1) {
+    const fg = parseColor(foreground);
+    const bg = parseColor(background);
+    if (fg == null || bg == null)
+        return null;
+    const r = Math.round(fg.r * (1 - factor) + bg.r * factor);
+    const g = Math.round(fg.g * (1 - factor) + bg.g * factor);
+    const b = Math.round(fg.b * (1 - factor) + bg.b * factor);
+    return rgbToHex(r, g, b);
+}
+const isValidHexColor = (hex) => {
+    return /^#([0-9A-F]{3}|[0-9A-F]{6}|[0-9A-F]{4}|[0-9A-F]{8})$/i.test(hex);
+};
+function parseColor(color) {
+    var _a, _b, _c, _d;
+    if (color.startsWith("#")) {
+        return hexToRgb(color);
+    }
+    else if (color.startsWith("rgb")) {
+        const match = color.match(/\d+(\.\d+)?/g);
+        if (match) {
+            return {
+                r: parseInt((_a = match[0]) !== null && _a !== void 0 ? _a : "0"),
+                g: parseInt((_b = match[1]) !== null && _b !== void 0 ? _b : "0"),
+                b: parseInt((_c = match[2]) !== null && _c !== void 0 ? _c : "0"),
+                a: match[3] ? parseFloat((_d = match[3]) !== null && _d !== void 0 ? _d : "0") : 1,
+            };
+        }
+    }
+    return null;
+}
+const getColorBrightness = (color) => {
+    const rgb = parseColor(color);
+    if (!rgb)
+        return 0;
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+};
+const getWalletCardBackground = (colors) => {
+    if (colors.length >= 3) {
+        return `linear-gradient(73deg, ${colors[0]} 8.18%, ${colors[1]} 50.16%, ${colors[2]} 91.82%)`;
+    }
+    if (colors.length === 2) {
+        return `linear-gradient(73deg, ${colors[0]} 8.18%, ${colors[1]} 50.16%)`;
+    }
+    return colors[0];
+};
+
 const sizeClassMap = {
-    large: "tw-h-squid-xxl tw-w-squid-xxl tw-rounded-squid-s",
-    small: "tw-h-squid-xl tw-w-squid-xl tw-rounded-squid-xs",
+    large: "tw-h-squid-xxl tw-w-squid-xxl tw-rounded-squid-s tw-gap-0.5",
+    medium: "tw-h-squid-xl tw-w-squid-xl tw-rounded-squid-xs tw-gap-0.5",
+    small: "tw-h-squid-l tw-w-squid-l tw-rounded-squid-xxs tw-gap-[0.09375rem]",
 };
 const customImageStylesMap = {
     large: {
-        width: "24px",
-        height: "24px",
-        borderRadius: "7.5px",
+        width: pxToRem(24),
+        height: pxToRem(24),
+        borderRadius: pxToRem(7.5),
+    },
+    medium: {
+        width: pxToRem(16),
+        height: pxToRem(16),
+        borderRadius: pxToRem(5),
     },
     small: {
-        width: "16px",
-        height: "16px",
-        borderRadius: "5px",
+        width: pxToRem(12),
+        height: pxToRem(12),
+        borderRadius: pxToRem(5),
     },
 };
 function ImageGroup({ imageUrls, badge, size = "large", }) {
-    return (jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap[size]), children: [imageUrls.map((url) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size !== "small" && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
+    return (jsxs("div", { className: cn("tw-relative tw-flex tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", sizeClassMap[size]), children: [imageUrls.map((url) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: customImageStylesMap[size] }, url))), badge != null && size === "large" && (jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3730,8 +4078,11 @@ function ArrowRightUpIcon({ size = "10", className, strokeWidth = "2", }) {
 function ChevronArrowIcon({ size = "16", className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.66663 14L9.64022 8.64754C9.86394 8.24484 9.86394 7.75519 9.64022 7.35249L6.66663 2", stroke: "currentColor", strokeOpacity: "0.66", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ArrowTriangle({ className }) {
-    return (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M2.87921 5.55701C2.21562 4.22933 3.18052 2.6665 4.66531 2.6665H11.3348C12.8196 2.6665 13.7845 4.22933 13.1209 5.55701L9.78615 12.229C9.05029 13.7012 6.94983 13.7012 6.21397 12.229L2.87921 5.55701Z", fill: "currentColor" }) }));
+function ArrowTriangle({ className, size = "16", }) {
+    return (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "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" }) }));
+}
+function ArrowCornerDownLeftIcon({ 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", { d: "M13.3334 3.33333V8C13.3334 9.10457 12.438 10 11.3334 10H3.33341M5.33341 7.33333L2.66675 10L5.33341 12.6667", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function PauseIcon({ size = "16", className, }) {
     return (jsxs("svg", { width: size, height: size, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [jsx("path", { d: "M2.66666 4.5C2.66666 3.39543 3.56209 2.5 4.66666 2.5C5.77123 2.5 6.66666 3.39543 6.66666 4.5V12.5C6.66666 13.6046 5.77123 14.5 4.66666 14.5C3.56209 14.5 2.66666 13.6046 2.66666 12.5V4.5Z", fill: "currentColor" }), jsx("path", { d: "M9.33332 4.5C9.33332 3.39543 10.2288 2.5 11.3333 2.5C12.4379 2.5 13.3333 3.39543 13.3333 4.5V12.5C13.3333 13.6046 12.4379 14.5 11.3333 14.5C10.2288 14.5 9.33332 13.6046 9.33332 12.5V4.5Z", fill: "currentColor" })] }));
@@ -3899,28 +4250,6 @@ function PowerIcon({ size = "24", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M7.02331 4.5C4.59826 6.11238 3 8.86954 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 8.86954 19.4017 6.11238 16.9767 4.5M12 2V7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 
-function CrossAnimatedIcon({ size = 24, isOpen, transitionDuration, className, }) {
-    const rotateDegrees = isOpen ? 45 : 0;
-    return (jsxs("div", { style: {
-            width: size,
-            height: size * 0.585,
-        }, className: cn("tw-relative tw-rotate-0 tw-transition-transform", className), children: [jsx("span", { style: {
-                    height: size * 0.1,
-                    top: isOpen ? size * -0.05 : 0,
-                    transformOrigin: "left center",
-                    left: isOpen ? size * 0.13 : 0,
-                    transitionDuration,
-                    transform: isOpen ? `rotate(${rotateDegrees}deg)` : "rotate(0)",
-                }, className: "tw-absolute tw-block tw-w-full tw-rounded-sm tw-bg-current tw-opacity-100 tw-transition-transform" }), jsx("span", { style: {
-                    height: size * 0.1,
-                    top: isOpen ? size * 0.65 : size * 0.6,
-                    transformOrigin: "left center",
-                    left: isOpen ? size * 0.13 : 0,
-                    transitionDuration,
-                    transform: isOpen ? `rotate(-${rotateDegrees}deg)` : "rotate(0)",
-                }, className: "tw-absolute tw-block tw-w-full tw-rounded-sm tw-bg-current tw-opacity-100 tw-transition-transform" })] }));
-}
-
 function DashboardFast({ size = "24", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M15 10L12.25 15.5M19.5 16H4.5M21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
@@ -4068,6 +4397,27 @@ function PluginIcon({ size = "16", className, }) {
 function CircleCheckIcon({ className, size = "24", }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z", fill: "currentColor" }) }));
 }
+function EscKeyIcon({ className, width = "20", height = "8", }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 20 8", fill: "none", className: className, children: [jsx("path", { d: "M13.3862 4.37183V3.53803C13.3862 1.32394 14.6088 0 16.7271 0C17.7299 0 18.62 0.304225 19.1721 0.839437C19.544 1.2 19.7693 1.63944 19.7693 1.98873C19.7693 2.43944 19.4595 2.73803 19.0088 2.73803C18.7102 2.73803 18.4905 2.62535 18.1975 2.32676C17.775 1.80845 17.3806 1.57183 16.8398 1.57183C15.8257 1.57183 15.251 2.32113 15.251 3.62254V4.28732C15.251 5.67324 15.8144 6.42254 16.8398 6.42254C17.3862 6.42254 17.8257 6.18592 18.2257 5.67887C18.5243 5.36901 18.7271 5.26197 19.0144 5.26197C19.4707 5.26197 19.7806 5.5662 19.7806 6.01127C19.7806 6.45634 19.4764 6.95211 18.9862 7.31831C18.4341 7.74648 17.6567 8 16.7271 8C14.575 8 13.3862 6.68169 13.3862 4.37183Z", fill: "currentColor" }), jsx("path", { d: "M6.34302 6.24789C6.34302 5.79718 6.66978 5.48169 7.06978 5.48169C7.3402 5.48169 7.57119 5.5831 7.88105 5.85916C8.34302 6.29296 8.90076 6.52958 9.46978 6.52958C10.2754 6.52958 10.7092 6.23662 10.7092 5.70704C10.7092 5.27887 10.3712 5.01408 9.55992 4.83944L8.50076 4.59718C7.11485 4.30423 6.43316 3.58873 6.43316 2.41127C6.43316 0.935211 7.58245 0 9.38527 0C10.3712 0 11.2613 0.287324 11.7796 0.777465C12.112 1.08169 12.2867 1.41972 12.2867 1.76338C12.2867 2.17465 11.9937 2.45634 11.5599 2.45634C11.3177 2.45634 11.0754 2.3493 10.8388 2.12394C10.4444 1.69014 9.98809 1.46479 9.40781 1.46479C8.72612 1.46479 8.29795 1.77465 8.29795 2.25916C8.29795 2.68169 8.62471 2.98028 9.3402 3.12113L10.4106 3.35211C11.8416 3.63944 12.5346 4.34366 12.5346 5.50986C12.5346 7.02535 11.3008 8 9.374 8C8.31485 8 7.374 7.69578 6.85006 7.2C6.5233 6.89014 6.34302 6.56338 6.34302 6.24789Z", fill: "currentColor" }), jsx("path", { d: "M0.219482 6.7662V1.20563C0.219482 0.518309 0.596947 0.140844 1.30117 0.140844H4.7885C5.21667 0.140844 5.52089 0.44507 5.52089 0.884506C5.52089 1.31831 5.21667 1.6169 4.7885 1.6169H2.06174V3.27887H4.65329C5.05329 3.27887 5.32371 3.56056 5.32371 3.9662C5.32371 4.37746 5.05329 4.64225 4.65329 4.64225H2.06174V6.35493H4.76596C5.21667 6.35493 5.52089 6.64789 5.52089 7.09296C5.52089 7.54366 5.21667 7.83099 4.76033 7.83099H1.30117C0.596947 7.83099 0.219482 7.45915 0.219482 6.7662Z", fill: "currentColor" })] }));
+}
+function StarFilledIcon({ className, size = "24", }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M13.2868 2.49584C12.7691 1.41806 11.231 1.41805 10.7133 2.49584L8.49879 7.10557L3.39811 7.77343C2.21558 7.92827 1.7232 9.38947 2.60366 10.2197L6.33108 13.7343L5.39563 18.7523C5.17354 19.9437 6.43483 20.8269 7.47686 20.2652L12 17.8267L16.5232 20.2652C17.5652 20.8269 18.8265 19.9437 18.6044 18.7523L17.669 13.7343L21.3964 10.2197C22.2769 9.38947 21.7845 7.92827 20.602 7.77343L15.5013 7.10557L13.2868 2.49584Z", fill: "currentColor" }) }));
+}
+function StarOutlinedIcon({ className, size = "24", }) {
+    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: "M9.6074 1.91272C9.76499 1.58468 10.2351 1.58468 10.3927 1.91272L12.4549 6.20542C12.5183 6.33744 12.6446 6.42863 12.7906 6.44775L17.538 7.06935C17.9008 7.11686 18.0461 7.56096 17.7807 7.8112L14.3078 11.0858C14.201 11.1866 14.1527 11.3341 14.1796 11.4779L15.0514 16.1548C15.118 16.5122 14.7377 16.7867 14.4161 16.6133L10.2076 14.3444C10.0781 14.2747 9.92195 14.2747 9.79251 14.3444L5.58399 16.6133C5.26237 16.7867 4.88205 16.5122 4.94868 16.1548L5.82053 11.4779C5.84735 11.3341 5.79908 11.1866 5.69227 11.0858L2.21941 7.8112C1.95401 7.56096 2.09928 7.11686 2.46207 7.06935L7.20944 6.44775C7.35544 6.42863 7.4818 6.33744 7.54522 6.20542L9.6074 1.91272Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function FireIcon({ className, size = "24", }) {
+    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", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.29792 2.39894C9.78493 1.70321 10.7622 1.45171 11.5255 1.97651C12.3185 2.5218 13.69 3.57571 14.8703 5.05521C16.0501 6.53397 17.0833 8.49511 17.0833 10.8332C17.0833 14.9977 13.9564 18.3332 9.99996 18.3332C6.04348 18.3332 2.91663 14.9977 2.91663 10.8332C2.91663 9.13711 3.64503 6.96996 5.06457 5.23976C5.68651 4.48171 6.75968 4.52692 7.38668 5.12928L9.29792 2.39894ZM9.99996 16.6666C11.2081 16.6666 12.1875 15.5487 12.1875 14.1696C12.1875 12.6898 11.0365 11.6013 10.4043 11.1151C10.1629 10.9295 9.83699 10.9295 9.59563 11.1151C8.96345 11.6013 7.81246 12.6898 7.81246 14.1696C7.81246 15.5487 8.79184 16.6666 9.99996 16.6666Z", fill: "currentColor" }) }));
+}
+function TrophyIcon({ 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66675 1.66663C5.57823 1.66663 4.6522 2.3623 4.309 3.33329H4.16675C2.78604 3.33329 1.66675 4.45258 1.66675 5.83329C1.66675 7.58084 3.01154 9.0143 4.72272 9.15525C5.54372 10.8932 7.19798 12.1604 9.17 12.4414V13.3333H7.50008C6.11937 13.3333 5.00008 14.4526 5.00008 15.8333C5.00008 17.214 6.11937 18.3333 7.50008 18.3333H12.5001C13.8808 18.3333 15.0001 17.214 15.0001 15.8333C15.0001 14.4526 13.8808 13.3333 12.5001 13.3333H10.8367V12.4404C12.8058 12.1576 14.4573 10.8913 15.2774 9.15525C16.9886 9.0143 18.3334 7.58084 18.3334 5.83329C18.3334 4.45258 17.2141 3.33329 15.8334 3.33329H15.6912C15.348 2.3623 14.4219 1.66663 13.3334 1.66663H6.66675ZM4.16675 6.66663C4.16675 6.87922 4.17812 7.08917 4.20029 7.29588C3.68368 7.01278 3.33341 6.46394 3.33341 5.83329C3.33341 5.37306 3.70651 4.99996 4.16675 4.99996V6.66663ZM16.6667 5.83329C16.6667 6.46394 16.3165 7.01278 15.7999 7.29588C15.822 7.08917 15.8334 6.87922 15.8334 6.66663V4.99996C16.2937 4.99996 16.6667 5.37306 16.6667 5.83329Z", fill: "currentColor" }) }));
+}
+function SearchMenuIcon({ 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5033 4.16675C9.28159 4.16675 6.66992 6.77842 6.66992 10.0001C6.66992 13.2217 9.28159 15.8334 12.5033 15.8334C13.8127 15.8334 15.0214 15.402 15.9949 14.6735L17.7441 16.4227C18.0695 16.7481 18.5972 16.7481 18.9226 16.4227C19.248 16.0972 19.248 15.5696 18.9226 15.2442L17.1738 13.4954C17.904 12.5213 18.3366 11.3112 18.3366 10.0001C18.3366 6.77842 15.7249 4.16675 12.5033 4.16675ZM12.5 7.50008C11.1193 7.50008 10 8.61937 10 10.0001C10 10.4603 9.6269 10.8334 9.16667 10.8334C8.70643 10.8334 8.33333 10.4603 8.33333 10.0001C8.33333 7.69889 10.1988 5.83341 12.5 5.83341C12.9602 5.83341 13.3333 6.20651 13.3333 6.66675C13.3333 7.12699 12.9602 7.50008 12.5 7.50008Z", fill: "currentColor" }), jsx("path", { d: "M1.66992 5.83341C1.66992 5.37318 2.04302 5.00008 2.50326 5.00008H5.00326C5.46349 5.00008 5.83659 5.37318 5.83659 5.83341C5.83659 6.29365 5.46349 6.66675 5.00326 6.66675H2.50326C2.04302 6.66675 1.66992 6.29365 1.66992 5.83341Z", fill: "currentColor" }), jsx("path", { d: "M1.66992 10.0001C1.66992 9.53984 2.04302 9.16675 2.50326 9.16675H4.16992C4.63016 9.16675 5.00326 9.53984 5.00326 10.0001C5.00326 10.4603 4.63016 10.8334 4.16992 10.8334H2.50326C2.04302 10.8334 1.66992 10.4603 1.66992 10.0001Z", fill: "currentColor" }), jsx("path", { d: "M2.50326 13.3334C2.04302 13.3334 1.66992 13.7065 1.66992 14.1667C1.66992 14.627 2.04302 15.0001 2.50326 15.0001H5.00326C5.46349 15.0001 5.83659 14.627 5.83659 14.1667C5.83659 13.7065 5.46349 13.3334 5.00326 13.3334H2.50326Z", fill: "currentColor" })] }));
+}
+function MoneyBagSolidIcon({ 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: "M3.20936 15.8585C2.74521 15.1586 2.50001 14.315 2.5 13.3333C2.87506 10.7079 4.60051 8.75772 6.46082 6.87496H13.6268C15.3671 8.72127 17.1214 10.6833 17.5 13.3333C17.5 14.315 17.2548 15.1586 16.7907 15.8585C16.3297 16.5534 15.6857 17.0575 14.962 17.4187C13.539 18.1289 11.7155 18.3333 10 18.3333C8.28455 18.3333 6.46098 18.1289 5.03805 17.4187C4.31431 17.0575 3.67029 16.5534 3.20936 15.8585Z", fill: "currentColor" }), jsx("path", { d: "M13.2509 4.2731C13.6005 3.34097 13.2461 2.25704 12.2912 1.97578C11.5795 1.76617 10.8146 1.66663 10 1.66663C9.18537 1.66663 8.42051 1.76617 7.70883 1.97578C6.75387 2.25704 6.39955 3.34097 6.74909 4.2731L7.25187 5.61384L7.22222 5.62496H12.7778L12.7481 5.61384L13.2509 4.2731Z", fill: "currentColor" })] }));
+}
 
 function EmptyHeartIcon({ className }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, children: jsx("path", { d: "M21 10C21 15.75 12.75 20 12 20C11.25 20 3 15.75 3 10C3 6 5.5 4 8 4C10.5 4 12 5.5 12 5.5C12 5.5 13.5 4 16 4C18.5 4 21 6 21 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }) }));
@@ -4299,7 +4649,7 @@ function TriangleExclamation() {
 function WalletIcon({ size = "16" }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.33333 2C3.04467 2 2 3.04467 2 4.33333V11.3333C2 12.8061 3.19391 14 4.66667 14H12C13.1046 14 14 13.1046 14 12V7.33333C14 6.22876 13.1046 5.33333 12 5.33333H11.3333V3.60784C11.3333 2.71986 10.6135 2 9.72549 2H4.33333ZM10 5.33333V3.60784C10 3.45624 9.8771 3.33333 9.72549 3.33333H4.33333C3.78105 3.33333 3.33333 3.78105 3.33333 4.33333C3.33333 4.88562 3.78105 5.33333 4.33333 5.33333H10ZM10.3333 10.5C10.7936 10.5 11.1667 10.1269 11.1667 9.66667C11.1667 9.20643 10.7936 8.83333 10.3333 8.83333C9.8731 8.83333 9.5 9.20643 9.5 9.66667C9.5 10.1269 9.8731 10.5 10.3333 10.5Z", fill: "currentColor" }) }));
 }
-function WalletFilledIcon({ size = "24" }) {
+function WalletOutlinedIcon({ size = "24" }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [jsx("path", { d: "M4 6.5V17C4 18.6569 5.34315 20 7 20H18C19.1046 20 20 19.1046 20 18V11C20 9.89543 19.1046 9 18 9H16M4 6.5C4 7.88071 5.11929 9 6.5 9H16M4 6.5C4 5.11929 5.11929 4 6.5 4H14.5882C15.3679 4 16 4.63207 16 5.41176V9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsx("path", { d: "M15.5 15.375C15.9832 15.375 16.375 14.9832 16.375 14.5C16.375 14.0168 15.9832 13.625 15.5 13.625C15.0168 13.625 14.625 14.0168 14.625 14.5C14.625 14.9832 15.0168 15.375 15.5 15.375Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.75" })] }));
 }
 
@@ -4612,7 +4962,7 @@ function LargeNumericInput({ onChange, value }) {
         if (isValidAmount)
             onChange(value || "");
     }, [onChange]);
-    return (jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsx("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: jsxs("label", { className: "tw-flex tw-max-w-full tw-cursor-text tw-items-center tw-overflow-hidden tw-rounded-squid-l tw-px-squid-s tw-py-squid-xxs focus-within:tw-bg-material-light-thin hover:tw-bg-material-light-thin", children: [jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsx("span", { children: "$" }), jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-[calc(100%-3.125rem)] tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }) }), jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsx(Chip, { label: `$${amount}`, onClick: () => {
+    return (jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-l tw-pb-squid-m", children: [jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-7xl tw-text-royal-500", children: [jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: value || placeholder }), jsx("span", { children: "$" }), jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: value, onChange: handleInputChange, className: "tw-max-w-full tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", placeholder: placeholder })] }), jsx("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-gap-squid-xxs tw-self-stretch", children: suggestedAmounts.map((amount) => (jsx(Chip, { label: `$${amount}`, onClick: () => {
                         onChange(amount);
                     } }, amount))) })] }));
 }
@@ -18990,6 +19340,9 @@ function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButt
 function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, trigger, }) {
     return (jsxs("div", { ref: dropdownRef, className: cn("tw-relative", containerClassName), children: [trigger, jsx(Menu, { menuRef: menuRef, rounded: "sm", containerClassName: cn("tw-absolute tw-right-0 tw-z-30", className), contentClassName: cn("!tw-p-0", menuContentClassName), contentWrapperProps: contentWrapperProps, children: !isHidden && (jsx("ul", { className: cn("tw-flex tw-max-w-full tw-flex-col tw-gap-squid-xxs tw-px-0 tw-py-squid-xxs", listClassName), children: children })) })] }));
 }
+function DropdownMenuSeparator() {
+    return (jsx("span", { className: "tw-h-[0.0625rem] tw-min-h-[0.0625rem] tw-bg-material-light-thin" }));
+}
 
 function InfoBox({ title, description, icon }) {
     return (jsxs("div", { className: "tw-align-self-stretch tw-flex tw-flex-col tw-items-center tw-gap-squid-xs tw-px-squid-m tw-pb-squid-l tw-pt-squid-xs tw-text-royal-500", children: [icon, jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xxs tw-text-center", children: [jsx(BodyText, { size: "small", className: "!tw-leading-[9px]", children: title }), typeof description === "string" ? (jsx(CaptionText, { className: "tw-text-grey-500", children: description })) : (description)] })] }));
@@ -19052,10 +19405,10 @@ function ModalTitle({ title }) {
 }
 
 function NavigationBar(_a) {
-    var { title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, subtitle, paddingRight = 0 } = _a, props = __rest$1(_a, ["title", "displayBackButton", "logoUrl", "transparent", "displayButtonShadows", "onBackButtonClick", "actions", "isLoading", "subtitle", "paddingRight"]);
+    var { title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, isLoading = false, subtitle } = _a, props = __rest$1(_a, ["title", "displayBackButton", "logoUrl", "transparent", "displayButtonShadows", "onBackButtonClick", "actions", "isLoading", "subtitle"]);
     return (jsxs("nav", Object.assign({}, props, { className: cn("tw-flex tw-max-h-[120px] tw-flex-row-reverse tw-text-grey-300 mobile-xs-height:tw-flex-col", transparent ? "tw-bg-transparent" : "tw-bg-grey-900", props.className), children: [jsxs("div", { className: cn("tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs tw-pl-squid-m", displayBackButton
                     ? "tw-w-full tw-pr-squid-xs mobile-xs-height:tw-pr-squid-m"
-                    : "tw-pr-squid-m mobile-lg:tw-pl-squid-l", !title && "tw-w-full mobile-xs-height:tw-w-[unset]"), style: { paddingRight: paddingRight ? `${paddingRight}px` : undefined }, children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
+                    : "tw-pr-squid-m mobile-lg:tw-pl-squid-l", !title && "tw-w-full mobile-xs-height:tw-w-[unset]"), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
                             ? "group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2"
                             : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : 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 tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => {
                             var _a;
@@ -19123,7 +19476,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
                                                     ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
                                                     : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
                                                     ? "tw-text-grey-600"
-                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
                     decimals: (_a = token === null || token === void 0 ? void 0 : token.decimals) !== null && _a !== void 0 ? _a : 18,
                     symbol: (_b = token === null || token === void 0 ? void 0 : token.symbol) !== null && _b !== void 0 ? _b : "",
                     price: tokenPrice,
@@ -19148,7 +19501,7 @@ function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, acti
                     size: "xxlarge",
                     rounded: "s",
                     border: "outline-sm",
-                }, badge: badge })) : (jsx(ImageGroup, { imageUrls: imageUrls, badge: badge })), jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-gap-squid-xs", children: [jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px]", children: title }), jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px] tw-text-grey-500", children: subtitle })] }), jsx("menu", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: actions })] }));
+                }, badge: badge })) : (jsx(ImageGroup, { imageUrls: imageUrls, badge: badge, size: "large" })), jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-gap-squid-xs", children: [jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px]", children: title }), jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px] tw-text-grey-500", children: subtitle })] }), jsx("menu", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: actions })] }));
 }
 
 const SPACING = 10;
@@ -19557,7 +19910,7 @@ function ListItem(_a) {
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
             : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: control == null ? handleItemClick : undefined, className: cn("tw-group/list-item tw-peer/list-item tw-relative tw-flex tw-w-full tw-max-w-full  tw-justify-start tw-gap-squid-xs tw-rounded-squid-s tw-px-squid-xs", !multilineSubtitle
                     ? "tw-items-center tw-py-squid-xxs"
-                    : "tw-py-squid-xs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && control == null && "hover:tw-bg-material-light-thin", isInteractive && "tw-text-left tw-normal-case"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsx(ImageGroup, { size: "small", imageUrls: imageGroup })) : (jsx(BadgeImage, { image: {
+                    : "tw-py-squid-xs", (isSelected || isDropdownOpen) && "tw-bg-material-light-thin", isInteractive && control == null && "hover:tw-bg-material-light-thin", isInteractive && "tw-text-left tw-normal-case"), children: [size === "large" ? (jsx("div", { className: "tw-h-10 tw-w-10", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsx(ImageGroup, { size: "medium", imageUrls: imageGroup })) : (jsx(BadgeImage, { image: {
                                 src: mainImageUrl,
                                 placeholderImageUrl,
                                 size: "xlarge",
@@ -19569,7 +19922,7 @@ function ListItem(_a) {
                                     size: "medium",
                                     border: "outline-lg",
                                 }
-                                : undefined }))) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (jsx(Image$1, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded })) })), jsxs("div", { className: cn("tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", multilineSubtitle ? "tw-pl-squid-xxs" : "tw-h-[40px]", !multilineSubtitle &&
+                                : undefined }))) })) : (jsx("div", { className: "tw-flex tw-min-h-[30px] tw-min-w-[30px] tw-items-center tw-justify-center", children: mainIcon !== null && mainIcon !== void 0 ? mainIcon : (imageGroup != null ? (jsx(ImageGroup, { size: "small", imageUrls: imageGroup })) : (jsx(Image$1, { size: "large", src: mainImageUrl, placeholderImageUrl: placeholderImageUrl, rounded: rounded }))) })), jsxs("div", { className: cn("tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-gap-squid-xxs", multilineSubtitle ? "tw-pl-squid-xxs" : "tw-h-[40px]", !multilineSubtitle &&
                             // 'large' variant has extra padding
                             (size === "large" ? "tw-w-[56%] tw-pl-squid-xxs" : "tw-w-[67%]")), children: [typeof itemTitle === "string" ? (jsx(BodyText, { size: "small", className: cn("tw-max-w-full tw-truncate", subtitle && "tw-h-[17px] !tw-leading-[17px]", compactOnMobile ? "tw-hidden mobile-lg:tw-block" : "tw-block"), children: itemTitle })) : (itemTitle), size === "large" &&
                                 ((loading === null || loading === void 0 ? void 0 : loading.subtitle) ? (loadingComponent()) : subtitle ? (jsxs(CaptionText, { className: subtitleClassName, children: [subtitleOnHover && (jsx(CaptionText, { className: cn(subtitleClassName, "tw-hidden group-hover/list-item:tw-block"), children: subtitleOnHover })), subtitle] })) : null)] }), showDetail && (jsxs(DetailTag, Object.assign({}, detailProps, { className: cn("tw-flex tw-w-fit tw-items-center tw-justify-center tw-rounded-squid-xs", size === "large" ? "tw-h-squid-xl" : "tw-h-squid-l", showDetailOnHoverOnly
@@ -19757,7 +20110,7 @@ const mainImageSizeMap = {
     large: "xxlarge",
     small: "xlarge",
 };
-function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, variant = "large", className, onChildClick, isAdjacentToPreviousExpanded = false, isAdjacentToNextExpanded = false, }) {
+function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, variant = "large", className, onChildClick, isAdjacentToPreviousExpanded = false, isAdjacentToNextExpanded = false, action, }) {
     var _a;
     const [isCollapsed, setIsCollapsed] = useState(true);
     const isCollapsible = tokenItems && tokenItems.length > 0;
@@ -19792,7 +20145,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                         : "tw-h-squid-xl tw-gap-squid-xxs"
                     : isSmallVariant
                         ? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
-                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
+                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [!!action && action, jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
                                     ? "medium"
                                     : (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
                                     transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
@@ -26056,22 +26409,22 @@ function PropertiesLayout({ children, className, }) {
 }
 
 function BridgeProperties({ amount, token, fromChain, toChain, wallet, boosted, timeToComplete, }) {
-    return (jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(SquareArrowTopLeftIcon, { size: "20" }), label: jsxs(BodyText, { size: "small", children: ["Bridge ", token.symbol] }), detail: jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: amount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: wallet, showCopyButton: true }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }));
+    return (jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(SquareArrowTopLeftIcon, { size: "20" }), label: jsxs(BodyText, { size: "small", children: ["Bridge ", token.symbol] }), detail: jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: amount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletOutlinedIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: wallet, showCopyButton: true }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }));
 }
 
 function BuyNFTProperties({ title, imageURI, collection, price, token, marketplace, fromChain, toChain, fromAddress, toAddress, boosted, timeToComplete, tokenId, nftType, }) {
-    return (jsxs(PropertiesLayout, { className: "tw-flex tw-flex-col tw-gap-squid-m", children: [jsx(NFTPreviewCard, { name: title, imageURI: imageURI, collectionName: collection.name, tokenId: tokenId, nftType: nftType }), jsxs("div", { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(CollectionIcon, {}), label: "Collection", detail: jsx(IconLabel, { src: collection.imageURI, children: jsx(BodyText, { size: "small", children: collection.name }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TagIcon, {}), label: "NFT Price", detail: jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: price }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ShoppingBagIcon, {}), label: "Marketplace", detail: jsx(IconLabel, { src: marketplace.logoURI, children: jsx(BodyText, { size: "small", children: marketplace.name }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: fromAddress, showCopyButton: true }) }), to: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: toAddress, showCopyButton: true }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] })] }));
+    return (jsxs(PropertiesLayout, { className: "tw-flex tw-flex-col tw-gap-squid-m", children: [jsx(NFTPreviewCard, { name: title, imageURI: imageURI, collectionName: collection.name, tokenId: tokenId, nftType: nftType }), jsxs("div", { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(CollectionIcon, {}), label: "Collection", detail: jsx(IconLabel, { src: collection.imageURI, children: jsx(BodyText, { size: "small", children: collection.name }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TagIcon, {}), label: "NFT Price", detail: jsx(IconLabel, { src: token.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: price }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ShoppingBagIcon, {}), label: "Marketplace", detail: jsx(IconLabel, { src: marketplace.logoURI, children: jsx(BodyText, { size: "small", children: marketplace.name }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletOutlinedIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: fromAddress, showCopyButton: true }) }), to: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: toAddress, showCopyButton: true }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] })] }));
 }
 function NFTPreviewCard({ name, imageURI, tokenId, nftType, collectionName, }) {
     return (jsxs("div", { className: "tw-flex tw-flex-col tw-items-center tw-gap-squid-m tw-px-squid-l tw-pt-squid-m tw-text-grey-300", children: [jsx("img", { className: "tw-max-w-96 tw-overflow-hidden tw-rounded-squid-xxs tw-shadow-elevation-light-3", src: imageURI, alt: name }), jsxs("div", { className: "tw-grid tw-w-full tw-grid-cols-[100px,1fr,100px]", children: [jsx("div", { className: "tw-flex tw-items-center", children: jsx(Chip, { className: "tw-border tw-border-grey-500 tw-bg-transparent !tw-text-grey-500", label: tokenId }) }), jsxs("div", { className: "tw-flex tw-flex-col tw-items-center", children: [jsxs(BodyText, { size: "small", children: [jsx("span", { className: "tw-text-grey-600", children: "\u201C\u00A0" }), name, jsx("span", { className: "tw-text-grey-600", children: "\u00A0\u201D" })] }), jsx(CaptionText, { children: collectionName })] }), jsx("div", { className: "tw-flex tw-items-center tw-justify-end", children: jsx(Chip, { className: "tw-border tw-border-grey-500 tw-bg-transparent !tw-text-grey-500", label: nftType }) })] })] }));
 }
 
 function InteractionProperties({ chain, wallet, boosted, timeToComplete, }) {
-    return (jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: wallet, showCopyButton: true }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }));
+    return (jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(IconLabel, { src: chain.logoURI, children: jsx(BodyText, { size: "small", children: chain.name }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletOutlinedIcon, {}), label: "Wallet", detail: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: wallet, showCopyButton: true }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }));
 }
 
 function SwapProperties({ fromAmount, fromToken, toAmount, toToken, fromChain, toChain, fromAddress, toAddress, exchangeRate, boosted, timeToComplete, }) {
-    return (jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: fromAmount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: toAmount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletFilledIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: fromAddress, showCopyButton: true }) }), to: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: toAddress, showCopyButton: true }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }));
+    return (jsxs(PropertiesLayout, { children: [jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightUpCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Swap ", fromToken.symbol] }), detail: jsx(IconLabel, { src: fromToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: fromAmount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowRightDownCircleIcon, {}), label: jsxs(BodyText, { size: "small", children: ["Receive ", toToken.symbol] }), detail: jsx(IconLabel, { src: toToken.logoURI, rounded: "full", children: jsx(BodyText, { size: "small", children: toAmount }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ChainLink, { size: "24" }), label: "Chain", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromChain.logoURI, children: jsx(BodyText, { size: "small", children: fromChain.name }) }), to: jsx(IconLabel, { src: toChain.logoURI, children: jsx(BodyText, { size: "small", children: toChain.name }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(WalletOutlinedIcon, {}), label: "Wallet", detail: jsx(Transfer, { from: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: fromAddress, showCopyButton: true }) }), to: jsx(BodyText, { size: "small", children: jsx(HashLink, { hash: toAddress, showCopyButton: true }) }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(ArrowsSwapIcon, {}), label: "Exchange rate", detail: jsx(Transfer, { from: jsxs(BodyText, { size: "small", children: ["1 ", fromToken.symbol] }), to: jsxs(BodyText, { size: "small", children: [exchangeRate, " ", toToken.symbol] }) }) }), jsx(PropertyListItem, { variant: "large", icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: jsxs("div", { className: "tw-flex tw-items-center", children: [boosted && jsx(BoostBadge, {}), jsx(BodyText, { size: "small", children: timeToComplete })] }) })] }));
 }
 
 const propertiesComponentsMap = {
@@ -27562,9 +27915,9 @@ function NumericInput(_a) {
     }, [userInputType, balance, token.price]);
     const containerClassname = "tw-px-squid-xs !tw-h-full tw-pt-squid-xxs mobile-xs-height:tw-pb-squid-s tw-text-heading-small tw-font-regular mobile-lg:tw-px-squid-m tw-relative tw-h-[65px] mobile-sm-height:tw-h-[75px]";
     const inputRef = useRef(null);
-    return (jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
+    return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s 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-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular tw-flex tw-h-[55px] tw-w-full tw-cursor-default tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s 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-500 focus:tw-outline-none", userInputType === UserInputType.USD && "tw-pl-[33px]") }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-font-regular 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-text-grey-300", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn("tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m", isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
                         : userInputType === UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
@@ -28016,7 +28369,7 @@ function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, fr
                 }, borderType: "outline", children: [jsxs("div", { className: "tw-relative tw-flex tw-h-[160px] tw-w-full tw-items-center tw-justify-center tw-rounded-tl-modal tw-rounded-tr-modal tw-bg-grey-900 tw-py-squid-s tw-text-material-light-thin", style: {
                             // box shadow simulating bottom outline (we do not use css outline because cannot apply it to only one side)
                             boxShadow: "0 1px 0 currentColor",
-                        }, children: [jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxs("ul", { className: "squid-property-gradient-bg-even-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-start tw-gap-squid-xxs tw-overflow-auto tw-rounded-squid-l tw-pb-squid-s tw-scrollbar-hidden", children: [jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsx(HashLink, { className: "tw-text-royal-500", formattedHash: depositAddressFormatted, hash: depositAddress, showCopyButton: true, copyIconSize: "24" }), tooltip: (tooltips === null || tooltips === void 0 ? void 0 : tooltips.depositAddress)
+                        }, children: [jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsx("div", { className: "tw-relative tw-flex tw-h-squid-m tw-w-full tw-items-end tw-justify-between tw-self-stretch tw-px-squid-m", children: jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxs("ul", { className: "squid-property-gradient-bg-even-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-start tw-gap-squid-xxs tw-overflow-auto tw-rounded-squid-l tw-pb-squid-s tw-scrollbar-hidden", children: [jsx(PropertyListItem, { icon: jsx(WalletOutlinedIcon, { size: "24" }), label: "Deposit address", detail: jsx(HashLink, { className: "tw-text-royal-500", formattedHash: depositAddressFormatted, hash: depositAddress, showCopyButton: true, copyIconSize: "24" }), tooltip: (tooltips === null || tooltips === void 0 ? void 0 : tooltips.depositAddress)
                                     ? {
                                         tooltipContent: tooltips.depositAddress,
                                         tooltipWidth: "max",
@@ -69444,7 +69797,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "squid-property-gradient-bg-odd-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxs("ul", { className: "squid-property-gradient-bg-odd-container tw-flex tw-w-full tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xxs tw-rounded-squid-l tw-pb-squid-s tw-pt-squid-xs mobile-xs-height:tw-h-[195px] mobile-sm-height:tw-py-squid-s", children: [jsx(PropertyListItem, { icon: jsx(ArrowsSwapIcon, {}), label: "Swap", detail: jsx(Transfer, { from: jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) }) }), jsx(PropertyListItem, { icon: jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: jsx(Transfer, { from: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: fromChain.logoUrl }), jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxs(Fragment, { children: [jsx("img", { className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs", src: toChain.logoUrl }), jsx(CaptionText, { children: toChain.networkName })] }) }) }), jsx(PropertyListItem, { icon: jsx(WalletOutlinedIcon, { size: "24" }), label: "Wallet", detail: jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsx(PropertyListItem, { icon: jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsx(CaptionText, { children: timer })) : (jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -69590,337 +69943,6 @@ function TransactionView({ type, props }) {
     return jsx(Component, Object.assign({}, props));
 }
 
-var isMergeableObject = function isMergeableObject(value) {
-	return isNonNullObject(value)
-		&& !isSpecial(value)
-};
-
-function isNonNullObject(value) {
-	return !!value && typeof value === 'object'
-}
-
-function isSpecial(value) {
-	var stringValue = Object.prototype.toString.call(value);
-
-	return stringValue === '[object RegExp]'
-		|| stringValue === '[object Date]'
-		|| isReactElement(value)
-}
-
-// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
-var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
-var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
-
-function isReactElement(value) {
-	return value.$$typeof === REACT_ELEMENT_TYPE
-}
-
-function emptyTarget(val) {
-	return Array.isArray(val) ? [] : {}
-}
-
-function cloneUnlessOtherwiseSpecified(value, options) {
-	return (options.clone !== false && options.isMergeableObject(value))
-		? deepmerge(emptyTarget(value), value, options)
-		: value
-}
-
-function defaultArrayMerge(target, source, options) {
-	return target.concat(source).map(function(element) {
-		return cloneUnlessOtherwiseSpecified(element, options)
-	})
-}
-
-function getMergeFunction(key, options) {
-	if (!options.customMerge) {
-		return deepmerge
-	}
-	var customMerge = options.customMerge(key);
-	return typeof customMerge === 'function' ? customMerge : deepmerge
-}
-
-function getEnumerableOwnPropertySymbols(target) {
-	return Object.getOwnPropertySymbols
-		? Object.getOwnPropertySymbols(target).filter(function(symbol) {
-			return Object.propertyIsEnumerable.call(target, symbol)
-		})
-		: []
-}
-
-function getKeys(target) {
-	return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
-}
-
-function propertyIsOnObject(object, property) {
-	try {
-		return property in object
-	} catch(_) {
-		return false
-	}
-}
-
-// Protects from prototype poisoning and unexpected merging up the prototype chain.
-function propertyIsUnsafe(target, key) {
-	return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet,
-		&& !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain,
-			&& Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable.
-}
-
-function mergeObject(target, source, options) {
-	var destination = {};
-	if (options.isMergeableObject(target)) {
-		getKeys(target).forEach(function(key) {
-			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
-		});
-	}
-	getKeys(source).forEach(function(key) {
-		if (propertyIsUnsafe(target, key)) {
-			return
-		}
-
-		if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
-			destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
-		} else {
-			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
-		}
-	});
-	return destination
-}
-
-function deepmerge(target, source, options) {
-	options = options || {};
-	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
-	options.isMergeableObject = options.isMergeableObject || isMergeableObject;
-	// cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge()
-	// implementations can use it. The caller may not replace it.
-	options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
-
-	var sourceIsArray = Array.isArray(source);
-	var targetIsArray = Array.isArray(target);
-	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
-
-	if (!sourceAndTargetTypesMatch) {
-		return cloneUnlessOtherwiseSpecified(source, options)
-	} else if (sourceIsArray) {
-		return options.arrayMerge(target, source, options)
-	} else {
-		return mergeObject(target, source, options)
-	}
-}
-
-deepmerge.all = function deepmergeAll(array, options) {
-	if (!Array.isArray(array)) {
-		throw new Error('first argument should be an array')
-	}
-
-	return array.reduce(function(prev, next) {
-		return deepmerge(prev, next, options)
-	}, {})
-};
-
-var deepmerge_1 = deepmerge;
-
-var cjs = deepmerge_1;
-
-var deepmerge$1 = /*@__PURE__*/getDefaultExportFromCjs(cjs);
-
-/* eslint-disable @typescript-eslint/prefer-reduce-type-parameter */
-/**
- * Parses the user readable config to css variables
- * and adds the material-* variants
- * @param style
- */
-const parseSquidTheme = (userTheme, themeType) => {
-    var _a, _b;
-    const fullPublicTheme = deepmerge$1(lightTheme, userTheme);
-    // Add material-{light,dark}-{thin,average,thick} colors to the squid theme object
-    // using the following formula:
-    // material-light-thin -> grey-100 + 10% opacity
-    // material-light-average -> grey-100 + 33% opacity
-    // material-light-thick -> grey-100 + 66% opacity
-    // material-dark-thin -> grey-900 + 10% opacity
-    // material-dark-average -> grey-900 + 33% opacity
-    // material-dark-thick -> grey-900 + 66% opacity
-    const materialVariants = {
-        "material-light-thin": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.1),
-        "material-light-average": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.33),
-        "material-light-thick": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.66),
-        "material-dark-thin": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-900"], 0.1),
-        "material-dark-average": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-900"], 0.33),
-        "material-dark-thick": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-900"], 0.66),
-    };
-    // Add some other extra colors that are not part of the public theme
-    const opacityVariants = {
-        // opacity variants
-        "grey-100-005": getHexColorFromOpacityPercentage(fullPublicTheme.color["grey-100"], 0.05),
-        // color representing the blend of material-light and grey-900
-        "material-light-blend-grey-900": (_a = blendColors(materialVariants["material-light-thin"], fullPublicTheme.color["grey-900"])) !== null && _a !== void 0 ? _a : "",
-        // color representing the blend of material-light and grey-300
-        "material-light-blend-grey-800": (_b = blendColors(materialVariants["material-light-thin"], fullPublicTheme.color["grey-800"])) !== null && _b !== void 0 ? _b : "",
-    };
-    const defaultButtonColors = {
-        "button-lg-primary-bg": fullPublicTheme.color["royal-500"],
-        "button-lg-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
-        "button-lg-secondary-bg": fullPublicTheme.color["grey-100"],
-        "button-lg-secondary-text": fullPublicTheme.color["grey-800"],
-        "button-lg-tertiary-bg": fullPublicTheme.color["grey-800"],
-        "button-lg-tertiary-text": fullPublicTheme.color["grey-300"],
-        "button-md-primary-bg": fullPublicTheme.color["royal-500"],
-        "button-md-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
-        "button-md-secondary-bg": fullPublicTheme.color["grey-100"],
-        "button-md-secondary-text": fullPublicTheme.color["grey-800"],
-        "button-md-tertiary-bg": fullPublicTheme.color["grey-800"],
-        "button-md-tertiary-text": fullPublicTheme.color["grey-300"],
-        "button-sm-primary-bg": fullPublicTheme.color["royal-500"],
-        "button-sm-primary-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
-        "button-sm-secondary-bg": fullPublicTheme.color["grey-100"],
-        "button-sm-secondary-text": fullPublicTheme.color["grey-800"],
-        "button-sm-tertiary-bg": fullPublicTheme.color["grey-800"],
-        "button-sm-tertiary-text": fullPublicTheme.color["grey-300"],
-    };
-    const defaultInputColors = {
-        "input-placeholder": fullPublicTheme.color["grey-600"],
-        "input-text": fullPublicTheme.color["grey-300"],
-        "input-selection": fullPublicTheme.color["grey-300"],
-        "input-bg": fullPublicTheme.color["grey-900"],
-    };
-    const defaultAnimationColors = {
-        "animation-bg": fullPublicTheme.color["royal-500"],
-        "animation-text": fullPublicTheme.color[themeType === "light" ? "grey-900" : "grey-100"],
-    };
-    const defaultModalColors = {
-        "modal-backdrop": materialVariants["material-dark-average"],
-    };
-    const defaultMenuColors = {
-        "menu-bg": materialVariants["material-dark-thick"],
-        "menu-text": materialVariants["material-light-thick"],
-        "menu-backdrop": materialVariants["material-light-thin"],
-    };
-    // Adds the internal colors and any missing config to the full theme
-    const fullTheme = deepmerge$1({
-        color: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, materialVariants), opacityVariants), defaultButtonColors), defaultInputColors), defaultAnimationColors), defaultModalColors), defaultMenuColors),
-    }, fullPublicTheme);
-    return flatten(fullTheme, {
-        prefix: THEME_CSS_VARIABLE_PREFIX,
-    });
-};
-const remToPx = (rem, baseFontSize = 16) => {
-    if (typeof rem === "string")
-        return Number(rem.replace("rem", "")) * baseFontSize;
-    return rem * baseFontSize;
-};
-const pxToRem = (px, baseFontSize = 16) => {
-    if (typeof px === "string")
-        return Number(px.replace("px", "")) / baseFontSize;
-    return px / baseFontSize;
-};
-function getContrastColor({ r, g, b, }, threshold = 128) {
-    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-    return brightness >= threshold ? "dark" : "light";
-}
-/**
- * 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 hexToRgb(hex) {
-    var _a;
-    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
-    const cleanHex = hex.replace(shorthandRegex, function (m, r, g, b, a) {
-        return r + r + g + g + b + b + (a != null ? a + a : "");
-    });
-    const [, r, g, b, a] = ((_a = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(cleanHex)) !== null && _a !== void 0 ? _a : []);
-    if (r == null || g == null || b == null)
-        return null;
-    return {
-        r: parseInt(r, 16),
-        g: parseInt(g, 16),
-        b: parseInt(b, 16),
-        a: a != null ? parseInt(a, 16) / 255 : 1,
-    };
-}
-function rgbToHex(r, g, b) {
-    return ("#" +
-        [r, g, b]
-            .map((x) => {
-            const hex = x.toString(16);
-            return hex.length === 1 ? "0" + hex : hex;
-        })
-            .join(""));
-}
-// Example usage:
-// let foregroundColor = '#FBFBFD1A'
-// let bgColor = '#17191C'
-// let resultingColor = blendColors(foregroundColor, bgColor)
-// console.log(resultingColor) // Output: ~#2f3033
-function blendColors(foreground, background) {
-    const fg = hexToRgb(foreground);
-    const bg = hexToRgb(background);
-    if (fg == null || bg == null)
-        return null;
-    const r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
-    const g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
-    const b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
-    return rgbToHex(r, g, b);
-}
-function adjustColorForContrast(foreground, background, factor = 1) {
-    const fg = parseColor(foreground);
-    const bg = parseColor(background);
-    if (fg == null || bg == null)
-        return null;
-    const r = Math.round(fg.r * (1 - factor) + bg.r * factor);
-    const g = Math.round(fg.g * (1 - factor) + bg.g * factor);
-    const b = Math.round(fg.b * (1 - factor) + bg.b * factor);
-    return rgbToHex(r, g, b);
-}
-const isValidHexColor = (hex) => {
-    return /^#([0-9A-F]{3}|[0-9A-F]{6}|[0-9A-F]{4}|[0-9A-F]{8})$/i.test(hex);
-};
-function parseColor(color) {
-    var _a, _b, _c, _d;
-    if (color.startsWith("#")) {
-        return hexToRgb(color);
-    }
-    else if (color.startsWith("rgb")) {
-        const match = color.match(/\d+(\.\d+)?/g);
-        if (match) {
-            return {
-                r: parseInt((_a = match[0]) !== null && _a !== void 0 ? _a : "0"),
-                g: parseInt((_b = match[1]) !== null && _b !== void 0 ? _b : "0"),
-                b: parseInt((_c = match[2]) !== null && _c !== void 0 ? _c : "0"),
-                a: match[3] ? parseFloat((_d = match[3]) !== null && _d !== void 0 ? _d : "0") : 1,
-            };
-        }
-    }
-    return null;
-}
-const getColorBrightness = (color) => {
-    const rgb = parseColor(color);
-    if (!rgb)
-        return 0;
-    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
-};
-const getWalletCardBackground = (colors) => {
-    if (colors.length >= 3) {
-        return `linear-gradient(73deg, ${colors[0]} 8.18%, ${colors[1]} 50.16%, ${colors[2]} 91.82%)`;
-    }
-    if (colors.length === 2) {
-        return `linear-gradient(73deg, ${colors[0]} 8.18%, ${colors[1]} 50.16%)`;
-    }
-    return colors[0];
-};
-
 function ThemeProvider(_a) {
     var { theme = lightTheme, children, themeType = "light", settings } = _a, props = __rest$1(_a, ["theme", "children", "themeType", "settings"]);
     const parsedStyle = parseSquidTheme(theme, themeType);
@@ -69932,4 +69954,4 @@ function ThemeProvider(_a) {
     return (jsx("div", Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), parsedStyle), "data-squid-theme-type": themeType, className: cn("tw-group tw-relative tw-flex tw-font-squid-main tw-h-d-screen mobile-lg:tw-h-auto", props.className), children: children })));
 }
 
-export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationCard, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarLinesIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountListItem, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationCard, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownLeftIcon, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowExpandIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, CelebrateIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, CircleCheckIcon, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy2Icon, CopyOutlinedIcon, CrossedOutSunSolidIcon, DashboardFast, DepositAddressView, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTitle, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EscKeyIcon, EthereumIcon, ExplosionIcon, EyeOpenIcon, FarcasterIcon, FavouriteFilterIcon, FeeButton, FeesAction, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, FireIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, HomeIcon, IconButton, IconLabel, Image$1 as Image, ImageGroup, ImageIcon, ImageSparkle, ImageStack, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LargeNumericInput, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, ModalTitle, MoneyBagIcon, MoneyBagSolidIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PluginIcon, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, QrCodeIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SearchMenuIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileFilledIcon, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StarFilledIcon, StarLinesIcon, StarOutlinedIcon, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, Tab, Tabs, TagIcon, TagIconFilled, TelegramIcon, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenGroups, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, TrophyIcon, TxProgressViewHeader, UnsupportedPairNotice, UsdAmount, WalletIcon, WalletLink, WalletOutlinedIcon, WrapAction, XSocialIcon, adjustColorForContrast, baseTailwindConfig, blendColors, buttonRoundedClassMap, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, themeKeysToCssVariables, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };