@0xsquid/ui 2.3.0 → 2.3.2-beta.0

package/dist/cjs/index.js

@@ -3061,6 +3061,26 @@ const baseTailwindConfig = {
                         transform: "translate3d(0, 650px, 0)",
                     },
                 },
+                "slide-to-top-and-fade-in": {
+                    "0%": {
+                        transform: "translate3d(0, 650px, 0)",
+                        opacity: "0",
+                    },
+                    "100%": {
+                        transform: "translate3d(0, 0, 0)",
+                        opacity: "1",
+                    },
+                },
+                "slide-to-bottom-and-fade-out": {
+                    "0%": {
+                        transform: "translate3d(0, 0, 0)",
+                        opacity: "1",
+                    },
+                    "100%": {
+                        transform: "translate3d(0, 650px, 0)",
+                        opacity: "0",
+                    },
+                },
                 "expand-route": {
                     "0%": {
                         height: "60px",
@@ -3190,6 +3210,8 @@ const baseTailwindConfig = {
                 "move-to-left-with-spring-bounce": `move-to-left-with-spring-bounce var(${CSS_VARS.MOVE_WITH_SPRING_BOUNCE_DURATION}, 0s) ease-out both`,
                 "slide-to-top": `slide-to-top var(${CSS_VARS.SLIDE_TO_TOP_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
                 "slide-to-bottom": `slide-to-bottom var(${CSS_VARS.SLIDE_TO_BOTTOM_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
+                "slide-to-top-and-fade-in": `slide-to-top-and-fade-in var(${CSS_VARS.SLIDE_TO_TOP_DURATION}, 0s) ${ANIMATION_TIMINGS.SHOW_ROUTE} both`,
+                "slide-to-bottom-and-fade-out": `slide-to-bottom-and-fade-out var(${CSS_VARS.SLIDE_TO_BOTTOM_DURATION}, 0s) ${ANIMATION_TIMINGS.HIDE_ROUTE} both`,
                 "expand-route": `expand-route var(${CSS_VARS.EXPAND_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.EXPAND_ROUTE} both`,
                 "collapse-route": `collapse-route var(${CSS_VARS.COLLAPSE_ROUTE_DURATION}, 0s) ${ANIMATION_TIMINGS.COLLAPSE_ROUTE} both`,
                 "fade-in": `fade-in var(${CSS_VARS.FADE_IN_DURATION}, 0s) ease-out both`,
@@ -3526,7 +3548,7 @@ function Image$1(_a) {
     const [imageState, setImageState] = React$1.useState(exports.ImageState.LOADING);
     return (jsxRuntime.jsxs("div", Object.assign({}, containerProps, { className: cn("tw-relative", containerProps === null || containerProps === void 0 ? void 0 : containerProps.className), children: [border === "gradient" && (jsxRuntime.jsx("span", { style: {
                     borderRadius: gradientRoundedClassMap[rounded],
-                }, className: cn(className, "!tw-absolute -tw-left-[2px] -tw-top-[2px] !tw-h-[calc(100%+4px)] !tw-w-[calc(100%+4px)] tw-bg-conic-gradient tw-bg-center") })), children != null ? (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-bg-grey-500") }, props, { children: children }))) : (imageState !== exports.ImageState.LOADED &&
+                }, className: cn(className, "!tw-absolute -tw-left-[2px] -tw-top-[2px] !tw-h-[calc(100%+4px)] !tw-w-[calc(100%+4px)] tw-bg-conic-gradient tw-bg-center") })), children != null ? (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-flex tw-items-center tw-justify-center tw-bg-grey-500") }, props, { children: children }))) : (imageState !== exports.ImageState.LOADED &&
                 (placeholderImageUrl ? (jsxRuntime.jsx("img", Object.assign({ src: placeholderImageUrl, className: className }, props))) : (jsxRuntime.jsx("div", Object.assign({ className: cn(className, "tw-bg-grey-500") }, props))))), children == null && src && (jsxRuntime.jsx("img", Object.assign({}, props, { src: src, onError: () => {
                     setImageState(exports.ImageState.ERROR);
                 }, onLoad: () => {
@@ -3588,13 +3610,14 @@ function BodyText(_a) {
 
 function CaptionText(_a) {
     var _b, _c;
-    var { children, bold = false, loading, tight = false } = _a, props = __rest$1(_a, ["children", "bold", "loading", "tight"]);
+    var { children, bold = false, loading, tight = false, truncate = false } = _a, props = __rest$1(_a, ["children", "bold", "loading", "tight", "truncate"]);
     const boldClass = bold ? "!tw-font-bold" : "";
     const className = cn("tw-text-caption tw-font-caption tw-leading-caption", boldClass, tight && "!tw-leading-[1]", props.className);
     if ((_b = loading === null || loading === void 0 ? void 0 : loading.isLoading) !== null && _b !== void 0 ? _b : false) {
         return (jsxRuntime.jsx(TextSkeleton, { className: className, width: (_c = loading === null || loading === void 0 ? void 0 : loading.width) !== null && _c !== void 0 ? _c : "100%", isLoading: true }));
     }
-    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: className, children: children })));
+    return (jsxRuntime.jsx("span", Object.assign({}, props, { className: className, style: truncate
+            ? Object.assign(Object.assign({}, props.style), { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }) : props.style, children: children })));
 }
 
 // font size, line height, and letter spacing classes
@@ -3612,12 +3635,12 @@ function IconLabel({ src, children, rounded }) {
     return (jsxRuntime.jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsxRuntime.jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsxRuntime.jsx(CaptionText, { children: children })) : (children)] }));
 }
 
-function ImageGroup({ imageUrls, badgeUrl }) {
+function ImageGroup({ imageUrls, badge }) {
     return (jsxRuntime.jsxs("div", { className: "tw-relative tw-flex tw-h-squid-xxl tw-w-squid-xxl tw-flex-shrink-0 tw-flex-wrap tw-content-center tw-items-center tw-justify-center tw-gap-0.5 tw-rounded-squid-s tw-border tw-border-solid tw-border-material-light-thin tw-bg-grey-700", children: [imageUrls.map((url) => (jsxRuntime.jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: {
                     width: "24px",
                     height: "24px",
                     borderRadius: "7.5px",
-                } }, url))), jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-bg-highlight-700", children: jsxRuntime.jsx(Image$1, { border: "outline-lg", src: badgeUrl, size: "medium", className: "tw-p-0.5" }) })] }));
+                } }, url))), badge != null && (jsxRuntime.jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px]", children: jsxRuntime.jsx(Image$1, Object.assign({}, badge, { border: "outline-lg", size: "medium" })) }))] }));
 }
 
 function Approve() {
@@ -3648,8 +3671,8 @@ function ChevronTopSmallIcon() {
 function ChevronLargeDownIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M3 10.5L11.0287 14.9604C11.6328 15.296 12.3672 15.296 12.9713 14.9604L21 10.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function ChevronTopIcon({ className }) {
-    return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.47139 6.08088C8.21104 5.82053 7.78893 5.82053 7.52858 6.08088L3.13807 10.4714C2.87772 10.7318 2.45561 10.7318 2.19526 10.4714C1.93491 10.2111 1.93491 9.78895 2.19526 9.5286L6.58577 5.13807C7.36682 4.35702 8.63315 4.35702 9.4142 5.13807L13.8047 9.52859C14.0651 9.78894 14.0651 10.2111 13.8047 10.4714C13.5444 10.7318 13.1223 10.7318 12.8619 10.4714L8.47139 6.08088Z", fill: "currentColor" }) }));
+function ChevronTopIcon(props) {
+    return (jsxRuntime.jsx("svg", Object.assign({}, props, { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.47139 6.08088C8.21104 5.82053 7.78893 5.82053 7.52858 6.08088L3.13807 10.4714C2.87772 10.7318 2.45561 10.7318 2.19526 10.4714C1.93491 10.2111 1.93491 9.78895 2.19526 9.5286L6.58577 5.13807C7.36682 4.35702 8.63315 4.35702 9.4142 5.13807L13.8047 9.52859C14.0651 9.78894 14.0651 10.2111 13.8047 10.4714C13.5444 10.7318 13.1223 10.7318 12.8619 10.4714L8.47139 6.08088Z", fill: "currentColor" }) })));
 }
 function ChevronLargeRightIcon({ size = "16", className, }) {
     return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M6.66675 14L9.64035 8.64754C9.86407 8.24484 9.86407 7.75519 9.64035 7.35249L6.66675 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -3934,11 +3957,14 @@ function PhoneIcon({ size = "24", className, }) {
 function LaptopIcon({ size = "24", className, }) {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: [jsxRuntime.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" }), jsxRuntime.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 (jsxRuntime.jsx("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: "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 CopyIcon({ size = "20", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: jsxRuntime.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 FileDownloadIcon({ size = "20", className, }) {
-    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", children: [jsxRuntime.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" }), jsxRuntime.jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
+    return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 21 20", fill: "none", className: className, children: [jsxRuntime.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" }), jsxRuntime.jsx("path", { d: "M12.1667 2.15481L16.6786 6.66666H13C12.5398 6.66666 12.1667 6.29356 12.1667 5.83332V2.15481Z", fill: "currentColor" })] }));
 }
 function CodeSolidSquareIcon({ size = "24", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 25 24", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.5 6C3.5 4.34315 4.84315 3 6.5 3H18.5C20.1569 3 21.5 4.34315 21.5 6V18C21.5 19.6569 20.1569 21 18.5 21H6.5C4.84315 21 3.5 19.6569 3.5 18V6ZM11.2071 8.79289C11.5976 9.18342 11.5976 9.81658 11.2071 10.2071L9.41421 12L11.2071 13.7929C11.5976 14.1834 11.5976 14.8166 11.2071 15.2071C10.8166 15.5976 10.1834 15.5976 9.79289 15.2071L8 13.4142C7.21895 12.6332 7.21895 11.3668 8 10.5858L9.79289 8.79289C10.1834 8.40237 10.8166 8.40237 11.2071 8.79289ZM15.2071 8.79289C14.8166 8.40237 14.1834 8.40237 13.7929 8.79289C13.4024 9.18342 13.4024 9.81658 13.7929 10.2071L15.5858 12L13.7929 13.7929C13.4024 14.1834 13.4024 14.8166 13.7929 15.2071C14.1834 15.5976 14.8166 15.5976 15.2071 15.2071L17 13.4142C17.781 12.6332 17.781 11.3668 17 10.5858L15.2071 8.79289Z", fill: "currentColor" }) }));
@@ -3961,6 +3987,9 @@ function SmileFilledIcon({ className, size = "27", }) {
 function StarLinesIcon({ size = "20", className, }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", className: className, children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.8455 1.41356C12.3313 0.606286 13.5017 0.606288 13.9875 1.41356L15.2314 3.4805L17.5816 4.0248C18.4995 4.23739 18.8611 5.35048 18.2435 6.06199L16.6621 7.88373L16.8707 10.2871C16.9522 11.2257 16.0053 11.9137 15.1378 11.5461L12.9165 10.6051L10.6952 11.5461C9.8277 11.9137 8.88085 11.2257 8.96232 10.2871L9.1709 7.88373L7.58951 6.06199C6.97187 5.35048 7.33354 4.23739 8.25143 4.0248L10.6016 3.4805L11.8455 1.41356ZM6.42243 8.57745C6.74786 8.90289 6.74786 9.43053 6.42243 9.75596L3.08909 13.0893C2.76366 13.4147 2.23602 13.4147 1.91058 13.0893C1.58514 12.7639 1.58514 12.2362 1.91058 11.9108L5.24392 8.57745C5.56935 8.25202 6.09699 8.25202 6.42243 8.57745ZM8.08909 12.7441C8.41453 13.0696 8.41453 13.5972 8.08909 13.9226L4.75576 17.256C4.43032 17.5814 3.90269 17.5814 3.57725 17.256C3.25181 16.9305 3.25181 16.4029 3.57725 16.0775L6.91058 12.7441C7.23602 12.4187 7.76366 12.4187 8.08909 12.7441ZM13.9224 12.7441C14.2479 13.0696 14.2479 13.5972 13.9224 13.9226L10.5891 17.256C10.2637 17.5814 9.73602 17.5814 9.41058 17.256C9.08515 16.9305 9.08515 16.4029 9.41058 16.0775L12.7439 12.7441C13.0694 12.4187 13.597 12.4187 13.9224 12.7441Z", fill: "currentColor" }) }));
 }
