@0xsquid/ui 2.6.8-send-beta.0 → 2.6.8

package/dist/cjs/index.js

@@ -3000,6 +3000,39 @@ function hashStringToIndex(str, max) {
     }
     return index;
 }
+/**
+ * Formats a value for CSS properties by adding 'px' if no unit is present.
+ * @param {string | number} value - The value to format (can be a number or string)
+ * @returns {string} - The formatted CSS value with appropriate units
+ *
+ * @example
+ * // Returns "20px"
+ * formatCSSValue(20)
+ *
+ * @example
+ * // Returns "5rem"
+ * formatCSSValue("5rem")
+ */
+function formatCSSValue(value) {
+    if (typeof value === "number" || /^\d+$/.test(value.toString())) {
+        return `${value}px`;
+    }
+    const validCSSUnits = /(px|em|rem|%|vh|vw|vmin|vmax|ex|ch|cm|mm|in|pt|pc)$/i;
+    if (validCSSUnits.test(String(value))) {
+        return value;
+    }
+    return `${pxToRem(value)}rem`;
+}
+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;
+};
 
 const spacing$1 = {
     "squid-xxs": "0.3125rem", // 5px
@@ -3063,6 +3096,15 @@ const backgrounds = {
     rgba(223, 159, 196, 1) 91.82%,
     rgba(180, 143, 233, 1) 100%
   )`,
+    shimmer: "linear-gradient(90deg, currentColor 0%, currentColor 50%, rgba(255, 255, 255, 0.4) 57.5%, currentColor 65%, currentColor 100%)",
+    "shimmer-light": `linear-gradient(90deg, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-100"].cssVariable}) 40%, transparent) 0%, var(${themeKeysToCssVariables.color["grey-100"].cssVariable}) 10%, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-100"].cssVariable}) 40%, transparent) 60%)`,
+    "shimmer-dark": `linear-gradient(90deg, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-900"].cssVariable}) 40%, transparent) 0%, var(${themeKeysToCssVariables.color["grey-900"].cssVariable}) 10%, color-mix(in srgb, var(${themeKeysToCssVariables.color["grey-900"].cssVariable}) 40%, transparent) 60%)`,
+    "loading-gradient": `linear-gradient(
+       to right,
+       var(${themeKeysToCssVariables.color["material-light-thin"].cssVariable}) 43%,
+       var(--mid-color) 52%,
+       var(${themeKeysToCssVariables.color["material-light-thin"].cssVariable}) 56%
+     )`,
 };
 // Format animation durations object to Tailwind config
 // This way Tailwind can generate utility classes for each duration
@@ -3280,6 +3322,37 @@ const baseTailwindConfig = {
                         opacity: "1",
                     },
                 },
