@0xsquid/ui 2.6.2 → 2.6.4

package/dist/esm/index.js

@@ -97,6 +97,13 @@ const THEME_COLOR_KEYS = [
     "button-md-secondary-text",
     "button-md-tertiary-bg",
     "button-md-tertiary-text",
+    // sm button variant colors
+    "button-sm-primary-bg",
+    "button-sm-primary-text",
+    "button-sm-secondary-bg",
+    "button-sm-secondary-text",
+    "button-sm-tertiary-bg",
+    "button-sm-tertiary-text",
     // input colors
     "input-placeholder",
     "input-text",
@@ -126,12 +133,18 @@ const THEME_COLOR_KEYS = [
     "material-light-blend-grey-800",
 ];
 const THEME_BORDER_RADIUS_KEYS = [
+    // lg button
     "button-lg-primary",
     "button-lg-secondary",
     "button-lg-tertiary",
+    // md button
     "button-md-primary",
     "button-md-secondary",
     "button-md-tertiary",
+    // sm button
+    "button-sm-primary",
+    "button-sm-secondary",
+    "button-sm-tertiary",
     "container",
     "input",
     "menu-sm",
@@ -2933,6 +2946,19 @@ function mapToCssVariables(obj) {
         return acc;
     }, {});
 }
+/**
+ * Simple hash function to create a deterministic index from a given string.
+ * @param {string} str - The input string to hash.
+ * @param {number} max - The maximum value for the hash.
+ * @returns {number} - The index within the array.
+ */
+function hashStringToIndex(str, max) {
+    let index = 0;
+    for (let i = 0; i < str.length; i++) {
+        index = (index * 31 + str.charCodeAt(i)) % max;
+    }
+    return index;
+}
 
 const spacing$1 = {
     "squid-xxs": "0.3125rem", // 5px
@@ -3327,12 +3353,18 @@ const defaultFontFamily = {
     "squid-main": "Geist, sans-serif",
 };
 const defaultBorderRadius = {
+    // lg button
     "button-lg-primary": spacing$1["squid-xxl"],
     "button-lg-secondary": spacing$1["squid-xxl"],
     "button-lg-tertiary": spacing$1["squid-xxl"],
+    // md button
     "button-md-primary": spacing$1["squid-m"],
     "button-md-secondary": spacing$1["squid-m"],
     "button-md-tertiary": spacing$1["squid-m"],
+    // sm button
+    "button-sm-primary": spacing$1["squid-m"],
+    "button-sm-secondary": spacing$1["squid-m"],
+    "button-sm-tertiary": spacing$1["squid-m"],
     container: spacing$1["squid-l"],
     input: "9999px",
     "menu-sm": spacing$1["squid-s"],
@@ -3374,18 +3406,27 @@ const lightTheme = {
         "animation-bg": "#B893EC",
         "animation-text": "#FBFBFD",
         // buttons
+        // lg button
         "button-lg-primary-bg": "#B893EC",
         "button-lg-primary-text": "#FBFBFD",
         "button-lg-secondary-bg": "#17191C",
         "button-lg-secondary-text": "#EDEEF3",
         "button-lg-tertiary-bg": "#EDEEF3",
         "button-lg-tertiary-text": "#292C32",
+        // md button
         "button-md-primary-bg": "#B893EC",
         "button-md-primary-text": "#FBFBFD",
         "button-md-secondary-bg": "#17191C",
         "button-md-secondary-text": "#EDEEF3",
         "button-md-tertiary-bg": "#EDEEF3",
         "button-md-tertiary-text": "#292C32",
+        // sm button
+        "button-sm-primary-bg": "#B893EC",
+        "button-sm-primary-text": "#FBFBFD",
+        "button-sm-secondary-bg": "#17191C",
+        "button-sm-secondary-text": "#EDEEF3",
+        "button-sm-tertiary-bg": "#EDEEF3",
+        "button-sm-tertiary-text": "#292C32",
         // input
         "input-bg": "#FBFBFD",
         "input-placeholder": "#A7ABBE",
@@ -3434,18 +3475,27 @@ const darkTheme = {
         "animation-bg": "#9E79D2",
         "animation-text": "#FBFBFD",
         // buttons
+        // lg button
         "button-lg-primary-bg": "#9E79D2",
         "button-lg-primary-text": "#FBFBFD",
         "button-lg-secondary-bg": "#FBFBFD",
         "button-lg-secondary-text": "#292C32",
         "button-lg-tertiary-bg": "#292C32",
         "button-lg-tertiary-text": "#D1D6E0",
+        // md button
         "button-md-primary-bg": "#9E79D2",
         "button-md-primary-text": "#FBFBFD",
         "button-md-secondary-bg": "#FBFBFD",
         "button-md-secondary-text": "#292C32",
         "button-md-tertiary-bg": "#292C32",
         "button-md-tertiary-text": "#D1D6E0",
+        // sm button
+        "button-sm-primary-bg": "#9E79D2",
+        "button-sm-primary-text": "#FBFBFD",
+        "button-sm-secondary-bg": "#FBFBFD",
+        "button-sm-secondary-text": "#292C32",
+        "button-sm-tertiary-bg": "#292C32",
+        "button-sm-tertiary-text": "#D1D6E0",
         // input
         "input-bg": "#17191C",
         "input-placeholder": "#676B7E",
@@ -3524,7 +3574,7 @@ const boxShadowClassMap = {
     xlarge: "tw-shadow-elevation-light-2",
     xxlarge: "tw-shadow-elevation-dark-1",
 };
-const roundedClassMap$1 = {
+const roundedClassMap = {
     xxs: "tw-rounded-squid-xxs",
     xs: "tw-rounded-squid-xs",
     s: "tw-rounded-squid-s",
@@ -3553,7 +3603,7 @@ const borderClassMap = {
 };
 function Image$1(_a) {
     var { src, size = "medium", className: propsClassName, placeholderImageUrl, border = "none", rounded = "xxs", shadow = false, children, containerProps } = _a, props = __rest$1(_a, ["src", "size", "className", "placeholderImageUrl", "border", "rounded", "shadow", "children", "containerProps"]);
-    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap$1[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
+    const className = cn("tw-object-cover tw-aspect-square tw-relative tw-duration-300 tw-transition-[width,height] tw-max-w-full tw-bg-grey-500", sizeClassMap$1[size], propsClassName, roundedClassMap[rounded], shadow && boxShadowClassMap[size], borderClassMap[border]);
     const [imageState, setImageState] = useState(ImageState.LOADED);
     return (jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [border === "gradient" && (jsx("span", { style: {
                     borderRadius: gradientRoundedClassMap[rounded],
@@ -3740,8 +3790,8 @@ function ArrowUpIcon() {
 function ArrowCornerDownRightIcon({ 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", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4C4.55228 4 5 4.44772 5 5V13C5 13.5523 5.44772 14 6 14H17.5858L15.2929 11.7071C14.9024 11.3166 14.9024 10.6834 15.2929 10.2929C15.6834 9.90237 16.3166 9.90237 16.7071 10.2929L20.7071 14.2929C21.0976 14.6834 21.0976 15.3166 20.7071 15.7071L16.7071 19.7071C16.3166 20.0976 15.6834 20.0976 15.2929 19.7071C14.9024 19.3166 14.9024 18.6834 15.2929 18.2929L17.5858 16H6C4.34315 16 3 14.6569 3 13V5C3 4.44772 3.44772 4 4 4Z", fill: "currentColor" }) }));
 }
-function ChevronDownSmallIcon({ size = "16", className, }) {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M5.33325 6.66666L7.52851 8.86192C7.78886 9.12227 8.21097 9.12227 8.47132 8.86192L10.6666 6.66666", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function ChevronDownSmallIcon({ size = "16", strokeWidth = "2", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M5.33325 6.66666L7.52851 8.86192C7.78886 9.12227 8.21097 9.12227 8.47132 8.86192L10.6666 6.66666", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function ArrowDownIcon({ size = "24", className, }) {
     return (jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 25", fill: "none", children: jsx("path", { d: "M18 14.5L12 20.5L6 14.5M12 19.5V4.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -3849,11 +3899,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 Copy(_a) {
-    var { size = "24", strokeWidth = "2" } = _a, props = __rest$1(_a, ["size", "strokeWidth"]);
-    return (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, vectorEffect: "non-scaling-stroke", d: "M9 9V5.25A2.25 2.25 0 0111.25 3h7.5A2.25 2.25 0 0121 5.25v7.5A2.25 2.25 0 0118.75 15H15m-2.25-6h-7.5A2.25 2.25 0 003 11.25v7.5A2.25 2.25 0 005.25 21h7.5A2.25 2.25 0 0015 18.75v-7.5A2.25 2.25 0 0012.75 9z" }) })));
-}
-
 function CrossAnimatedIcon({ size = 24, isOpen, transitionDuration, className, }) {
     const rotateDegrees = isOpen ? 45 : 0;
     return (jsxs("div", { style: {
@@ -3978,11 +4023,11 @@ function PhoneIcon({ size = "24", className, }) {
 function LaptopIcon({ size = "24", className, }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsx("path", { d: "M4.5 6C4.5 4.89543 5.39543 4 6.5 4H18.5C19.6046 4 20.5 4.89543 20.5 6V15C20.5 15.5523 20.0523 16 19.5 16H5.5C4.94772 16 4.5 15.5523 4.5 15V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }), jsx("path", { d: "M2.5 16H22.5V18C22.5 19.1046 21.6046 20 20.5 20H4.5C3.39543 20 2.5 19.1046 2.5 18V16Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" })] }));
 }
-function CopyOutlinedIcon({ 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: "M9 9V5.25C9 4.00736 10.0074 3 11.25 3H18.75C19.9926 3 21 4.00736 21 5.25V12.75C21 13.9926 19.9926 15 18.75 15H15M12.75 9H5.25C4.00736 9 3 10.0074 3 11.25V18.75C3 19.9926 4.00736 21 5.25 21H12.75C13.9926 21 15 19.9926 15 18.75V11.25C15 10.0074 13.9926 9 12.75 9Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function CopyOutlinedIcon({ size = "24", strokeWidth = "2", 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: "M9 9V5.25C9 4.00736 10.0074 3 11.25 3H18.75C19.9926 3 21 4.00736 21 5.25V12.75C21 13.9926 19.9926 15 18.75 15H15M12.75 9H5.25C4.00736 9 3 10.0074 3 11.25V18.75C3 19.9926 4.00736 21 5.25 21H12.75C13.9926 21 15 19.9926 15 18.75V11.25C15 10.0074 13.9926 9 12.75 9Z", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function CopyIcon({ size = "20", className, }) {
-    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.16663 6.66666V3.54166C7.16663 2.50612 8.00609 1.66666 9.04163 1.66666H16.9583C17.9938 1.66666 18.8333 2.50612 18.8333 3.54166V11.4583C18.8333 12.4939 17.9938 13.3333 16.9583 13.3333H13.8333V16.4583C13.8333 17.4939 12.9938 18.3333 11.9583 18.3333H4.04163C3.00609 18.3333 2.16663 17.4939 2.16663 16.4583V8.54166C2.16663 7.50612 3.00609 6.66666 4.04163 6.66666H7.16663ZM9.04163 13.3333C8.00609 13.3333 7.16663 12.4939 7.16663 11.4583V8.33332H4.04163C3.92657 8.33332 3.83329 8.4266 3.83329 8.54166V16.4583C3.83329 16.5734 3.92657 16.6667 4.04163 16.6667H11.9583C12.0734 16.6667 12.1666 16.5734 12.1666 16.4583V13.3333H9.04163Z", fill: "currentColor" }) }));
+function Copy2Icon({ 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: "M18.3327 4.37496C18.3327 2.87919 17.1201 1.66663 15.6243 1.66663H9.37435C7.87858 1.66663 6.66602 2.87919 6.66602 4.37496V6.66663H4.37435C2.87858 6.66663 1.66602 7.87919 1.66602 9.37496V15.625C1.66602 17.1207 2.87858 18.3333 4.37435 18.3333H10.6243C12.1201 18.3333 13.3327 17.1207 13.3327 15.625V13.3333H15.6243C17.1201 13.3333 18.3327 12.1207 18.3327 10.625V4.37496ZM13.3327 11.6666H15.6243C16.1996 11.6666 16.666 11.2003 16.666 10.625V4.37496C16.666 3.79966 16.1996 3.33329 15.6243 3.33329H9.37435C8.79905 3.33329 8.33268 3.79966 8.33268 4.37496V6.66663H10.6243C12.1201 6.66663 13.3327 7.87919 13.3327 9.37496V11.6666Z", fill: "currentColor" }) }));
 }
 function FileDownloadIcon({ size = "20", className, }) {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.33337 1.66666H10.5V5.83332C10.5 7.21404 11.6193 8.33332 13 8.33332H17.1667V15.8333C17.1667 17.214 16.0474 18.3333 14.6667 18.3333H6.33337C4.95266 18.3333 3.83337 17.214 3.83337 15.8333V4.16666C3.83337 2.78594 4.95266 1.66666 6.33337 1.66666ZM13.1726 14.3392L11.0893 16.4226C10.7639 16.748 10.2362 16.748 9.91079 16.4226L7.82745 14.3392C7.50201 14.0138 7.50201 13.4862 7.82745 13.1607C8.15289 12.8353 8.68053 12.8353 9.00596 13.1607L9.66671 13.8215V10.8333C9.66671 10.3731 10.0398 9.99999 10.5 9.99999C10.9603 9.99999 11.3334 10.3731 11.3334 10.8333V13.8215L11.9941 13.1607C12.3196 12.8353 12.8472 12.8353 13.1726 13.1607C13.4981 13.4862 13.4981 14.0138 13.1726 14.3392Z", fill: "currentColor" }), jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
@@ -4017,6 +4062,12 @@ function ArrowExpandIcon({ className, size = "24", }) {
 function MoneyBagIcon({ 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: "M9.5 8H14.5M9.5 8C9.5 8 3.99996 11 4 16C4.00003 20.0207 7.97931 21 12 21C16.0207 21 20 20.0207 20 16C20 11 14.5 8 14.5 8M9.5 8L8.55725 5.48601C8.23089 4.6157 8.56249 3.64123 9.45158 3.37016C10.1074 3.1702 10.9686 3 12 3C13.0314 3 13.8926 3.1702 14.5484 3.37016C15.4375 3.64123 15.7691 4.6157 15.4427 5.48601L14.5 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function PluginIcon({ size = "16", className, }) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 16 16", fill: "none", className: className, children: jsx("path", { d: "M6.66675 1.99998C6.66675 1.63179 6.36827 1.33331 6.00008 1.33331C5.63189 1.33331 5.33341 1.63179 5.33341 1.99998V3.99998H4.66675C3.56218 3.99998 2.66675 4.89541 2.66675 5.99998V9.33331C2.66675 11.1743 4.15913 12.6666 6.00008 12.6666H7.33341V14C7.33341 14.3682 7.63189 14.6666 8.00008 14.6666C8.36827 14.6666 8.66675 14.3682 8.66675 14V12.6666H10.0001C11.841 12.6666 13.3334 11.1743 13.3334 9.33331V5.99998C13.3334 4.89541 12.438 3.99998 11.3334 3.99998H10.6667V1.99998C10.6667 1.63179 10.3683 1.33331 10.0001 1.33331C9.63189 1.33331 9.33341 1.63179 9.33341 1.99998V3.99998H6.66675V1.99998Z", fill: "currentColor" }) }));
+}
+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 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" }) }));
@@ -4122,7 +4173,7 @@ function SearchIcon({ className, size = "24", }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M20 20L16.05 16.05M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
 }
 
-function XSocial({ className, size = "24", }) {
+function XSocialIcon({ 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: "M17.4033 3.5H20.2852L13.989 10.701L21.396 20.5H15.5964L11.054 14.557L5.85637 20.5H2.97269L9.70709 12.7977L2.60156 3.5H8.54839L12.6544 8.93215L17.4033 3.5ZM16.3918 18.7738H17.9887L7.68067 5.13549H5.96702L16.3918 18.7738Z", fill: "currentColor" }) }));
 }
 function GithubIcon({ size = "24", className, }) {
@@ -4134,6 +4185,12 @@ function DiscordIcon({ size = "24", className, }) {
 function MirrorIcon({ size = "24", className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6 9C6 5.68629 8.68629 3 12 3C15.3137 3 18 5.68629 18 9V20C18 20.5523 17.5523 21 17 21H7C6.44771 21 6 20.5523 6 20V9Z", stroke: "currentColor", strokeWidth: "2" }) }));
 }
+function FarcasterIcon({ 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: "M15.8884 2H4.77734V4.28529L15.8884 4.28571V2ZM18.1115 16.2853V16.8567H13.667V16.2853C13.667 15.9696 13.9156 15.7139 14.2225 15.7139L14.2221 11.0971C14.2221 8.88795 12.481 7.0971 10.3332 7.0971C8.20241 7.0971 6.47187 8.85978 6.44466 11.0448V15.7139C6.75155 15.7139 7.00011 15.9696 7.00011 16.2853V16.8567H2.55566V16.2853C2.55566 15.9696 2.80428 15.7139 3.11122 15.7139L3.11133 6.57185H2.55556L2 4.28613H18.6667L18.1111 6.57185H17.556V15.7139C17.8629 15.7139 18.1115 15.9696 18.1115 16.2853ZM18.6669 17.4289C18.6669 17.1132 18.4185 16.8567 18.1115 16.8567H13.667C13.36 16.8567 13.1113 17.1132 13.1113 17.4289V18.0003H18.6669V17.4289ZM7.00011 16.8567C7.30706 16.8567 7.55555 17.1132 7.55555 17.4289V18.0003H2V17.4289C2 17.1132 2.24871 16.8567 2.55566 16.8567H7.00011Z", fill: "currentColor" }) }));
+}
+function TelegramIcon({ className, size = "20", }) {
+    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: "M1.31748 8.8995C6.46345 6.66525 9.89405 5.19215 11.6094 4.48047C16.5127 2.44826 17.5302 2.09531 18.1949 2.08349C18.341 2.08102 18.6664 2.11703 18.8788 2.28828C19.0553 2.43259 19.105 2.62776 19.1298 2.76465C19.1518 2.90154 19.1822 3.21354 19.1574 3.45708C18.8926 6.2389 17.7427 12.9895 17.158 16.1053C16.9126 17.4237 16.4244 17.8657 15.9528 17.9089C14.927 18.0029 14.1492 17.2337 13.1564 16.5852C11.6038 15.5701 10.7269 14.9384 9.21842 13.948C7.47552 12.8034 8.60617 12.1742 9.59896 11.1461C9.85819 10.877 14.3754 6.78262 14.4608 6.41126C14.4719 6.3648 14.483 6.19162 14.3782 6.10036C14.2761 6.00883 14.1244 6.04016 14.0141 6.0649C13.8569 6.10009 11.3776 7.73509 6.56812 10.9696C5.8649 11.4518 5.22787 11.6868 4.65426 11.6744C4.02549 11.661 2.81216 11.3193 1.91037 11.0274C0.807272 10.6692 -0.0724949 10.4798 0.0047222 9.87149C0.0433308 9.55482 0.481884 9.23074 1.31748 8.8995Z", fill: "currentColor" }) }));
+}
 
 function SortIcon() {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M3 5H21M9 19H15M6 12H18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
@@ -4343,9 +4400,9 @@ function UsdAmount({ usdAmount }) {
 }
 
 function HashLink({ showTx = false, hash, showCopyButton = false, url, children, className, formattedHash, copyIconSize = "16", }) {
-    return (jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsx("span", { className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsx(Copy, { size: copyIconSize, strokeWidth: "2", className: "tw-cursor-pointer tw-text-royal-500", onClick: () => {
-                        navigator.clipboard.writeText(hash).catch(() => { });
-                    } }) }))] }));
+    return (jsxs("div", { className: cn("tw-flex tw-items-center", className), children: [showTx && jsx("span", { className: "tw-mr-squid-xs tw-text-grey-700", children: "TX" }), children !== null && children !== void 0 ? children : formattedHash, url && (jsx("a", { href: url, target: "_blank", className: "tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", rel: "noreferrer", children: jsx(SquareArrowTopRight2Icon, { strokeWidth: "1.5", className: "tw-h-[1.2em] tw-w-[1.2em] tw-text-royal-500" }) })), showCopyButton && (jsx("span", { onClick: () => {
+                    navigator.clipboard.writeText(hash).catch(() => { });
+                }, className: "tw-cursor-pointer tw-rounded-squid-s tw-px-squid-xxs hover:tw-bg-material-light-thin", children: jsx(CopyOutlinedIcon, { size: copyIconSize, strokeWidth: "2.5", className: "tw-text-royal-500" }) }))] }));
 }
 
 function WalletLink({ imageURI, address }) {
@@ -4377,16 +4434,23 @@ function Chip(_a) {
     return (jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900", icon && "tw-w-squid-m", props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
 }
 
+const loaderSizeMap = {
+    sm: "16px",
+    md: "24px",
+    lg: "36px",
+};
 const baseButtonClassName = "tw-border tw-relative tw-overflow-hidden tw-group/base-button tw-flex tw-items-center tw-justify-center";
 const buttonWidthClassnameMap = {
+    sm: "tw-w-max",
     md: "tw-min-w-[60px]",
     lg: "tw-w-full",
 };
 const buttonSizeClassMap = {
     md: "tw-px-squid-xs tw-py-squid-xxs tw-h-squid-xl",
     lg: "tw-p-1 tw-h-button",
+    sm: "tw-h-squid-l tw-px-squid-xs",
 };
-const roundedClassMap = {
+const buttonRoundedClassMap = {
     lg: {
         primary: "tw-rounded-button-lg-primary",
         secondary: "tw-rounded-button-lg-secondary",
@@ -4397,6 +4461,11 @@ const roundedClassMap = {
         secondary: "tw-rounded-button-md-secondary",
         tertiary: "tw-rounded-button-md-tertiary",
     },
+    sm: {
+        primary: "tw-rounded-button-sm-primary",
+        secondary: "tw-rounded-button-sm-secondary",
+        tertiary: "tw-rounded-button-sm-tertiary",
+    },
 };
 const buttonVariantClassMap = {
     lg: {
@@ -4409,35 +4478,42 @@ const buttonVariantClassMap = {
         secondary: "tw-bg-button-md-secondary-bg tw-text-button-md-secondary-text",
         tertiary: "tw-bg-button-md-tertiary-bg tw-text-button-md-tertiary-text",
     },
+    sm: {
+        primary: "tw-bg-button-sm-primary-bg tw-text-button-sm-primary-text",
+        secondary: "tw-bg-button-sm-secondary-bg tw-text-button-sm-secondary-text",
+        tertiary: "tw-bg-button-sm-tertiary-bg tw-text-button-sm-tertiary-text",
+    },
 };
 // right now all variants have the same disabled styles
 // in the future, we can add more disabled styles for different variants
 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, chip, containerClassName, anchorRef, buttonRef } = _a, props = __rest$1(_a, ["label", "disabled", "size", "variant", "icon", "link", "isLoading", "showLoader", "chip", "containerClassName", "anchorRef", "buttonRef"]);
+    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"]);
     const chipElement = chip != null ? (jsx(Chip, Object.assign({}, chip, { className: cn("tw-absolute -tw-right-squid-xxs -tw-top-squid-xxs tw-z-10", chip.className) }))) : null;
-    const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (jsx(ButtonHoverOverlay, { className: roundedClassMap[size][variant] })), 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 ? (props.children) : size === "lg" ? (jsxs("span", { className: "tw-flex tw-items-center tw-justify-center tw-gap-squid-xs tw-px-squid-m", children: [showLoader && jsx(Loader, {}), jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "medium", children: label })] })) : size === "md" ? (label != null && icon == null ? (
-                // label only
-                jsx(BodyText, { className: isLoading ? loadingClassname : "", size: "small", children: label })) : label == null && icon != null ? (
-                // icon only
-                isLoading ? null : (icon)) : (
-                // icon and label
-                jsxs(Fragment, { children: [icon, jsx(BodyText, { className: "tw-pr-1", size: "small", children: label })] }))) : null })] }));
-    const className = cn(baseButtonClassName, buttonSizeClassMap[size], buttonWidthClassnameMap[size], buttonVariantClassMap[size][variant], "tw-border-material-light-thin", !disabled && !isLoading && "hover:tw-border-material-light-average", roundedClassMap[size][variant], 
+    const children = (jsxs(Fragment, { children: [!disabled && !isLoading && (jsx(ButtonHoverOverlay, { className: buttonRoundedClassMap[size][variant] })), 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) : (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 && jsx(Loader, { size: loaderSizeMap[loaderSize] }), !isLoading && icon, label != null &&
+                            (size === "sm" ? (jsx(CaptionText, { className: cn(isLoading && loadingClassname, icon != null && "tw-pr-1"), children: label })) : (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", 
     // custom classes from props
     props.className);
-    const ButtonWrapper = ({ children }) => (jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], roundedClassMap[size][variant], containerClassName), children: children }));
+    const buttonWrapperProps = {
+        className: containerClassName,
+        size,
+        variant,
+    };
     if (link != null) {
-        return (jsxs(ButtonWrapper, { children: [jsx("a", { ref: anchorRef, "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, rel: "noreferrer", children: children }), chipElement] }));
+        return (jsxs(ButtonWrapper, Object.assign({}, buttonWrapperProps, { children: [jsx("a", { ref: anchorRef, "aria-disabled": disabled, href: disabled ? undefined : link, target: "_blank", className: className, rel: "noreferrer", children: children }), chipElement] })));
     }
-    return (jsxs(ButtonWrapper, { children: [jsx("button", Object.assign({}, props, { type: "button", ref: buttonRef, "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] }));
+    return (jsxs(ButtonWrapper, Object.assign({}, buttonWrapperProps, { children: [jsx("button", Object.assign({}, props, { type: "button", ref: buttonRef, "aria-disabled": disabled || isLoading, className: className, disabled: disabled || isLoading, children: children })), chipElement] })));
 }
 const ButtonHoverOverlay = ({ className }) => {
     return (jsx("span", { className: cn("tw-absolute tw-inset-0 tw-z-0 tw-hidden tw-h-full tw-w-full tw-bg-material-light-thin group-hover/base-button:tw-block", className) }));
 };
+const ButtonWrapper = ({ children, size, variant, className, }) => (jsx("div", { className: cn("tw-relative", buttonWidthClassnameMap[size], buttonRoundedClassMap[size][variant], className), children: children }));
 
 function AccountsButton(_a) {
     var { imageUrls } = _a, props = __rest$1(_a, ["imageUrls"]);
@@ -4463,6 +4539,26 @@ function ArrowButton(_a) {
                 "aria-disabled:tw-bg-grey-600 aria-disabled:tw-text-grey-800"), children: jsx(ArrowRightIcon, {}) })] })));
 }
 
+const colors = [
+    "#D94E41",
+    "#E58845",
+    "#D9BA21",
+    "#B1CC29",
+    "#66CC33",
+    "#19A654",
+    "#56BFB6",
+    "#45B0E5",
+    "#3973E5",
+    "#7562D9",
+    "#B167E5",
+    "#E573BF",
+];
+function useColorFromSeed(seed) {
+    return useMemo(() => {
+        return colors[hashStringToIndex(seed, colors.length)];
+    }, [seed]);
+}
+
 function Input(_a) {
     var { placeholder = "Search", showIcon = true, className, icon, isError = false, isWarning = false, containerClassName, actionButtonProps, autoFocusTimeout, inputRef: inputRefProp } = _a, props = __rest$1(_a, ["placeholder", "showIcon", "className", "icon", "isError", "isWarning", "containerClassName", "actionButtonProps", "autoFocusTimeout", "inputRef"]);
     const showActionButton = actionButtonProps != null;
@@ -18849,8 +18945,8 @@ function DetailsToolbar({ errorMessage, helpButton, isLoading, isEmpty, flipButt
                                     "group-hover/flip-button:tw-rotate-180") }) }) }))) }), jsx("div", { className: cn(detailClassName, "tw-justify-end"), children: !!stopsButton && jsx(StopsButton, Object.assign({}, stopsButton)) })] })) }));
 }
 