+function QrCodeIcon({ size = "24", className, }) {
+    return (jsxRuntime.jsx("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: "M14 14V16H16M18 14H20M20 18H18V20M14 19.99V20M16 10H18C19.1046 10 20 9.10457 20 8V6C20 4.89543 19.1046 4 18 4H16C14.8954 4 14 4.89543 14 6V8C14 9.10457 14.8954 10 16 10ZM6 20H8C9.10457 20 10 19.1046 10 18V16C10 14.8954 9.10457 14 8 14H6C4.89543 14 4 14.8954 4 16V18C4 19.1046 4.89543 20 6 20ZM6 10H8C9.10457 10 10 9.10457 10 8V6C10 4.89543 9.10457 4 8 4H6C4.89543 4 4 4.89543 4 6V8C4 9.10457 4.89543 10 6 10Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
 
 function EmptyHeartIcon({ className }) {
     return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, children: jsxRuntime.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" }) }));
@@ -4054,8 +4083,8 @@ function PieChartIcon() {
     return (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: "none", viewBox: "0 0 14 14", children: [jsxRuntime.jsx("path", { fill: "currentColor", d: "M13.478 8.582A6.667 6.667 0 007.667.366V6.53l5.81 2.053z" }), jsxRuntime.jsx("path", { fill: "currentColor", d: "M13.034 9.84L6.778 7.629A.667.667 0 016.334 7V.366a6.667 6.667 0 106.7 9.474z" })] }));
 }
 
-function PlusIcon({ className, size = "24", }) {
-    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+function PlusIcon({ className, size = "24", strokeWidth = "2", }) {
+    return (jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsxRuntime.jsx("path", { d: "M12 17V12M12 12V7M12 12H17M12 12H7", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round" }) }));
 }
 
 function RefreshIcon() {
@@ -4218,7 +4247,7 @@ const priceChangeSignToIconMap = {
     [PriceChangeSign.NEGATIVE]: (jsxRuntime.jsx(ArrowTriangle, { className: "tw-text-status-negative" })),
     [PriceChangeSign.NEUTRAL]: jsxRuntime.jsx(PauseIcon, {}),
 };
-function PriceChange({ value: rawValue, variant = "small", }) {
+function PriceChange({ value: rawValue = 0, variant = "small", }) {
     const valueFormatted = Math.abs(Number(rawValue)).toFixed(2);
     const sign = Number(rawValue) > 0
         ? PriceChangeSign.POSITIVE
@@ -18805,7 +18834,7 @@ const modalWidthClassMap = {
     large: "mobile-lg:tw-w-modal-large",
     "extra-large": "mobile-lg:tw-w-modal-extra-large",
 };
-function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = "large", animateOpacity = false, }) {
+function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, maxHeight = false, width = "large", animateOpacity = false, backdropStyle, }) {
     const [isOpen, setIsOpen] = React$1.useState(_isOpen);
     React$1.useEffect(() => {
         if (_isOpen) {
@@ -18827,16 +18856,18 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
                     onBackdropClick();
                 }
             }
-            : undefined, style: {
-            [CSS_VARS.BLUR_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
-            [CSS_VARS.BLUR_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-        }, className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", _isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out"), children: jsxRuntime.jsx("div", { style: {
+            : undefined, style: Object.assign({ [CSS_VARS.BLUR_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`, [CSS_VARS.BLUR_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms` }, backdropStyle), className: cn("tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m", _isOpen ? "tw-animate-blur-in" : "tw-animate-blur-out"), children: jsxRuntime.jsx("div", { style: {
                 [CSS_VARS.SLIDE_TO_TOP_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
                 [CSS_VARS.SLIDE_TO_BOTTOM_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
                 [CSS_VARS.FADE_IN_DURATION]: `${ANIMATION_DURATIONS.SHOW_MODAL}ms`,
                 [CSS_VARS.FADE_OUT_DURATION]: `${ANIMATION_DURATIONS.HIDE_MODAL}ms`,
-            }, className: cn("tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-xs:tw-w-modal-compact mobile-lg:tw-max-h-modal-large", className, _isOpen ? "tw-animate-slide-to-top" : "tw-animate-slide-to-bottom", animateOpacity &&
-                (_isOpen ? "tw-animate-fade-in" : "tw-animate-fade-out"), maxHeight && "tw-h-full", modalWidthClassMap[width]), children: children }) })));
+            }, className: cn("tw-relative tw-flex tw-max-h-modal-compact tw-max-w-full tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end mobile-xs:tw-w-modal-compact mobile-lg:tw-max-h-modal-large", className, animateOpacity
+                ? _isOpen
+                    ? "tw-animate-slide-to-top-and-fade-in"
+                    : "tw-animate-slide-to-bottom-and-fade-out"
+                : _isOpen
+                    ? "tw-animate-slide-to-top"
+                    : "tw-animate-slide-to-bottom", maxHeight && "tw-h-full", modalWidthClassMap[width]), children: children }) })));
 }
 
 const borderTypeClassMap = {
@@ -18932,7 +18963,25 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
 }
 
 function SwapProgressViewHeader({ title, description, }) {
-    return (jsxRuntime.jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
+    return (jsxRuntime.jsxs("header", { className: "tw-flex tw-min-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsxRuntime.jsx(BodyText, { size: "large", className: "tw-min-h-squid-m !tw-leading-[25px] tw-text-grey-300", children: title }), jsxRuntime.jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
+}
+
+function AccountListItem({ isConnected, imageUrls = [], imageUrl, badgeUrl, actions = [], subtitle, title, mainButton, }) {
+    const badge = {
+        src: isConnected ? badgeUrl : undefined,
+        children: isConnected ? undefined : (jsxRuntime.jsx(PlusIcon, { className: "tw-text-grey-900 group-data-[squid-theme-type=dark]:tw-text-grey-100", size: "15", strokeWidth: "3" })),
+        className: isConnected ? undefined : "tw-bg-royal-500",
+        border: "outline-lg",
+        size: "medium",
+    };
+    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-h-[80px] tw-w-full tw-items-center tw-gap-squid-s tw-px-squid-m tw-py-squid-xs tw-text-grey-300", children: [imageUrl != null ? (jsxRuntime.jsx(BadgeImage, { className: "tw-min-w-fit", image: {
+                    src: imageUrl,
+                    size: "xxlarge",
+                    rounded: "s",
+                    border: "outline-sm",
+                }, 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: isConnected
+                    ? actions.map((action) => React$1.createElement(IconButton, Object.assign({}, action, { key: action.key })))
+                    : mainButton != null && (jsxRuntime.jsx(Button$1, Object.assign({ size: "md", variant: "primary" }, mainButton))) })] }));
 }
 
 const SPACING = 10;