+                shimmer: {
+                    "0%": {
+                        backgroundPosition: "100% center",
+                    },
+                    "100%": {
+                        backgroundPosition: "-100% center",
+                    },
+                },
+                "loading-gradient-scroll": {
+                    "0%": {
+                        transform: "translateX(-56%)",
+                    },
+                    "100%": {
+                        transform: "translateX(0)",
+                    },
+                },
+                "squid-animated-loader-dash-grow": {
+                    "0%": {
+                        "stroke-dasharray": "62.827" /* 1/4 circle visible */,
+                        "stroke-dashoffset": "0" /* Starting from the beginning of the path */,
+                    },
+                    "100%": {
+                        "stroke-dasharray": "4141.884" /* 1/2 circle visible */,
+                        "stroke-dashoffset": "-20.942" /* Move the beginning of the path to make it grow */,
+                    },
+                },
+                "rotate-360": {
+                    to: {
+                        transform: "rotate(360deg)",
+                    },
+                },
             },
             animation: {
                 "move-to-right-with-spring-bounce": `move-to-right-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
@@ -3302,6 +3375,10 @@ const baseTailwindConfig = {
                 "display-delayed": `display 0s var(${CSS_VARS.DISPLAY_DELAYED_DURATION}, 0s) ease-out both`,
                 hide: `hide 0s ease-out forwards`,
                 "move-loading-cover-to-right": "move-loading-cover-to-right 1.4s linear infinite",
+                shimmer: "shimmer 1.5s linear infinite",
+                "loading-gradient-scroll": "loading-gradient-scroll 1s ease-in-out both infinite",
+                "squid-animated-loader-dash-grow": "squid-animated-loader-dash-grow var(--squid-loader-rotate-duration) infinite alternate ease-in-out",
+                "squid-animated-loader": "rotate-360 var(--squid-loader-rotate-duration) linear infinite",
             },
             opacity: {
                 33: "0.33",
@@ -3368,6 +3445,57 @@ const baseTailwindConfig = {
                 ".h-d-screen": {
                     height: "100dvh",
                 },
+                ".assets-button-mask": {
+                    "mask-image": 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA3MiA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMjBDMCAxNC44ODE2IDEuOTUyNjIgOS43NjMxMSA1Ljg1Nzg2IDUuODU3ODZDOS43NjMwOSAxLjk1MjY0IDE0Ljg4MTUgMi4yMDcwMmUtMDUgMTkuOTk5OSAxLjg3MzU2ZS0xMEMyNS4xMTg0IC0yLjIwNjkxZS0wNSAzMC4yMzY5IDEuOTUyNiAzNC4xNDIxIDUuODU3ODZDMzQuNjY5NiA2LjM4NTI5IDM1LjE4NzkgNi45MTg3MyAzNS43MDExIDcuNDQ2OTVDMzguOTg4OCAxMC44MzA2IDQyLjA2ODMgMTQgNDYgMTRDNDkuOTMxNyAxNCA1My4wMTEyIDEwLjgzMDYgNTYuMjk4OSA3LjQ0Njk1QzU2LjgxMjEgNi45MTg3MyA1Ny4zMzA0IDYuMzg1MjkgNTcuODU3OSA1Ljg1Nzg2QzYxLjc2MzEgMS45NTI2IDY2Ljg4MTYgLTIuMjA2OTFlLTA1IDcyLjAwMDEgMS44NzM1NmUtMTBWNDBDNjYuODgxNiA0MCA2MS43NjMxIDM4LjA0NzQgNTcuODU3OSAzNC4xNDIxQzU3LjMzMzEgMzMuNjE3MSA1Ni44MTc0IDMzLjA4NjEgNTYuMzA2NSAzMi41NjAyQzUzLjAxNzQgMjkuMTc0IDQ5LjkzNDQgMjYgNDYgMjZDNDIuMDY1NiAyNiAzOC45ODI2IDI5LjE3NCAzNS42OTM1IDMyLjU2MDJDMzUuMTgyNiAzMy4wODYxIDM0LjY2NjkgMzMuNjE3MSAzNC4xNDIxIDM0LjE0MjFDMzAuMjM2OSAzOC4wNDc0IDI1LjExODQgNDAgMTkuOTk5OSA0MEMxNC44ODE1IDQwIDkuNzYzMDkgMzguMDQ3NCA1Ljg1Nzg2IDM0LjE0MjFDMS45NTI2MiAzMC4yMzY5IDAgMjUuMTE4NCAwIDIwWiIgZmlsbD0iI0ZCRkJGRCIgc3R5bGU9ImZpbGw6I0ZCRkJGRDtmaWxsOmNvbG9yKGRpc3BsYXktcDMgMC45ODQwIDAuOTg2MSAwLjk5MDQpO2ZpbGwtb3BhY2l0eToxOyIvPgo8L3N2Zz4=")',
+                    "mask-repeat": "no-repeat",
+                },
+                li: {
+                    "list-style-type": "none",
+                },
+                ".squid-property-gradient-bg-odd-container .squid-property-row-bg:nth-child(odd) > :is(div, button)": {
+                    background: `linear-gradient(
+    91deg,
+    /* grey-100 with 0.05 opacity */ var(${themeKeysToCssVariables.color["grey-100-005"].cssVariable}) 0%,
+    transparent 100%
+  )`,
+                },
+                ".squid-property-gradient-bg-even-container .squid-property-row-bg:nth-child(even) > :is(div, button)": {
+                    background: `linear-gradient(
+    91deg,
+    /* grey-100 with 0.05 opacity */ var(${themeKeysToCssVariables.color["grey-100-005"].cssVariable}) 0%,
+    transparent 100%
+  )`,
+                },
+                ":focus-visible": {
+                    "@apply tw-outline tw-outline-2 tw-outline-royal-500": {},
+                },
+                ":invalid": {
+                    "@apply tw-outline-status-negative": {},
+                },
+                ":disabled": {
+                    cursor: "not-allowed",
+                },
+                "*, *::before, *::after": {
+                    boxSizing: "border-box",
+                },
+                "input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
+                    "-webkit-appearance": "none",
+                    margin: "0",
+                },
+                "input[type='number']": {
+                    "-moz-appearance": "textfield",
+                },
+                "#squid-lottie-animation #keystroke": {
+                    stroke: `var(${themeKeysToCssVariables.color["animation-text"].cssVariable})`,
+                },
+                "#squid-lottie-animation #keyfill": {
+                    fill: `var(${themeKeysToCssVariables.color["animation-bg"].cssVariable})`,
+                },
+                ".squid-animated-loader-dash": {
+                    "@apply tw-animate-squid-animated-loader-dash-grow": {},
+                    "stroke-dasharray": "20.942, 62.827" /* Initial visible part: 1/4 circle */,
+                    "stroke-dashoffset": "0",
+                },
             });
         }),
     ],
@@ -3663,12 +3791,17 @@ function BadgeImage({ image, badge, extraMarginForBadge = false, className, }) {
 
 const LoadingContext = React$1.createContext(false);
 const LoadingProvider = LoadingContext.Provider;
+const loadingGradientClassName = "tw-relative tw-overflow-hidden [--mid-color:transparent] data-[squid-theme-type=dark]:[--mid-color:var(--st-color-material-light-average)] after:tw-content-[''] after:tw-absolute after:tw-block after:tw-top-0 after:tw-left-0 after:tw-h-full after:tw-w-[230%] after:tw-animate-loading-gradient-scroll after:tw-bg-loading-gradient";
 function LoadingSkeleton({ className, height = "20", isLoading: isLoadingProp, children, width = "100", }) {
     const contextValue = React$1.useContext(LoadingContext);
     const isLoading = isLoadingProp !== null && isLoadingProp !== void 0 ? isLoadingProp : contextValue;
     if (children && !isLoading)
         return children;
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 100 20", fill: "none", className: className, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1246_29063)", children: jsxRuntime.jsx("rect", { width: "100", height: "20", fill: "url(#paint0_linear_1246_29063)" }) }), jsxRuntime.jsxs("defs", { children: [jsxRuntime.jsxs("linearGradient", { id: "paint0_linear_1246_29063", x1: "0", y1: "10", x2: "100", y2: "10", gradientUnits: "userSpaceOnUse", className: "tw-animate-loading-gradient tw-text-material-light-thin", children: [jsxRuntime.jsx("stop", { stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.395881", stopColor: "currentColor" }), jsxRuntime.jsx("stop", { offset: "0.597867", stopColor: "currentColor", className: "group-data-[squid-theme-type=dark]:tw-text-material-light-average group-data-[squid-theme-type=light]:tw-text-transparent" }), jsxRuntime.jsx("stop", { offset: "0.697004", stopColor: "currentColor" })] }), jsxRuntime.jsx("clipPath", { id: "clip0_1246_29063", children: jsxRuntime.jsx("path", { d: "M0 10C0 4.47715 4.47715 0 10 0H90C95.5228 0 100 4.47715 100 10C100 15.5228 95.5229 20 90 20H10C4.47716 20 0 15.5228 0 10Z", fill: "white" }) })] })] }));
+    return (jsxRuntime.jsx("div", { className: cn("tw-animate-shimmer tw-rounded-full tw-bg-shimmer tw-text-material-light-thin [--gradient-middle-color:transparent] group-data-[squid-theme-type='dark']:[--gradient-middle-color:rgba(255,255,255,0.5)]", className), style: {
+            backgroundSize: "200% 100%",
+            width: formatCSSValue(width),
+            height: formatCSSValue(height),
+        } }));
 }
 function TextSkeleton(_a) {
     var { className, width = ["4em", "6em"], children, isLoading } = _a, props = __rest$1(_a, ["className", "width", "children", "isLoading"]);
@@ -3679,7 +3812,7 @@ function TextSkeleton(_a) {
     const t = React$1.useMemo(Math.random, []);
     if (isLoading === false)
         return children;
-    return (jsxRuntime.jsx("span", Object.assign({ className: cn("loading-gradient tw-inline-flex tw-rounded-full", className), style: {
+    return (jsxRuntime.jsx("span", Object.assign({ className: cn("tw-inline-flex tw-rounded-full", loadingGradientClassName, className), style: {
             ["--min-width"]: minWidth,
             ["--max-width"]: maxWidth,
             width: calcLerp(`var(${minWidthVar})`, `var(${maxWidthVar})`, t),
@@ -3689,7 +3822,7 @@ function BlockSkeleton(_a) {
     var { isLoading, className, children } = _a, props = __rest$1(_a, ["isLoading", "className", "children"]);
     if (isLoading === false)
         return children;
-    return (jsxRuntime.jsx("div", Object.assign({ className: cn("loading-gradient tw-rounded-squid-s", className) }, props)));
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn("tw-rounded-squid-s", loadingGradientClassName, className) }, props)));
 }
 
 // font size, line height, and letter spacing classes
@@ -4173,8 +4306,8 @@ function Loader(_a) {
     var { size = "24", strokeWidth = "2", className, rotateDuration = "0.8s" } = _a, props = __rest$1(_a, ["size", "strokeWidth", "className", "rotateDuration"]);
     return (jsxRuntime.jsxs("svg", Object.assign({ width: size, height: size, viewBox: "0 0 32 32", fill: "none" }, props, { style: {
             "--squid-loader-rotate-duration": rotateDuration,
-        }, className: cn("squid-animated-loader", className), children: [jsxRuntime.jsx("style", { children: `
-` }), jsxRuntime.jsxs("g", { id: "Spinner", children: [jsxRuntime.jsx("circle", { id: "Groove", cx: "16.0001", cy: "16", r: "13.3333", stroke: "currentColor", strokeOpacity: "0.1", strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { className: "squid-animated-loader-dash", d: "M16,2.66666 A13.3334,13.3334 0 0,1 16,29.3334", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round" })] })] })));
+        }, className: cn("tw-animate-squid-animated-loader", className), children: [jsxRuntime.jsx("style", { children: `
+` }), jsxRuntime.jsxs("g", { id: "Spinner", children: [jsxRuntime.jsx("circle", { id: "Groove", cx: "16.0001", cy: "16", r: "13.3333", stroke: "currentColor", strokeOpacity: "0.1", strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { className: "tw-squid-animated-loader-dash", d: "M16,2.66666 A13.3334,13.3334 0 0,1 16,29.3334", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round" })] })] })));
 }
 
 function MarketCapIcon({ size = "20", className, }) {
@@ -4192,6 +4325,16 @@ function NotAllowedIcon() {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16", children: jsxRuntime.jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2", d: "M12.243 3.757a6 6 0 00-8.485 8.485m8.485-8.485a6 6 0 11-8.485 8.485m8.485-8.485l-8.486 8.486" }) }));
 }
 
+function GooglePayIcon({ className, size = "40", }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 40 40", fill: "none", className: className, children: [jsxRuntime.jsx("rect", { width: "40", height: "40", fill: "white" }), jsxRuntime.jsx("path", { d: "M31.9805 20.2842C31.9805 19.3978 31.901 18.5454 31.7532 17.7273H19.9805V22.5682H26.7077C26.4122 24.125 25.5258 25.4432 24.1963 26.3295V29.4773H28.2532C30.6168 27.2954 31.9805 24.0909 31.9805 20.2842Z", fill: "#4285F4" }), jsxRuntime.jsx("path", { d: "M19.9775 32.4999C23.3525 32.4999 26.182 31.3862 28.2502 29.4771L24.1934 26.3294C23.0797 27.0794 21.6592 27.534 19.9775 27.534C16.7275 27.534 13.9661 25.3407 12.9774 22.3862H8.81836V25.6135C10.8752 29.6931 15.0911 32.4999 19.9775 32.4999Z", fill: "#34A853" }), jsxRuntime.jsx("path", { d: "M12.9805 22.375C12.7305 21.625 12.5827 20.8295 12.5827 20C12.5827 19.1704 12.7305 18.375 12.9805 17.625V14.3977H8.82137C7.96909 16.0795 7.48047 17.9773 7.48047 20C7.48047 22.0228 7.96909 23.9205 8.82137 25.6023L12.06 23.0795L12.9805 22.375Z", fill: "#FABB05" }), jsxRuntime.jsx("path", { d: "M19.9775 12.4773C21.8184 12.4773 23.4547 13.1136 24.7615 14.3409L28.3411 10.7614C26.1706 8.73864 23.3525 7.5 19.9775 7.5C15.0911 7.5 10.8752 10.3068 8.81836 14.3977L12.9774 17.625C13.9661 14.6705 16.7275 12.4773 19.9775 12.4773Z", fill: "#E94235" })] }));
+}
+function ApplePayIcon({ className, size = "40", }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 40 40", fill: "none", className: className, children: [jsxRuntime.jsx("rect", { width: "40", height: "40", fill: "black" }), jsxRuntime.jsx("path", { d: "M30.0044 13.9477C29.1463 14.473 28.4356 15.2074 27.9387 16.0822C27.4418 16.957 27.175 17.9436 27.1632 18.9496C27.1666 20.0819 27.502 21.1883 28.128 22.1318C28.754 23.0753 29.643 23.8144 30.6849 24.2576C30.2741 25.583 29.6661 26.839 28.8814 27.9835C27.7587 29.5998 26.5846 31.2159 24.7983 31.2159C23.012 31.2159 22.5526 30.1781 20.494 30.1781C18.4865 30.1781 17.7719 31.25 16.1386 31.25C14.5053 31.25 13.3656 29.7528 12.0555 27.9154C10.325 25.3415 9.37391 22.3228 9.31641 19.2218C9.31641 14.1178 12.634 11.4128 15.9004 11.4128C17.6358 11.4128 19.082 12.5526 20.1708 12.5526C21.2086 12.5526 22.8249 11.3446 24.7983 11.3446C25.813 11.3185 26.8185 11.5422 27.7264 11.9961C28.6342 12.45 29.4165 13.1202 30.0044 13.9477ZM23.8627 9.18408C24.7326 8.16073 25.2251 6.86987 25.2578 5.52713C25.2592 5.35012 25.2421 5.17344 25.2067 5C23.7124 5.14597 22.3306 5.85819 21.3447 6.99057C20.4663 7.97314 19.9553 9.22953 19.8985 10.5462C19.8992 10.7063 19.9163 10.866 19.9496 11.0226C20.0674 11.0449 20.187 11.0563 20.3069 11.0567C20.9955 11.0019 21.6659 10.8076 22.2772 10.4857C22.8884 10.1638 23.4279 9.72095 23.8627 9.18408Z", fill: "#FBFBFD" })] }));
+}
+function CreditCardIcon({ className, size = "30", }) {
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 30 30", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M6.25 5C4.17893 5 2.5 6.67893 2.5 8.75L2.5 11.25L27.5 11.25V8.74969C27.5 6.67842 25.8209 5 23.75 5L6.25 5Z", fill: "currentColor" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.5 21.25L2.5 13.75L27.5 13.75L27.5 21.25C27.5 23.3211 25.8211 25 23.75 25L6.25 25C4.17893 25 2.5 23.3211 2.5 21.25ZM8.75 16.25C8.05964 16.25 7.5 16.8096 7.5 17.5C7.5 18.1904 8.05964 18.75 8.75 18.75H12.5C13.1904 18.75 13.75 18.1904 13.75 17.5C13.75 16.8096 13.1904 16.25 12.5 16.25H8.75Z", fill: "currentColor" })] }));
+}
+
 function PercentIcon({ size = "24", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className, children: [jsxRuntime.jsx("path", { d: "M15.5 8.5L8.5 15.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M9 9.875C9.48325 9.875 9.875 9.48325 9.875 9C9.875 8.51675 9.48325 8.125 9 8.125C8.51675 8.125 8.125 8.51675 8.125 9C8.125 9.48325 8.51675 9.875 9 9.875Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M15 15.875C15.4832 15.875 15.875 15.4832 15.875 15C15.875 14.5168 15.4832 14.125 15 14.125C14.5168 14.125 14.125 14.5168 14.125 15C14.125 15.4832 14.5168 15.875 15 15.875Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
@@ -4373,14 +4516,23 @@ const priceChangeSignToIconMap = {
     [PriceChangeSign.NEGATIVE]: (jsxRuntime.jsx(ArrowTriangle, { className: "tw-text-status-negative" })),
     [PriceChangeSign.NEUTRAL]: jsxRuntime.jsx(PauseIcon, {}),
 };
-function PriceChange({ value: rawValue = 0, variant = "small", }) {
+const priceChangeSignToTextColorMap = {
+    [PriceChangeSign.POSITIVE]: "tw-text-status-positive",
+    [PriceChangeSign.NEGATIVE]: "tw-text-status-negative",
+    [PriceChangeSign.NEUTRAL]: "tw-text-grey-500",
+};
+function PriceChange({ value: rawValue = 0, variant = "small", highlightText = false, triangle = "suffix", }) {
     const valueFormatted = Math.abs(Number(rawValue)).toFixed(2);
     const sign = Number(rawValue) > 0
         ? PriceChangeSign.POSITIVE
         : Number(rawValue) < 0
             ? PriceChangeSign.NEGATIVE
             : PriceChangeSign.NEUTRAL;
-    return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-xs tw-items-center tw-justify-end tw-text-grey-500", children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center", children: [variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsxRuntime.jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px] tw-text-grey-600", children: "%" }), priceChangeSignToIconMap[sign]] }) }));
+    const textColorClass = highlightText
+        ? priceChangeSignToTextColorMap[sign]
+        : "tw-text-grey-500";
+    const triangleElement = triangle !== "none" ? priceChangeSignToIconMap[sign] : null;
+    return (jsxRuntime.jsx("div", { className: cn("tw-flex tw-h-squid-xs tw-items-center tw-justify-end", textColorClass), children: jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-center tw-gap-[2px]", children: [triangle === "prefix" && triangleElement, variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: valueWrapperClassName, children: valueFormatted })) : (jsxRuntime.jsx(BodyText, { size: "small", className: valueWrapperClassName, children: valueFormatted })), variant === "small" ? (jsxRuntime.jsx(CaptionText, { className: cn("!tw-leading-[10px]", highlightText ? textColorClass : "tw-text-grey-600"), children: "%" })) : (jsxRuntime.jsx(BodyText, { size: "small", className: cn("!tw-leading-[10px]", highlightText ? textColorClass : "tw-text-grey-600"), children: "%" })), triangle === "suffix" && triangleElement] }) }));
 }
 
 const statusBgClassMap$1 = {
@@ -4471,6 +4623,23 @@ function ImageStack(_a) {
                 : undefined }, imageProps), index))) })));
 }
 
+const renderGradient = (variant) => {
+    switch (variant) {
+        case "primary":
+            return "group-data-[squid-theme-type=light]:tw-bg-shimmer-dark group-data-[squid-theme-type=dark]:tw-bg-shimmer-light";
+        case "secondary":
+            return "tw-bg-shimmer-dark";
+        default:
+            return "tw-bg-shimmer-light";
+    }
+};
+function LoadingText(_a) {
+    var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: cn("tw-animate-shimmer tw-bg-clip-text tw-text-transparent ", renderGradient(props.variant), className), style: {
+            backgroundSize: "200% 100%",
+        }, children: children })));
+}
+
 function Chip(_a) {
     var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
     const isInteractive = !!props.onClick;
@@ -4533,12 +4702,12 @@ const buttonVariantClassMap = {
 const buttonDisabledClass = "!tw-bg-grey-800 !tw-text-grey-600 tw-cursor-not-allowed";
 const loadingClassname = "tw-invisible tw-opacity-0";
 function Button$1(_a) {
-    var { label, disabled = false, size, variant, icon, link, isLoading = false, showLoader = false, loaderSize = "md", chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "showLoader", "loaderSize", "chip", "containerClassName", "anchorRef", "buttonRef"]);
+    var { label, disabled = false, size, variant, icon, link, isLoading = false, isShimmering = false, showLoader = false, loaderSize = "md", chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "isShimmering", "showLoader", "loaderSize", "chip", "containerClassName", "anchorRef", "buttonRef"]);
     const chipElement = chip != null ? (jsxRuntime.jsx(Chip, Object.assign({}, chip, { className: cn("tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10", chip.className) }))) : null;
+    const TextWrap = isShimmering ? LoadingText : "span";
     const children = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!disabled && !isLoading && (jsxRuntime.jsx(ButtonHoverOverlay, { className: buttonRoundedClassMap[size][variant] })), jsxRuntime.jsx("div", { className: "tw-relative tw-z-[5] tw-flex tw-items-center tw-justify-center tw-gap-squid-xxs", children: label == null && icon == null && !showLoader ? (props.children) : (jsxRuntime.jsxs("span", { className: cn("tw-flex tw-items-center tw-justify-center", size === "lg"
                         ? "tw-gap-squid-xs tw-px-squid-m"
-                        : "tw-gap-squid-xxs"), children: [showLoader && jsxRuntime.jsx(Loader, { size: loaderSizeMap[loaderSize] }), !isLoading && icon, label != null &&
-                            (size === "sm" ? (jsxRuntime.jsx(CaptionText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), children: label })) : (jsxRuntime.jsx(BodyText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), size: size === "lg" ? "medium" : "small", children: label })))] })) })] }));
+                        : "tw-gap-squid-xxs"), children: [showLoader && jsxRuntime.jsx(Loader, { size: loaderSizeMap[loaderSize] }), !isLoading && icon, label != null && (jsxRuntime.jsx(TextWrap, { variant: variant, children: size === "sm" ? (jsxRuntime.jsx(CaptionText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), children: label })) : (jsxRuntime.jsx(BodyText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), size: size === "lg" ? "medium" : "small", children: label })) }))] })) })] }));
     const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonWidthClassnameMap[size], buttonVariantClassMap[size][variant], "tw-border-material-light-thin", !disabled && !isLoading && "hover:tw-border-material-light-average", buttonRoundedClassMap[size][variant], 
     // disabled styles
     disabled && buttonDisabledClass, isLoading && "tw-cursor-not-allowed", 
@@ -7630,14 +7799,14 @@ function trimExtraDecimals(value, maxDecimals) {
 
 // checks that the value includes at least one character different than `0` (zero), or `.` (dot)
 const RegExpNonZeroValue = /[^0.]/;
-var UserInputType;
+exports.UserInputType = void 0;
 (function (UserInputType) {
     UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
     UserInputType[UserInputType["USD"] = 1] = "USD";
-})(UserInputType || (UserInputType = {}));
-function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, }) {
+})(exports.UserInputType || (exports.UserInputType = {}));
+function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode = exports.UserInputType.TOKEN, }) {
     const [inputValue, setInputValue] = React$1.useState("");
-    const [userInputType, setUserInputType] = React$1.useState(UserInputType.TOKEN);
+    const [userInputType, setUserInputType] = React$1.useState(initialInputMode);
     React$1.useEffect(() => {
         if (forcedAmount !== undefined) {
             updateInputValue(forcedAmount);
@@ -7645,7 +7814,7 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
     }, [forcedAmount]);
     const updateInputValue = React$1.useCallback((newValue) => {
         const safeNewValue = trimExtraDecimals(newValue, token.decimals);
-        const formattedAmount = userInputType === UserInputType.TOKEN
+        const formattedAmount = userInputType === exports.UserInputType.TOKEN
             ? safeNewValue
             : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
         setInputValue(formattedAmount);
@@ -7657,7 +7826,7 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
     const onAmountChangeDebounced = React$1.useCallback(debounce(onAmountChange, debounceInput ? 1000 : 0), [onAmountChange]);
     const handleInputChange = (e) => {
         const value = e.target.value.replace(/,/g, "."); // Replace commas with dots
-        const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
+        const maxDecimalsForInputType = userInputType === exports.UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
         const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
         if (isValidAmount) {
             setInputValue(value);
@@ -7675,14 +7844,14 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
     };
     const handleSwitchInputMode = () => {
         if (inputValue !== "") {
-            const convertedAmount = userInputType === UserInputType.TOKEN
+            const convertedAmount = userInputType === exports.UserInputType.TOKEN
                 ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
                 : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
             setInputValue(convertedAmount);
         }
-        setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
-            ? UserInputType.USD
-            : UserInputType.TOKEN);
+        setUserInputType((prevMode) => prevMode === exports.UserInputType.TOKEN
+            ? exports.UserInputType.USD
+            : exports.UserInputType.TOKEN);
     };
     const getRawAmounts = (amount) => {
         if (amount === "")
@@ -7692,7 +7861,7 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
                 isTokenAmountVerySmall: false,
                 isUsdAmountVerySmall: false,
             };
-        if (userInputType === UserInputType.TOKEN) {
+        if (userInputType === exports.UserInputType.TOKEN) {
             const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
             const tokenRawAmount = amount;
             const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -7732,7 +7901,7 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
         var _a;
         if (isNaN(Number(inputValue)) || inputValue === "")
             return "0";
-        if (userInputType === UserInputType.TOKEN) {
+        if (userInputType === exports.UserInputType.TOKEN) {
             if (direction === "from") {
                 return formatUsdAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals), {
                     includeSign: false,
@@ -7758,9 +7927,9 @@ function useNumericInput({ onAmountChange, token, balance, debounceInput, forced
     ]);
     const balanceFormatted = React$1.useMemo(() => {
         switch (userInputType) {
-            case UserInputType.TOKEN:
+            case exports.UserInputType.TOKEN:
                 return formatTokenAmount(balance !== null && balance !== void 0 ? balance : "0");
-            case UserInputType.USD:
+            case exports.UserInputType.USD:
                 return formatUsdAmount(convertTokenAmountToUSD(balance !== null && balance !== void 0 ? balance : "0", token === null || token === void 0 ? void 0 : token.price), {
                     includeSign: false,
                 });
@@ -9661,18 +9830,18 @@ function LargeNumericInput({ balance = "0", token, onAmountChange, forcedAmount,
         };
     }, []);
     const isBalanceButtonInteractive = Number(balance) > 0;
-    return (jsxRuntime.jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-m tw-pb-squid-m", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-[4.40625rem] tw-text-royal-500", children: jsxRuntime.jsxs("label", { className: "tw-flex tw-min-w-squid-xl 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: [jsxRuntime.jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: inputValue || placeholder }), userInputType === UserInputType.USD && jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: inputValue, onChange: handleInputChange, className: cn("tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", userInputType === UserInputType.USD &&
-                                "tw-max-w-[calc(100%-3.125rem)]"), placeholder: placeholder })] }) }), jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-self-stretch tw-text-grey-500", children: [jsxRuntime.jsx("div", { className: "tw-flex-1", children: jsxRuntime.jsx(Tooltip, Object.assign({}, (userInputType === UserInputType.TOKEN
+    return (jsxRuntime.jsxs("section", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-squid-m tw-pb-squid-m", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-w-full tw-flex-1 tw-items-center tw-justify-center tw-self-stretch tw-text-[4.40625rem] tw-text-royal-500", children: jsxRuntime.jsxs("label", { className: "tw-flex tw-min-w-squid-xl 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: [jsxRuntime.jsx("span", { ref: inputValueSpyRef, className: "tw-pointer-events-none tw-absolute tw-opacity-0", children: inputValue || placeholder }), userInputType === exports.UserInputType.USD && jsxRuntime.jsx("span", { children: "$" }), jsxRuntime.jsx("input", { inputMode: "decimal", pattern: "[0-9.,]*", ref: inputRef, value: inputValue, onChange: handleInputChange, className: cn("tw-bg-transparent tw-placeholder-royal-500 tw-outline-none focus:tw-outline-none", userInputType === exports.UserInputType.USD &&
+                                "tw-max-w-[calc(100%-3.125rem)]"), placeholder: placeholder })] }) }), jsxRuntime.jsxs("footer", { className: "tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-self-stretch tw-text-grey-500", children: [jsxRuntime.jsx("div", { className: "tw-flex-1", children: jsxRuntime.jsx(Tooltip, Object.assign({}, (userInputType === exports.UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
                             : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s tw-w-fit", children: jsxRuntime.jsxs("button", { onClick: () => {
                                     var _a;
                                     handleSwitchInputMode();
                                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                }, className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, { size: "20" }), userInputType === UserInputType.TOKEN ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-justify-center", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? "<" : "", "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                                }, className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-py-squid-xxs hover:tw-bg-material-light-thin", children: [jsxRuntime.jsx(SwapInputsIcon, { size: "20" }), userInputType === exports.UserInputType.TOKEN ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-justify-center", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? "<" : "", "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
                                                     ? formatIfVerySmall.token
                                                     : amountFormatted })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(CaptionText, { children: [isTokenAmountVerySmall ? "<" : "", isTokenAmountVerySmall
                                                         ? formatIfVerySmall.token
-                                                        : amountFormatted] }), " ", jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] }))] }) })) }), jsxRuntime.jsx(Tooltip, Object.assign({}, (isBalanceButtonInteractive ? balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip : undefined), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs("button", { disabled: !isBalanceButtonInteractive, onClick: onBalanceButtonClick, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs", isBalanceButtonInteractive && "hover:tw-bg-material-light-thin"), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs("div", { children: [userInputType === UserInputType.USD && (jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsxRuntime.jsx(CaptionText, { children: balanceFormatted })] }), jsxRuntime.jsx(Chip, { className: "tw-text-grey-900", label: "Max" })] }) }))] })] }));
+                                                        : amountFormatted] }), " ", jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] }))] }) })) }), jsxRuntime.jsx(Tooltip, Object.assign({}, (isBalanceButtonInteractive ? balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip : undefined), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs("button", { disabled: !isBalanceButtonInteractive, onClick: onBalanceButtonClick, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs", isBalanceButtonInteractive && "hover:tw-bg-material-light-thin"), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs("div", { children: [userInputType === exports.UserInputType.USD && (jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsxRuntime.jsx(CaptionText, { children: balanceFormatted })] }), jsxRuntime.jsx(Chip, { className: "tw-text-grey-900", label: "Max" })] }) }))] })] }));
 }
 
 /*! *****************************************************************************
@@ -20051,24 +20220,19 @@ function LogoContainer({ children }) {
     return (jsxRuntime.jsx("div", { className: "tw-flex tw-h-[60px] tw-w-[60px] tw-items-center tw-justify-center", children: children }));
 }
 
-function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, }) {
-    var _a, _b;
-    const isWalletButtonInteractive = !isLoading && !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick);
-    const WalletButtonTag = isWalletButtonInteractive ? "button" : "div";
+const AddressHeader = ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel = true, highlightLabel = false, showIcon = true, }) => {
+    const ButtonTag = onClick && !isDisabled ? "button" : "div";
+    return (jsxRuntime.jsx("header", { className: "tw-flex tw-h-squid-xl2 tw-items-center tw-self-stretch tw-px-squid-m tw-py-squid-xxs", children: jsxRuntime.jsx(Tooltip, { tooltipContent: tooltip, tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(ButtonTag, { onClick: onClick, disabled: isDisabled, type: onClick ? "button" : undefined, className: cn("tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs", onClick && !isDisabled && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-500", children: direction === "from" ? "Pay" : "Receive" }), displayLabel && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-600", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [showIcon &&
+                                        (walletIconUrl ? (jsxRuntime.jsx(Image$1, { width: 24, height: 24, rounded: "xxs", src: walletIconUrl })) : (jsxRuntime.jsx("div", { className: "tw-flex tw-h-6 tw-w-6 tw-items-center tw-justify-center tw-rounded-lg tw-bg-royal-500 tw-px-0.5 tw-outline tw-outline-1 tw-outline-material-light-thin", children: jsxRuntime.jsx(WalletFilledIcon, { size: "18" }) }))), jsxRuntime.jsx(BodyText, { size: "small", className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-300"), children: label }), jsxRuntime.jsx(ChevronArrowIcon, { className: cn(highlightLabel ? "tw-text-royal-500" : "tw-text-grey-600"), size: "16" })] })] }))] }) }) }));
+};
+function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp = false, chain, token, direction = "from", onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive = true, isLoading = false, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails = true, fullHeight = true, debounceInput = true, showWalletButtonHeader = true, }) {
+    var _a, _b, _c, _d;
     const isFetching = isFetchingProp || isLoading;
-    const showWalletButtonLabel = !isLoading &&
-        !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled) &&
-        !!token &&
-        (!!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) || !!(walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel));
-    return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx("header", { className: "tw-flex tw-items-center tw-gap-1 tw-px-squid-m tw-py-squid-xs tw-leading-5 tw-text-grey-300 mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(Tooltip, Object.assign({}, walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip, { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(WalletButtonTag, { onClick: isWalletButtonInteractive ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick : undefined, className: cn("-tw-ml-squid-xs tw-flex tw-h-squid-l tw-items-center tw-gap-squid-xxs tw-rounded-squid-s tw-px-squid-xs tw-text-grey-600", isWalletButtonInteractive && "hover:tw-bg-material-light-thin", isLoading && "tw-opacity-50"), children: [jsxRuntime.jsx(BodyText, { className: "tw-text-grey-500", size: "small", children: direction === "from" ? "Pay" : "Receive" }), showWalletButtonLabel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", children: ":" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [jsxRuntime.jsx(BodyText, { size: "small", className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
-                                                    ? "tw-text-grey-300"
-                                                    : "tw-text-royal-500", children: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
-                                                    ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
-                                                    : walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
-                                                    ? "tw-text-grey-600"
-                                                    : "tw-text-royal-500" })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsxRuntime.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 : "",
+    return (jsxRuntime.jsxs("section", { className: cn("tw-relative tw-flex tw-w-full tw-flex-col tw-border-t tw-border-t-material-light-thin tw-bg-grey-900 mobile-lg:tw-w-card-large", fullHeight && "tw-h-full tw-pb-squid-m"), children: [jsxRuntime.jsx(AddressHeader, { direction: direction, onClick: walletButton === null || walletButton === void 0 ? void 0 : walletButton.onClick, isDisabled: walletButton === null || walletButton === void 0 ? void 0 : walletButton.disabled, tooltip: (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, label: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address) ||
+                    (walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) ||
+                    (direction === "from" ? "Connect wallet" : "Select recipient"), walletIconUrl: walletButton === null || walletButton === void 0 ? void 0 : walletButton.walletIconUrl, isLoading: isLoading, displayLabel: showWalletButtonHeader, highlightLabel: !(walletButton === null || walletButton === void 0 ? void 0 : walletButton.address), showIcon: (_b = walletButton === null || walletButton === void 0 ? void 0 : walletButton.showIcon) !== null && _b !== void 0 ? _b : true }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
+                    decimals: (_c = token === null || token === void 0 ? void 0 : token.decimals) !== null && _c !== void 0 ? _c : 18,
+                    symbol: (_d = token === null || token === void 0 ? void 0 : token.symbol) !== null && _d !== void 0 ? _d : "",
                     price: tokenPrice,
                 }, onAmountChange: (value) => {
                     onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(value);
@@ -20094,6 +20258,28 @@ function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, acti
                 }, badge: badge })) : (jsxRuntime.jsx(ImageGroup, { imageUrls: imageUrls, badge: badge })), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-start tw-gap-squid-xs", children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px]", children: title }), jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-[13px] !tw-leading-[13px] tw-text-grey-500", children: subtitle })] }), jsxRuntime.jsx("menu", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: actions })] }));
 }
 
+function useCollapsibleMenu() {
+    const [isMenuOpen, setIsMenuOpen] = React$1.useState(false);
+    const menuRef = React$1.useRef(null);
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+    React$1.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsMenuOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return {
+        isMenuOpen,
+        toggleMenu,
+        menuRef,
+    };
+}
+
 const SPACING = 10;
 function useDropdownMenu(props) {
     const { initialIsDropdownOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
@@ -20250,28 +20436,6 @@ function useMediaQuery(query, { defaultValue = false, initializeWithValue = true
     return matches;
 }
 
-function useCollapsibleMenu() {
-    const [isMenuOpen, setIsMenuOpen] = React$1.useState(false);
-    const menuRef = React$1.useRef(null);
-    const toggleMenu = () => {
-        setIsMenuOpen(!isMenuOpen);
-    };
-    React$1.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
-                setIsMenuOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    return {
-        isMenuOpen,
-        toggleMenu,
-        menuRef,
-    };
-}
-
 const useTimer = ({ immediateStart = true, }) => {
     const [timer, setTimer] = React$1.useState("0s");
     const intervalRef = React$1.useRef(null);
@@ -20603,7 +20767,7 @@ function PropertyListItem(_a) {
     const Text = variant === "small" ? CaptionText : SmallBodyText;
     const isCollapsible = !!collapsibleContent;
     const ContentWrapperTag = isCollapsible ? "button" : "div";
-    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "squid-property-row-bg", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
+    return (jsxRuntime.jsx("li", Object.assign({}, props, { className: cn("tw-flex tw-w-full tw-gap-squid-xs tw-rounded-squid-xs tw-text-grey-300", showGradientBg && "tw-squid-property-row-bg", addExtraPadding && containerPaddingClassNameMap[variant], className), children: jsxRuntime.jsxs(ContentWrapperTag, { onClick: isCollapsible ? handleToggleCollapsed : undefined, className: "tw-w-full tw-rounded-squid-xs", children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-h-squid-l tw-w-full tw-items-center tw-justify-between tw-gap-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsxs(Text, { className: cn("tw-flex tw-min-w-fit tw-flex-1 tw-gap-squid-xxs tw-text-grey-500", labelClassName), children: [jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }), !!tooltip && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { children: jsxRuntime.jsx(HelpIcon, { className: "tw-cursor-help tw-text-grey-600 hover:tw-text-grey-500" }) })))] }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) }), isCollapsible && (jsxRuntime.jsx(ChevronLargeRightIcon, { className: cn("tw-text-grey-600 tw-duration-generic", !isCollapsed && "tw-rotate-90"), size: "16" }))] }), isCollapsible && (jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: collapsibleContent }))] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -27070,7 +27234,7 @@ function UnsupportedPairNotice({ description, fromImageUrl, toImageUrl, }) {
     return (jsxRuntime.jsxs("article", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xs -tw-space-x-[18px] tw-p-squid-xs", children: [jsxRuntime.jsx(Image$1, { src: fromImageUrl, size: "large", rounded: "xs" }), jsxRuntime.jsx("span", { className: "tw-z-[1] tw-rounded-full tw-bg-grey-900", children: jsxRuntime.jsx(CircleXFilledIcon, {}) }), jsxRuntime.jsx(Image$1, { src: toImageUrl, size: "large", rounded: "xs" })] }), jsxRuntime.jsx(CaptionText, { className: "tw-max-w-[260px] tw-text-balance tw-text-center tw-text-grey-500", children: description })] }));
 }
 
-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 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-h-[65px] mobile-sm-height:tw-h-[75px]";
 const buttonClassName = "tw-flex tw-h-squid-l tw-items-center tw-gap-1.5 tw-rounded-squid-s tw-px-squid-xs";
 const interactiveChipClassName = "hover:tw-bg-material-light-thin";
 const notInteractiveChipClassName = "tw-cursor-not-allowed";
@@ -27080,7 +27244,7 @@ function NumericInput(_a) {
     var { priceImpactPercentage, balance = "0", error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 2, formatIfVerySmall = {
         token: "0.001",
         usd: "0.01",
-    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, debounceInput = true } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton", "debounceInput"]);
+    }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, debounceInput = true, initialInputMode = exports.UserInputType.TOKEN, customSymbol, hideControls = false, hideBalance = false, containerClassName, inputClassName } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton", "debounceInput", "initialInputMode", "customSymbol", "hideControls", "hideBalance", "containerClassName", "inputClassName"]);
     const { userInputType, inputValue, handleInputChange, handleSwitchInputMode, isTokenAmountVerySmall, isUsdAmountVerySmall, amountFormatted, onBalanceButtonClick, balanceFormatted, } = useNumericInput({
         onAmountChange,
         token,
@@ -27091,6 +27255,7 @@ function NumericInput(_a) {
         inputModeButton,
         maxUsdDecimals,
         direction,
+        initialInputMode,
     });
     const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
     const AmountChip = isInteractive ? "button" : "div";
@@ -27099,11 +27264,35 @@ function NumericInput(_a) {
         : "tw-text-grey-300";
     const BalanceChipTag = balanceChipClickable ? "button" : "div";
     const inputRef = React$1.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
+    const symbolRef = React$1.useRef(null);
+    const [symbolWidth, setSymbolWidth] = React$1.useState(0);
+    const displaySymbol = customSymbol !== null && customSymbol !== void 0 ? customSymbol : (userInputType === exports.UserInputType.USD ? "$" : undefined);
+    // Calculate symbol width when it changes
+    React$1.useEffect(() => {
+        if (symbolRef.current && displaySymbol) {
+            const width = symbolRef.current.getBoundingClientRect().width;
+            setSymbolWidth(width);
+        }
+    }, [displaySymbol]);
+    // Calculate left padding based on symbol width plus some spacing
+    const getInputPadding = () => {
+        if (!displaySymbol)
+            return undefined;
+        const basePadding = 5; // Base padding in pixels
+        const totalPadding = Math.ceil(symbolWidth) + basePadding;
+        return `${totalPadding}px`;
+    };
+    return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-w-full tw-flex-col", children: [isLoading && (jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-top-squid-xxs tw-z-10 tw-overflow-hidden", children: jsxRuntime.jsx("div", { className: "tw-h-full tw-w-[78.75rem] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), isInteractive && !isLoading ? (jsxRuntime.jsx("form", { className: cn(containerClassname, containerClassName), onSubmit: (e) => {
                     e.preventDefault();
-                }, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.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))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.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: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
+                }, children: jsxRuntime.jsxs("span", { className: "tw-relative tw-w-full", children: [displaySymbol && (jsxRuntime.jsx("span", { ref: symbolRef, style: {
+                                transform: "translateY(-50%)",
+                            }, className: "tw-absolute tw-top-1/2 tw-pl-squid-xs tw-text-grey-600", children: displaySymbol })), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", style: displaySymbol
+                                ? {
+                                    paddingLeft: getInputPadding(),
+                                }
+                                : undefined, className: cn("tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent 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", displaySymbol ? "tw-pr-squid-xs" : "tw-px-squid-xs", inputClassName) }, props))] }) })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName, containerClassName), children: jsxRuntime.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: jsxRuntime.jsx("span", { children: inputValue }) }) })), !showDetails || hideControls ? null : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
                         ? undefined
-                        : userInputType === UserInputType.TOKEN
+                        : userInputType === exports.UserInputType.TOKEN
                             ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
                             : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(AmountChip, { onClick: isInteractive
                                 ? () => {
@@ -27113,15 +27302,15 @@ function NumericInput(_a) {
                                 }
                                 : undefined, className: cn(buttonClassName, isInteractive
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? "<" : "", "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
+                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), userInputType === exports.UserInputType.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? "<" : "", "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
                                                     ? formatIfVerySmall.token
                                                     : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? "<" : "", jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
                                                 ? formatIfVerySmall.token
                                                 : amountFormatted }), " ", jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: token.symbol })] })), priceImpactPercentage && direction === "to" ? (jsxRuntime.jsxs("span", { className: cn("tw-flex tw-items-center", priceImpactClass), children: [jsxRuntime.jsx(ArrowTriangle, { className: Number(priceImpactPercentage) === 0
                                                 ? "tw-opacity-0"
-                                                : "" }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat("%") })] })) : null] }) }))), jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(BalanceChipTag, { disabled: !balanceChipClickable, onClick: balanceChipClickable ? onBalanceButtonClick : undefined, className: cn(buttonClassName, balanceChipClickable
+                                                : "" }), jsxRuntime.jsx(CaptionText, { bold: true, children: priceImpactPercentage.toString().concat("%") })] })) : null] }) }))), !hideBalance && (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading ? undefined : balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.tooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(BalanceChipTag, { disabled: !balanceChipClickable, onClick: balanceChipClickable ? onBalanceButtonClick : undefined, className: cn(buttonClassName, balanceChipClickable
                                 ? interactiveChipClassName
-                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs("div", { children: [userInputType === UserInputType.USD && (jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsxRuntime.jsx(CaptionText, { children: balanceFormatted })] }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsxRuntime.jsx(Chip, { label: "Max" })] }) }))] }))] }));
+                                : notInteractiveChipClassName), children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "Balance" }), jsxRuntime.jsxs("div", { children: [userInputType === exports.UserInputType.USD && (jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" })), jsxRuntime.jsx(CaptionText, { children: balanceFormatted })] }), !(balanceButton === null || balanceButton === void 0 ? void 0 : balanceButton.hideMaxChip) && jsxRuntime.jsx(Chip, { label: "Max" })] }) })))] }))] }));
 }
 
 function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
@@ -27559,7 +27748,7 @@ function DepositAddressView({ isOpen = true, fromToken, toToken, handleClose, fr
                 }, borderType: "outline", children: [jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsxRuntime.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: jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsxRuntime.jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxRuntime.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: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsxRuntime.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: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-squid-xs tw-top-squid-xs", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", label: "Copy" }) }), headerContent] }), jsxRuntime.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: jsxRuntime.jsx(Image$1, { src: fromToken.logoUrl, rounded: "full", shadow: true, size: "xlarge" }) }), jsxRuntime.jsx(TxProgressViewHeader, { title: title, description: description, isWarning: true }), jsxRuntime.jsxs("ul", { className: "tw-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: [jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Deposit address", detail: jsxRuntime.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",
@@ -69010,7 +69199,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                             }, secondToken: {
                                 bgColor: toToken.bgColor,
                                 logoURI: toToken.logoUrl,
-                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.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: [jsxRuntime.jsx(PropertyListItem, { icon: isSendTransaction ? (jsxRuntime.jsx(ArrowRightUpCircleIcon, {})) : (jsxRuntime.jsx(ArrowsSwapIcon, {})), label: isSendTransaction ? "Send" : "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
+                            } })) }), jsxRuntime.jsx(TxProgressViewHeader, { title: headerTitle, description: headerDescription }), jsxRuntime.jsxs("ul", { className: "tw-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: [jsxRuntime.jsx(PropertyListItem, { icon: isSendTransaction ? (jsxRuntime.jsx(ArrowRightUpCircleIcon, {})) : (jsxRuntime.jsx(ArrowsSwapIcon, {})), label: isSendTransaction ? "Send" : "Swap", detail: isSendTransaction ? (jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsx(IconLabel, { src: fromToken.logoUrl, rounded: "full", children: fromAmount }), to: jsxRuntime.jsx(IconLabel, { src: toToken.logoUrl, rounded: "full", children: toAmount }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(ChainLink, { size: "24", strokeWidth: "2" }), label: "Chain", detail: isSendTransaction ? (jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] })) : (jsxRuntime.jsx(Transfer, { from: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: fromChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: fromChain.networkName })] }), to: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Image$1, { size: "medium", rounded: "xxs", src: toChain.logoUrl }), jsxRuntime.jsx(CaptionText, { children: toChain.networkName })] }) })) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(WalletFilledIcon, { size: "24" }), label: "Wallet", detail: jsxRuntime.jsx(Transfer, { from: fromAddressFormatted, to: toAddressFormatted }) }), jsxRuntime.jsx(PropertyListItem, { icon: jsxRuntime.jsx(TimeFliesIcon, {}), label: "Time to complete", detail: swapState === SwapState.PROGRESS ? (jsxRuntime.jsx(Transfer, { from: timer, to: estimatedTimeToComplete })) : swapState === SwapState.COMPLETED ? (jsxRuntime.jsx(CaptionText, { children: timer })) : (jsxRuntime.jsx(CaptionText, { children: estimatedTimeToComplete })) })] })] }), jsxRuntime.jsx(TrackTransactionView, { ref: trackTransactionViewRef, onTxEnd: () => {
                     stopTimer();
                 }, onTxStart: () => {
                     startTimer();
@@ -69370,16 +69559,6 @@ const parseSquidTheme = (userTheme, themeType) => {
         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";
@@ -69508,10 +69687,12 @@ exports.ActionRow = ActionRow;
 exports.ActionStatusRow = ActionStatusRow;
 exports.ActionWrapper = ActionWrapper;
 exports.AddressButton = AddressButton;
+exports.AddressHeader = AddressHeader;
 exports.AnimationCard = AnimationCard;
 exports.AnimationWrapper = AnimationWrapper;
 exports.Announcement = Announcement;
 exports.AppContainer = AppContainer;
+exports.ApplePayIcon = ApplePayIcon;
 exports.Approve = Approve;
 exports.ApproveAction = ApproveAction;
 exports.ArrowBottomTopIcon = ArrowBottomTopIcon;
@@ -69593,6 +69774,7 @@ exports.CompassRoundSolidIcon = CompassRoundSolidIcon;
 exports.ConsoleIcon = ConsoleIcon;
 exports.Copy2Icon = Copy2Icon;
 exports.CopyOutlinedIcon = CopyOutlinedIcon;
+exports.CreditCardIcon = CreditCardIcon;
 exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.CrossedOutSunSolidIcon = CrossedOutSunSolidIcon;
 exports.DashboardFast = DashboardFast;
@@ -69635,6 +69817,7 @@ exports.FilterTimelineIcon = FilterTimelineIcon;
 exports.GasIcon = GasIcon;
 exports.GhostIcon = GhostIcon;
 exports.GithubIcon = GithubIcon;
+exports.GooglePayIcon = GooglePayIcon;
 exports.HashLink = HashLink;
 exports.HeadingText = HeadingText;
 exports.HeartSmallIcon = HeartSmallIcon;
@@ -69829,6 +70012,7 @@ exports.transactionSuccessAnimation = transactionSuccessAnimation;
 exports.useCollapsibleMenu = useCollapsibleMenu;
 exports.useDropdownMenu = useDropdownMenu;
 exports.useMediaQuery = useMediaQuery;
+exports.useNumericInput = useNumericInput;
 exports.useOnResize = useOnResize;
 exports.useRect = useRect;
 exports.useTimer = useTimer;