-function DropdownMenu({ dropdownRef, className, menuRef, isHidden = false, listClassName, containerClassName, children, contentWrapperProps, menuContentClassName, }) {
-    return (jsx("div", { ref: dropdownRef, className: cn("tw-relative", containerClassName), children: 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 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 InfoBox({ title, description, icon }) {
@@ -19011,19 +19107,20 @@ function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, acti
 
 const SPACING = 10;
 function useDropdownMenu(props) {
-    const { initialIsModalOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
-    const [isDropdownOpen, setIsModalOpen] = useState(Boolean(initialIsModalOpen));
+    const { initialIsDropdownOpen, itemsContainerRef } = props !== null && props !== void 0 ? props : {};
+    const [isDropdownOpen, setIsDropdownOpen] = useState(Boolean(initialIsDropdownOpen));
     const dropdownRef = useRef(null);
     const openDropdownButtonRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            // close modal if the user clicked outside of it
+            // close dropdown if the user clicked outside of it
             var _a;
-            if (dropdownRef.current &&
+            const hasClickedOutside = dropdownRef.current &&
                 event.target !== openDropdownButtonRef.current &&
                 !dropdownRef.current.contains(event.target) &&
-                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                setIsModalOpen(false);
+                !((_a = openDropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target));
+            if (hasClickedOutside) {
+                setIsDropdownOpen(false);
             }
         };
         if (isDropdownOpen) {
@@ -19034,10 +19131,10 @@ function useDropdownMenu(props) {
         };
     }, [dropdownRef, isDropdownOpen]);
     const openDropdown = useCallback(() => {
-        setIsModalOpen((prev) => !prev);
+        setIsDropdownOpen((prev) => !prev);
     }, []);
     const closeDropdown = useCallback(() => {
-        setIsModalOpen(false);
+        setIsDropdownOpen(false);
     }, []);
     const [dropdownStyles, setDropdownStyles] = useState(null);
     const itemRef = useRef(null);
@@ -19077,10 +19174,11 @@ function useDropdownMenu(props) {
         // if the dropdown is not visible at top or bottom of the item
         // we just center it
         if (!isDropdownVisibleAtItemTopOrBottom) {
-            return setDropdownStyles({
+            setDropdownStyles({
                 position: "center",
                 maxHeight,
             });
+            return;
         }
         // finally, if the dropdown fits, position it where it has more space
         if (distanceBetweenItemBottomAndContainerBottomEdge >=
@@ -19354,7 +19452,7 @@ const collapsedListItemClassMap = {
     large: "tw-w-[80px]",
 };
 function ListItem(_a) {
-    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle = false } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent", "imageGroup", "multilineSubtitle"]);
+    var { itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size = "large", mainIcon, className, isSelected = false, onDetailClick, showDetailOnHoverOnly, rounded = "xxs", detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding = true, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle = false, control } = _a, props = __rest$1(_a, ["itemTitle", "mainImageUrl", "subtitle", "subtitleOnHover", "detail", "icon", "secondaryImageUrl", "placeholderImageUrl", "size", "mainIcon", "className", "isSelected", "onDetailClick", "showDetailOnHoverOnly", "rounded", "detailButtonClassName", "loading", "containerProps", "compactOnMobile", "extraPadding", "itemsContainerRef", "dropdownMenuContent", "imageGroup", "multilineSubtitle", "control"]);
     const { isDropdownOpen, dropdownRef, openDropdown, closeDropdown, openDropdownButtonRef, itemRef, menuRef, dropdownStyles, } = useDropdownMenu({
         itemsContainerRef,
     });
@@ -19390,9 +19488,11 @@ function ListItem(_a) {
         }
         return null;
     };
-    const isInteractive = !!props.onClick;
-    const ItemTag = isInteractive ? "button" : "div";
-    const itemProps = isInteractive ? props : {};
+    const isInteractive = !!props.onClick || !!control;
+    const ItemTag = isInteractive ? (control ? "label" : "button") : "div";
+    const itemProps = isInteractive
+        ? props
+        : {};
     const handleInteraction = (e) => {
         var _a;
         e.preventDefault();
@@ -19409,9 +19509,9 @@ function ListItem(_a) {
     };
     return (jsxs("li", Object.assign({}, containerProps, { ref: itemRef, className: cn("tw-relative tw-flex tw-max-w-full tw-bg-grey-900 tw-text-grey-300 tw-highlight-adjacent", !multilineSubtitle && listItemSizeMap[size], extraPadding && "tw-px-squid-xs", compactOnMobile
             ? `${collapsedListItemClassMap[size]} mobile-lg:tw-w-full`
-            : "tw-w-full", className), children: [jsxs(ItemTag, Object.assign({}, itemProps, { onClick: handleItemClick, 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-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 && "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: "small", imageUrls: imageGroup })) : (jsx(BadgeImage, { image: {
                                 src: mainImageUrl,
                                 placeholderImageUrl,
                                 size: "xlarge",
@@ -19431,7 +19531,7 @@ function ListItem(_a) {
                             : "tw-flex", isDetailInteractive && "hover:tw-bg-material-light-thin", detailButtonClassName), children: [!!detail && (jsx(CaptionText, { className: "min-tw-w-4 min-tw-h-4 tw-px-squid-xxs tw-leading-[10px]", children: detail })), icon ? (jsx("span", { className: "tw-flex tw-items-center tw-justify-center tw-px-[3px] tw-py-2", children: icon })) : null] }))), !!dropdownMenuContent && (jsx(ListItemActionsButton, { ref: openDropdownButtonRef, onClick: (e) => {
                             e.stopPropagation();
                             isDropdownOpen ? closeDropdown() : openDropdown();
-                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" }))] })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
+                        }, isActive: isDropdownOpen, className: "tw-z-20 peer-hover/list-item:tw-opacity-100" })), control] })), isDropdownOpen && !!dropdownMenuContent ? (jsx(DropdownMenu, { menuRef: menuRef, isHidden: !dropdownStyles, className: cn(!!dropdownStyles &&
                     dropdownPositionClassMap$1[dropdownStyles.position]), dropdownRef: dropdownRef, children: dropdownMenuContent })) : null] })));
 }
 const ListItemActionsButton = forwardRef((_a, ref) => {
@@ -27526,19 +27626,23 @@ function Switch({ checked = false, onChange, size, disabled = false, inputProps,
         // size styles
         switchSizeClassMap[size], 
         // checked styles
-        checked ? "tw-bg-status-positive" : "tw-bg-grey-800", 
+        disabled || !checked ? "tw-bg-grey-800" : "tw-bg-status-positive", 
         // disabled styles
         disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer", 
         // Focus visible styles
         "tw-focus-visible-within-outline"), children: [jsx("input", Object.assign({}, inputProps, { disabled: disabled, checked: checked, onChange: disabled ? undefined : (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked), type: "checkbox", className: "tw-peer tw-sr-only" })), jsx("span", { style: {
-                    filter: "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
+                    filter: disabled
+                        ? "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.10))"
+                        : "drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.33)) drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.20))",
                 }, className: clsx("tw-absolute tw-rounded-full tw-border tw-border-material-light-thin tw-transition-all", 
                 // size styles
                 switchKnobSizeClassMap[size], 
                 // checked styles
-                switchKnobCheckedClassMap[size][checked ? "checked" : "unchecked"], checked
-                    ? "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900"
-                    : "tw-bg-grey-500") })] }));
+                switchKnobCheckedClassMap[size][checked ? "checked" : "unchecked"], disabled
+                    ? "group-data-[squid-theme-type=dark]:tw-bg-grey-700 group-data-[squid-theme-type=light]:tw-bg-grey-900"
+                    : checked
+                        ? "group-data-[squid-theme-type=dark]:tw-bg-grey-100 group-data-[squid-theme-type=light]:tw-bg-grey-900"
+                        : "tw-bg-grey-500") })] }));
 }
 
 function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarning = false, }) {
@@ -27652,7 +27756,8 @@ function RangeInput({ label, initialValue, onChange, min = 0, max = 99, isWarnin
                             }, onMouseLeave: handleUpdateValue, className: cn("tw-relative tw-flex tw-h-full tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-p-squid-xxs tw-text-left tw-text-caption tw-font-caption tw-leading-[10px] placeholder-shown:tw-text-grey-600 hover:tw-bg-material-light-thin"), children: jsx(CirclePlusIcon, {}) })] })] }) }));
 }
 