@@ -19432,7 +19481,7 @@ function SmallBodyText(props) {
 function PropertyListItem(_a) {
     var { isLoading = false, label, detail, icon, className, variant = "small", showGradientBg = true, labelClassName, iconClassName, detailClassName } = _a, props = __rest$1(_a, ["isLoading", "label", "detail", "icon", "className", "variant", "showGradientBg", "labelClassName", "iconClassName", "detailClassName"]);
     const Text = variant === "small" ? CaptionText : SmallBodyText;
-    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", containerVariantClassNameMap[variant], className), 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 tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsx(Text, { className: cn("tw-flex-1 tw-text-grey-500", labelClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsxRuntime.jsx(Text, { className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
+    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", containerVariantClassNameMap[variant], className), 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 tw-rounded-squid-xs", childrenVariantClassNameMap[variant]), children: [jsxRuntime.jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsxRuntime.jsx(Text, { className: cn("tw-min-w-fit tw-flex-1 tw-text-grey-500", labelClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsxRuntime.jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsxRuntime.jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -19541,7 +19590,9 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
     const handleToggleCollapsed = React$1.useCallback(() => {
         setIsCollapsed((prev) => !prev);
     }, []);
-    return (jsxRuntime.jsxs("li", { className: cn("tw-w-full tw-self-stretch", extraSpacing && "tw-px-squid-xs tw-pt-squid-xs", !isCollapsed &&
+    return (jsxRuntime.jsxs("li", { style: {
+            transition: `padding ${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
+        }, className: cn("tw-w-full tw-self-stretch", extraSpacing && "tw-px-squid-xs tw-pt-squid-xs", !isCollapsed &&
             "tw-border-y tw-border-solid tw-border-y-material-light-thin tw-py-squid-xs", className), children: [jsxRuntime.jsxs(ContentTag, { onClick: (event) => {
                     onClick === null || onClick === void 0 ? void 0 : onClick(event);
                     if (isCollapsible)
@@ -19549,7 +19600,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                 }, style: isCollapsible
                     ? {
                         transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
-                        transitionProperty: "height",
+                        transitionProperty: "height, gap",
                     }
                     : undefined, className: cn("tw-flex tw-w-full tw-items-center tw-rounded-squid-s tw-px-squid-xs", isSelected && "tw-bg-material-light-thin", isInteractive && "hover:tw-bg-material-light-thin", isLargeVariant
                     ? isCollapsed
@@ -19557,7 +19608,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                         : "tw-h-squid-xl tw-gap-squid-xxs"
                     : isSmallVariant
                         ? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
-                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative", children: [jsxRuntime.jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
+                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxRuntime.jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsxRuntime.jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
                                     ? "medium"
                                     : (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
                                     transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
@@ -19575,8 +19626,19 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                                     ? "-tw-bottom-0 -tw-right-0"
                                     : "-tw-bottom-[3px] -tw-right-[3px]"), children: jsxRuntime.jsx(ImageStack, { spacing: "-10px", removeDuplicates: true, addExtraPadding: !isCollapsible, size: "medium", rounded: "xxs", border: "outline-lg", imageUrls: isCollapsible
                                         ? tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.slice(0, MAX_PREVIEW_ITEMS).map((item) => item.chainImageUrl)
-                                        : [chainImageUrl] }) }))] }), jsxRuntime.jsxs("div", { className: cn("tw-flex tw-flex-1 tw-flex-col tw-items-start tw-justify-center tw-text-grey-300", isCollapsed &&
-                            (isSmallVariant ? "tw-gap-squid-xs" : "tw-gap-squid-xxs"), isSmallVariant && "tw-h-[45px]"), children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-gap-squid-xxs tw-self-stretch", isSmallVariant ? "tw-h-[13px] tw-items-end" : "tw-items-center", isLargeVariant && "tw-h-squid-m"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-fit !tw-leading-[13px]", children: name }), (!isCollapsed || isCompactVariant) && (jsxRuntime.jsx(ChevronTopIcon, { className: cn("tw-text-grey-500", isCollapsed ? "tw-rotate-90" : "tw-rotate-180") })), balanceUsd ? (jsxRuntime.jsx("span", { className: cn("tw-flex tw-flex-1 tw-items-center tw-justify-end", isCollapsed ? "tw-text-grey-300" : "tw-text-grey-500"), children: isSmallVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px] tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px]", children: balanceUsd })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[10px] tw-opacity-66", children: "$" }), jsxRuntime.jsx(BodyText, { size: "small", className: "!tw-leading-[10px]", children: balanceUsd })] })) })) : null] }), !isCompactVariant && (jsxRuntime.jsx(Collapse, { collapsed: !isCollapsed, contentsClassName: "tw-flex tw-w-full tw-items-start tw-justify-between", className: "tw-w-full", children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-w-full tw-items-center tw-justify-between tw-self-stretch", isLargeVariant && "tw-h-squid-m"), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: jsxRuntime.jsxs(CaptionText, { className: "!tw-leading-[10px]", children: [balance, symbol] }) }), priceChange && jsxRuntime.jsx(PriceChange, { value: priceChange })] }) }))] })] }), jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: jsxRuntime.jsx("ul", { className: cn("tw-flex tw-flex-col tw-items-start tw-justify-end tw-self-stretch", isCompactVariant && "tw-gap-squid-xs tw-pt-squid-xs"), children: tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.map((token) => (jsxRuntime.jsx(TokenGroup, Object.assign({}, token, { extraSpacing: false, variant: isCompactVariant ? "small" : "large", onClick: () => onChildClick === null || onChildClick === void 0 ? void 0 : onChildClick(token) }), token.chainImageUrl + token.symbol))) }) })] }));
+                                        : [chainImageUrl] }) }))] }), jsxRuntime.jsxs("div", { style: {
+                            transition: `max-width ${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
+                        }, className: cn("tw-flex tw-flex-1 tw-flex-col tw-text-grey-300", isCollapsed && "tw-gap-squid-xxs", !isSmallVariant && "tw-justify-center", isCompactVariant && "tw-max-w-[calc(100%-30px)]", isSmallVariant &&
+                            "tw-h-[45px] tw-max-w-[calc(100%-60px)] tw-justify-end", isLargeVariant &&
+                            (isCollapsed
+                                ? "tw-max-w-[calc(100%-80px)]"
+                                : "tw-max-w-[calc(100%-30px)]")), children: [jsxRuntime.jsxs("div", { className: cn("tw-flex tw-w-full tw-items-center tw-gap-squid-xxs tw-self-stretch", isSmallVariant ? "tw-h-[13px] tw-items-end" : "tw-items-center", isLargeVariant && "tw-h-squid-m"), children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-h-fit tw-max-w-fit tw-flex-grow tw-truncate", style: {
+                                            whiteSpace: "nowrap",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: name }), isCollapsible && (jsxRuntime.jsx(ChevronTopIcon, { style: {
+                                            transition: `transform ${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
+                                        }, className: cn("tw-min-w-fit tw-text-grey-500", isCollapsed ? "tw-rotate-90" : "tw-rotate-180") })), balanceUsd ? (jsxRuntime.jsx("span", { className: cn("tw-flex tw-flex-1 tw-items-center tw-justify-end", isCollapsed ? "tw-text-grey-300" : "tw-text-grey-500"), children: isSmallVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(CaptionText, { children: balanceUsd })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BodyText, { size: "small", className: "tw-opacity-66", children: "$" }), jsxRuntime.jsx(BodyText, { size: "small", children: balanceUsd })] })) })) : null] }), !isCompactVariant && (jsxRuntime.jsx(Collapse, { collapsed: !isCollapsed, contentsClassName: "tw-flex tw-w-full tw-items-start tw-justify-between", className: "tw-w-full", children: jsxRuntime.jsxs("div", { className: cn("tw-flex tw-w-full tw-items-center tw-justify-between tw-self-stretch", isLargeVariant && "tw-h-squid-m"), children: [jsxRuntime.jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: jsxRuntime.jsxs(CaptionText, { children: [balance, " ", symbol] }) }), priceChange && jsxRuntime.jsx(PriceChange, { value: priceChange })] }) }))] })] }), jsxRuntime.jsx(Collapse, { collapsed: isCollapsed, children: jsxRuntime.jsx("ul", { className: cn("tw-flex tw-flex-col tw-items-start tw-justify-end tw-self-stretch", isCompactVariant && "tw-gap-squid-xs tw-pt-squid-xs"), children: tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.map((token) => (jsxRuntime.jsx(TokenGroup, Object.assign({}, token, { extraSpacing: false, variant: isCompactVariant ? "small" : "large", onClick: () => onChildClick === null || onChildClick === void 0 ? void 0 : onChildClick(token) }), token.chainImageUrl + token.symbol))) }) })] }));
 }
 
 function ActionLayout({ lineCap = jsxRuntime.jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
@@ -19717,7 +19779,7 @@ function TransactionAction({ type, props }) {
 }
 
 function Transfer({ isLoading, from, to, className }) {
-    return (jsxRuntime.jsx("div", { className: cn("tw-flex tw-items-center tw-gap-squid-xxs", className), children: jsxRuntime.jsxs(Join, { glue: () => jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? jsxRuntime.jsx(TextSkeleton, {}) : from, isLoading ? jsxRuntime.jsx(TextSkeleton, {}) : to] }) }));
+    return (jsxRuntime.jsx("div", { className: cn("tw-flex tw-max-w-full tw-items-center tw-gap-squid-xxs", className), children: jsxRuntime.jsxs(Join, { glue: () => jsxRuntime.jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? (jsxRuntime.jsx(TextSkeleton, {})) : typeof from === "string" ? (jsxRuntime.jsx(CaptionText, { truncate: true, children: from })) : (from), isLoading ? (jsxRuntime.jsx(TextSkeleton, {})) : typeof to === "string" ? (jsxRuntime.jsx(CaptionText, { truncate: true, children: to })) : (to)] }) }));
 }
 
 function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant = "full", }) {
@@ -19837,6 +19899,8 @@ function Toast({ headerContent, actionsContent, description, chipLabel, title, }
         }, rounded: "sm", children: [headerContent, jsxRuntime.jsx("header", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-self-stretch tw-px-0 tw-py-squid-xxs", children: jsxRuntime.jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsxRuntime.jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), jsxRuntime.jsx("menu", { className: "tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-pt-squid-xs", children: actionsContent }), chipLabel && (jsxRuntime.jsx(Chip, { label: chipLabel, className: "tw-absolute tw-right-squid-xs tw-top-squid-xs" }))] }));
 }
 
+const BACKGROUND_COLOR_CSS_VARIABLE = "--token-details-view-bg-color";
+const TEXT_COLOR_CSS_VARIABLE = "--token-details-view-text-color";
 const DEFAULT_TIMEFRAME = "1D";
 const DefaultChart = ({ timeframe, }) => (jsxRuntime.jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center", children: jsxRuntime.jsxs(BodyText, { size: "small", children: ["Chart (", timeframe, ")"] }) }));
 const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between", children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-pb-squid-xs", children: jsxRuntime.jsx(BadgeImage, { image: {
@@ -19854,34 +19918,35 @@ const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxRuntime.
 const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-400", children: "Balance" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxRuntime.jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsxRuntime.jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxRuntime.jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxRuntime.jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsxRuntime.jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
 const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxRuntime.jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsxRuntime.jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
 const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsxRuntime.jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsxRuntime.jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
-const SwapButton = ({ label, color, icon, onClick, textColor, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsx(IconButton, { icon: icon, className: "tw-text-grey-900", style: {
-                height: "40px",
-                width: "40px",
-                borderRadius: "100%",
-                backgroundColor: color,
-                color: textColor,
-            }, onClick: onClick }), jsxRuntime.jsx(CaptionText, { className: "tw-text-grey-400", children: label })] }));
-const SwapButtons = ({ token, onSwapFrom, onSwapTo, }) => (jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-between tw-py-5", children: [jsxRuntime.jsx(SwapButton, { label: "Swap From", color: token.color, textColor: token.textColor, icon: jsxRuntime.jsx(ArrowUpIcon, {}), onClick: () => {
-                onSwapFrom({ address: token.address, chainId: token.chainId });
-            } }), jsxRuntime.jsx(SwapButton, { label: "Swap To", color: token.color, textColor: token.textColor, icon: jsxRuntime.jsx(ArrowDownIcon, {}), onClick: () => {
-                onSwapTo({ address: token.address, chainId: token.chainId });
-            } })] }));
-const TimeframeChip = ({ label, isSelected, onClick, }) => (jsxRuntime.jsx(Chip, { className: cn("tw-w-squid-xl tw-cursor-pointer hover:tw-bg-material-light-thin", isSelected
-        ? "!tw-bg-grey-300 !tw-text-grey-900"
-        : "tw-bg-transparent !tw-text-grey-600"), label: label, onClick: onClick }));
+const FooterButton = (_a) => {
+    var { icon, label } = _a, props = __rest$1(_a, ["icon", "label"]);
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsxRuntime.jsx("button", Object.assign({}, props, { className: "tw-flex tw-h-squid-xl tw-w-squid-xl tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-material-light-thin tw-text-grey-900 tw-shadow-elevation-light-1 disabled:tw-bg-grey-700", style: props.disabled
+                    ? undefined
+                    : {
+                        backgroundColor: `var(${BACKGROUND_COLOR_CSS_VARIABLE})`,
+                        color: `var(${TEXT_COLOR_CSS_VARIABLE})`,
+                    }, children: icon })), jsxRuntime.jsx(CaptionText, { className: props.disabled ? "tw-text-grey-700" : "tw-text-grey-400", children: label })] }));
+};
+const FooterButtons = ({ buttons }) => (jsxRuntime.jsx("div", { className: "tw-flex tw-justify-between tw-py-5", children: buttons.map((button) => (jsxRuntime.jsx(FooterButton, Object.assign({}, button), button.label))) }));
+const TimeframeChip = ({ label, isSelected, onClick, }) => (jsxRuntime.jsx("button", { onClick: onClick, className: "tw-rounded-squid-m", children: jsxRuntime.jsx(Chip, { className: cn("tw-w-squid-xl tw-cursor-pointer hover:tw-bg-material-light-thin", isSelected
+            ? "!tw-bg-grey-300 !tw-text-grey-900"
+            : "tw-bg-transparent !tw-text-grey-600"), label: label }) }));
 const ChartTimeframeSelector = ({ selectedTimeframe, onTimeframeChange, }) => {
     const timeframes = ["1H", "1D", "1W", "1Y"];
     return (jsxRuntime.jsx("div", { className: "tw-mt-squid-s tw-flex tw-justify-center tw-gap-squid-xs", children: timeframes.map((timeframe) => (jsxRuntime.jsx(TimeframeChip, { label: timeframe, isSelected: selectedTimeframe === timeframe, onClick: () => {
                 onTimeframeChange(timeframe);
             } }, timeframe))) }));
 };
-const TokenDetailsView = ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart = DefaultChart, initialTimeframe = DEFAULT_TIMEFRAME, onTimeframeChange = () => { }, onSwapFrom, onSwapTo, }) => {
+const TokenDetailsView = ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart = DefaultChart, initialTimeframe = DEFAULT_TIMEFRAME, onTimeframeChange = () => { }, footerButtons, backdropStyle, colors, }) => {
     const [selectedTimeframe, setSelectedTimeframe] = React$1.useState(initialTimeframe);
     const handleTimeframeChange = (timeframe) => {
         setSelectedTimeframe(timeframe);
         onTimeframeChange(timeframe);
     };
-    return (jsxRuntime.jsx(Modal, { animateOpacity: true, isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", children: jsxRuntime.jsxs(ModalContent, { className: "tw-flex tw-min-h-[631px] tw-flex-col !tw-bg-grey-900 tw-pt-squid-m", children: [jsxRuntime.jsxs("div", { className: "tw-px-squid-m", children: [jsxRuntime.jsx(TokenModalHeader, { token: token, chain: chain, onLikeToken: onLikeToken, isFavorite: isFavorite, onClose: onClose }), jsxRuntime.jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx(Chart, { timeframe: selectedTimeframe }) }), jsxRuntime.jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsxRuntime.jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(SwapButtons, { token: token, onSwapFrom: onSwapFrom, onSwapTo: onSwapTo })] })] }) }));
+    return (jsxRuntime.jsx(Modal, { animateOpacity: true, isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", backdropStyle: backdropStyle, children: jsxRuntime.jsxs(ModalContent, { style: {
+                [BACKGROUND_COLOR_CSS_VARIABLE]: colors === null || colors === void 0 ? void 0 : colors.backgroundColor,
+                [TEXT_COLOR_CSS_VARIABLE]: colors === null || colors === void 0 ? void 0 : colors.textColor,
+            }, className: "tw-flex tw-min-h-[631px] tw-flex-col !tw-bg-grey-900 tw-pt-squid-m", children: [jsxRuntime.jsxs("div", { className: "tw-px-squid-m", children: [jsxRuntime.jsx(TokenModalHeader, { token: token, chain: chain, onLikeToken: onLikeToken, isFavorite: isFavorite, onClose: onClose }), jsxRuntime.jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx(Chart, { timeframe: selectedTimeframe }) }), jsxRuntime.jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxRuntime.jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsxRuntime.jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsxRuntime.jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxRuntime.jsx(FooterButtons, { buttons: footerButtons })] })] }) }));
 };
 
 const WIDTH_SM = "69";
@@ -69650,6 +69715,7 @@ function ThemeProvider(_a) {
 }
 
 exports.ANIMATION_DURATIONS = ANIMATION_DURATIONS;
+exports.AccountListItem = AccountListItem;
 exports.AccountsButton = AccountsButton;
 exports.ActionLayout = ActionLayout;
 exports.ActionLineOutRow = ActionLineOutRow;
@@ -69742,6 +69808,7 @@ exports.CompassRoundSolidIcon = CompassRoundSolidIcon;
 exports.ConsoleIcon = ConsoleIcon;
 exports.Copy = Copy;
 exports.CopyIcon = CopyIcon;
+exports.CopyOutlinedIcon = CopyOutlinedIcon;
 exports.CrossAnimatedIcon = CrossAnimatedIcon;
 exports.CrossedOutSunSolidIcon = CrossedOutSunSolidIcon;
 exports.DashboardFast = DashboardFast;
@@ -69847,6 +69914,7 @@ exports.ProfileHeaderBackground = ProfileHeaderBackground;
 exports.PropertiesLayout = PropertiesLayout;
 exports.PropertyListItem = PropertyListItem;
 exports.PunkIcon = PunkIcon;
+exports.QrCodeIcon = QrCodeIcon;
 exports.RangeInput = RangeInput;
 exports.ReceiptBillIcon = ReceiptBillIcon;
 exports.ReceiveNFTAction = ReceiveNFTAction;

package/dist/cjs/types/components/badges/ImageGroup.d.ts

@@ -1,6 +1,7 @@
+import { type ImageProps } from "./Image";
 interface ImageGroupProps {
     imageUrls: string[];
-    badgeUrl?: string;
+    badge?: Omit<ImageProps, "border" | "size">;
 }
-export declare function ImageGroup({ imageUrls, badgeUrl }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGroup({ imageUrls, badge }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-interface IconButtonProps extends React.ComponentProps<"button"> {
+export interface IconButtonProps extends React.ComponentProps<"button"> {
     icon: React.ReactNode;
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/cjs/types/components/icons/Arrow.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentProps } from "react";
 export declare function ArrowRightIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightDownIcon(): import("react/jsx-runtime").JSX.Element;
 export declare function ArrowRightUpIcon(): import("react/jsx-runtime").JSX.Element;
@@ -17,9 +18,7 @@ export declare function ChevronLargeDownIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function ChevronTopIcon({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronTopIcon(props: ComponentProps<"svg">): import("react/jsx-runtime").JSX.Element;
 export declare function ChevronLargeRightIcon({ size, className, }: {
     size?: string;
     className?: string;

package/dist/cjs/types/components/icons/Generic.d.ts

@@ -62,6 +62,10 @@ export declare function LaptopIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function CopyOutlinedIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function CopyIcon({ size, className, }: {
     size?: string;
     className?: string;
@@ -97,3 +101,7 @@ export declare function StarLinesIcon({ size, className, }: {
     size?: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function QrCodeIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/icons/Plus.d.ts

@@ -1,4 +1,5 @@
-export declare function PlusIcon({ className, size, }: {
+export declare function PlusIcon({ className, size, strokeWidth, }: {
     className?: string;
     size?: string;
+    strokeWidth?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -8,6 +8,7 @@ interface ModalProps {
     maxHeight?: boolean;
     width?: ModalWidth;
     animateOpacity?: boolean;
+    backdropStyle?: React.CSSProperties;
 }
-export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, animateOpacity, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, width, animateOpacity, backdropStyle, }: ModalProps): false | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,8 +4,6 @@ interface Token {
     name: string;
     symbol: string;
     image: string;
-    color: string;
-    textColor: string;
     chainId: string;
 }
 interface Chain {
@@ -33,8 +31,16 @@ interface TokenDetailsViewProps {
     }>;
     initialTimeframe?: Timeframe;
     onTimeframeChange?: (timeframe: Timeframe) => void;
-    onSwapFrom: (token: Pick<Token, "address" | "chainId">) => void;
-    onSwapTo: (token: Pick<Token, "address" | "chainId">) => void;
+    footerButtons: FooterButtonProps[];
+    backdropStyle?: React.CSSProperties;
+    colors?: {
+        backgroundColor: string;
+        textColor: string;
+    };
 }
-export declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart, initialTimeframe, onTimeframeChange, onSwapFrom, onSwapTo, }: TokenDetailsViewProps) => import("react/jsx-runtime").JSX.Element;
+interface FooterButtonProps extends React.ComponentProps<"button"> {
+    label: string;
+    icon: React.ReactNode;
+}
+export declare const TokenDetailsView: ({ isOpen, onClose, token, chain, tokenPrice, priceChange, balance, balanceUSD, volume24h, marketCap, totalSupply, loading, onLikeToken, isFavorite, Chart, initialTimeframe, onTimeframeChange, footerButtons, backdropStyle, colors, }: TokenDetailsViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 interface FromToProps {
     isLoading?: boolean;
     from?: ReactNode;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type IconButtonProps } from "../buttons";
+interface ActionButton extends IconButtonProps {
+    key: NonNullable<React.Key>;
+}
+interface AccountListItemProps {
+    isConnected?: boolean;
+    imageUrls?: string[];
+    imageUrl?: string;
+    badgeUrl?: string;
+    actions?: ActionButton[];
+    title?: string;
+    subtitle?: string;
+    mainButton?: {
+        label: string;
+    } & React.ComponentProps<"button">;
+}
+export declare function AccountListItem({ isConnected, imageUrls, imageUrl, badgeUrl, actions, subtitle, title, mainButton, }: AccountListItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,3 +1,4 @@
+export * from "./AccountListItem";
 export * from "./DropdownMenuItem";
 export * from "./DropdownMenuTitle";
 export * from "./HistoryItem";

package/dist/cjs/types/components/typography/CaptionText.d.ts

@@ -7,6 +7,7 @@ interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
         isLoading?: boolean;
         width?: string;
     };
+    truncate?: boolean;
 }
-export declare function CaptionText({ children, bold, loading, tight, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function CaptionText({ children, bold, loading, tight, truncate, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/stories/badges/ImageGroup.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof ImageGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Badge: Story;
+export declare const CustomBadgeContent: Story;

package/dist/cjs/types/stories/lists/AccountListItem.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AccountListItem } from "../../components/lists/AccountListItem";
+declare const meta: Meta<typeof AccountListItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Disconnected: Story;
+export declare const Connected: Story;
+export declare const Actions: Story;

package/dist/cjs/types/stories/lists/TokenGroup.stories.d.ts

@@ -12,4 +12,6 @@ export declare const LargeVariant: Story;
 export declare const SmallVariant: Story;
 export declare const CompactVariant: Story;
 export declare const LargeVariantWithItems: Story;
+export declare const LargeVariantLongTokenName: Story;
 export declare const CompactVariantWithItems: Story;
+export declare const CompactVariantLongTokenName: Story;

package/dist/cjs/types/stories/views/SwapProgressView.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { SwapProgressView } from "../../components/views/SwapProgressView";
 declare const meta: Meta<typeof SwapProgressView>;
 export default meta;