-const imageClass = "tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center";
+const imageWrapperClassName = "tw-w-[40px] tw-aspect-square tw-flex tw-items-center tw-justify-center";
+const tokenImageClassName = "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover";
 const themeKeyVariantMap = {
     primary: "grey-800",
     accent: "royal-500",
@@ -27672,6 +27777,12 @@ var AssetsButtonState;
     AssetsButtonState[AssetsButtonState["EMPTY"] = 2] = "EMPTY";
     AssetsButtonState[AssetsButtonState["LOADING"] = 3] = "LOADING";
 })(AssetsButtonState || (AssetsButtonState = {}));
+var ImageLoadingState;
+(function (ImageLoadingState) {
+    ImageLoadingState[ImageLoadingState["LOADING"] = 0] = "LOADING";
+    ImageLoadingState[ImageLoadingState["LOADED"] = 1] = "LOADED";
+    ImageLoadingState[ImageLoadingState["ERROR"] = 2] = "ERROR";
+})(ImageLoadingState || (ImageLoadingState = {}));
 const outlineWidthMap = {
     [AssetsButtonState.LOADING]: {
         inner: 75,
@@ -27691,7 +27802,9 @@ const outlineWidthMap = {
     },
 };
 function AssetsButton({ chain, token, onClick, variant = "primary", isLoading = false, tooltip, emptyTokenLabel = "Select token", }) {
-    var _a, _b;
+    var _a, _b, _c, _d;
+    const [tokenImageLoadingState, setTokenImageLoadingState] = useState(ImageLoadingState.LOADING);
+    const fallbackBgColor = useColorFromSeed((_a = token === null || token === void 0 ? void 0 : token.symbol) !== null && _a !== void 0 ? _a : "");
     const state = useMemo(() => {
         if (chain != null && !isLoading) {
             if (token != null) {
@@ -27706,10 +27819,27 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
     }, [token, chain, isLoading]);
     const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap[variant]].cssVariable})`;
     const outlineWidth = outlineWidthMap[state];
-    const chainBgColor = (_a = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _a !== void 0 ? _a : defaultBgColor;
-    const tokenBgColor = state === AssetsButtonState.FULL
-        ? (_b = token === null || token === void 0 ? void 0 : token.bgColor) !== null && _b !== void 0 ? _b : defaultBgColor
-        : defaultBgColor;
+    const chainBgColor = (_b = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _b !== void 0 ? _b : defaultBgColor;
+    const tokenTextColor = tokenImageLoadingState === ImageLoadingState.ERROR
+        ? "#fff"
+        : token === null || token === void 0 ? void 0 : token.textColor;
+    const tokenBgColor = useMemo(() => {
+        if (state !== AssetsButtonState.FULL) {
+            return defaultBgColor;
+        }
+        if (tokenImageLoadingState === ImageLoadingState.ERROR) {
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            return fallbackBgColor || defaultBgColor;
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        return (token === null || token === void 0 ? void 0 : token.bgColor) || defaultBgColor;
+    }, [
+        state,
+        token === null || token === void 0 ? void 0 : token.bgColor,
+        defaultBgColor,
+        tokenImageLoadingState,
+        fallbackBgColor,
+    ]);
     const bgGradient = useMemo(() => {
         switch (state) {
             case AssetsButtonState.EMPTY:
@@ -27727,12 +27857,22 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
                 ? "tw-cursor-not-allowed"
                 : "tw-group/assets-button"), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsx("clipPath", { id: "halfClip1", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsx("clipPath", { id: "halfClip2", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsx("div", { className: cn("tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
                         backgroundImage: bgGradient,
-                    }, children: jsx("div", { className: clsx(imageClass), children: state === AssetsButtonState.CHAIN_ONLY ||
-                            state === AssetsButtonState.FULL ? (jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxs("div", { className: clsx(imageClass, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
+                    }, children: jsx("div", { className: clsx(imageWrapperClassName), children: state === AssetsButtonState.CHAIN_ONLY ||
+                            state === AssetsButtonState.FULL ? (jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxs("div", { className: clsx(imageWrapperClassName, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
                                 backgroundColor: tokenBgColor,
-                            } }), jsx("img", { src: token === null || token === void 0 ? void 0 : token.iconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs  tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
+                            } }), tokenImageLoadingState === ImageLoadingState.ERROR && (
+                        // show fallback
+                        jsx("div", { style: { color: tokenTextColor }, className: cn(tokenImageClassName, "tw-flex tw-items-center tw-justify-center tw-text-body-small"), children: (_d = (_c = token === null || token === void 0 ? void 0 : token.symbol) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() })), jsx("img", { onLoad: () => {
+                                setTokenImageLoadingState(ImageLoadingState.LOADED);
+                            }, onError: () => {
+                                setTokenImageLoadingState(ImageLoadingState.ERROR);
+                            }, src: token === null || token === void 0 ? void 0 : token.iconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, className: cn(tokenImageClassName, 
+                            // when image load failed, hide it with opacity: 0 instead of display: none
+                            // so new images can load and update the loading state
+                            tokenImageLoadingState === ImageLoadingState.ERROR &&
+                                "tw-opacity-0") }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n            tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs  tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
                         backgroundColor: tokenBgColor,
-                        color: token === null || token === void 0 ? void 0 : token.textColor,
+                        color: tokenTextColor,
                     }, children: [jsx(BodyText, { size: "small", className: cn("tw-leading-[13px]", state === AssetsButtonState.LOADING && "tw-min-w-[135px]"), children: state === AssetsButtonState.FULL
                                 ? token === null || token === void 0 ? void 0 : token.symbol
                                 : state !== AssetsButtonState.LOADING && emptyTokenLabel }), state !== AssetsButtonState.LOADING && (jsx(ChevronLargeRightIcon, { className: "tw-w-4 tw-min-w-4 tw-opacity-66" }))] })] }) })));
@@ -69198,7 +69338,7 @@ const swapProgressButtonTexts = {
     [SwapState.PARTIAL_SUCCESS]: "Cancel",
     [SwapState.NEEDS_GAS]: "Go to Axelarscan",
 };
-function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, socialLink, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, }) {
+function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }) {
     const [showSwapInfoSection, setShowSwapInfoSection] = useState(true);
     const isFirstRenderRef = useRef(true);
     const { timer, stopTimer, startTimer } = useTimer({
@@ -69257,7 +69397,7 @@ function SwapProgressView({ steps, isOpen = true, handleClose, handleComplete, s
                                 height: "100%",
                                 maxHeight: "100%",
                                 width: "auto",
-                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), 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: swapState === SwapState.COMPLETED ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(SwapSuccessIcon, {}) }), jsx(Button$1, { size: "md", variant: "secondary", icon: jsx(XSocial, {}), label: "Share", link: socialLink, title: "Share on X" })] })) : swapState === SwapState.ERROR ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : (jsx(TokenPair, { firstToken: {
+                            }, autoplay: true, loop: true, src: swapProgressAnimations[swapState] }) }), 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: swapState === SwapState.COMPLETED ? (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: jsx(SwapSuccessIcon, {}) }), jsx(ShareSwapButton, { dropdownContent: shareSwapDropdownContent })] })) : swapState === SwapState.ERROR ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "error" })) : swapState === SwapState.PARTIAL_SUCCESS ? (jsx(SwapErrorTopMenu, { supportLink: supportLink, type: "warning" })) : (jsx(TokenPair, { firstToken: {
                                 bgColor: fromToken.bgColor,
                                 logoURI: fromToken.logoUrl,
                             }, secondToken: {
@@ -69281,8 +69421,6 @@ const TrackTransactionView = forwardRef((props, ref) => {
                 currentStepIndex: rawSteps.length - 1,
             };
         }
-        // Vercel build throws an error for findLastIndex, probably related to the Node version being used
-        // @ts-expect-error - TODO: Fix this
         const lastSuccessfulStepIndex = rawSteps.findLastIndex((s) => s.status === "executed" || s.status === "success");
         if (swapState === SwapState.PROGRESS) {
             onTxStart();
@@ -69320,8 +69458,6 @@ const TrackTransactionView = forwardRef((props, ref) => {
             };
         }
         if (swapState === SwapState.PARTIAL_SUCCESS) {
-            // Vercel build throws an error for findLastIndex, probably related to the Node version being used
-            // @ts-expect-error - TODO: Fix this
             const lastWarningStepIndex = rawSteps.findLastIndex((s) => s.status === "warning");
             if (lastWarningStepIndex !== -1) {
                 return {
@@ -69355,6 +69491,15 @@ const SwapErrorTopMenu = ({ supportLink, type, }) => {
     return (jsxs(Fragment, { children: [jsx("span", { className: "-tw-mb-1 -tw-ml-1", children: type === "error" ? jsx(SwapErrorIcon, {}) : jsx(SwapWarningIcon, {}) }), jsx(Button$1, { size: "md", variant: "secondary", label: "Get help", link: supportLink, title: "Contact support" })] }));
 };
 TrackTransactionView.displayName = "TrackTransactionView";
+function ShareSwapButton({ dropdownContent, }) {
+    const containerRef = useContainerStore((state) => state.containerRef);
+    const { dropdownRef, isDropdownOpen, openDropdown, menuRef } = useDropdownMenu({
+        itemsContainerRef: containerRef,
+    });
+    return (jsx(DropdownMenu, { dropdownRef: dropdownRef, menuRef: menuRef, className: "-tw-bottom-[calc(100%+5px)] tw-left-1/2 tw-right-[unset] tw-top-[calc(100%+5px)] -tw-translate-x-1/2", isHidden: !isDropdownOpen, trigger: jsx(Button$1, { size: "md", variant: "secondary", onClick: () => {
+                openDropdown();
+            }, children: jsxs("div", { className: "tw-flex tw-items-center", children: [jsx(BodyText, { size: "small", className: "tw-px-squid-xxs", children: "Share" }), jsx(ChevronDownSmallIcon, { size: "24", strokeWidth: "1.5" })] }) }), children: dropdownContent }));
+}
 
 function TransactionViewLayout(_a) {
     var { isLoading, header, properties, actions, fees } = _a, props = __rest$1(_a, ["isLoading", "header", "properties", "actions", "fees"]);
@@ -69740,4 +69885,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, 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, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, 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, 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, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoneyBagIcon, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, 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, 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, XSocial, adjustColorForContrast, baseTailwindConfig, blendColors, 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, 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, LightningIcon, LimitIcon, LinkIcon, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, 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 };