@0xsquid/ui 2.2.11 → 2.3.1

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/navigation/Tabs.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+type TabSize = "small" | "large";
+interface TabsProps {
+    tabs: Array<{
+        label: string;
+    }>;
+    size?: TabSize;
+    activeTab?: number;
+    onTabChange?: (tabIndex: number) => void;
+}
+export declare function Tabs({ tabs, size, onTabChange, activeTab, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+interface TabProps extends React.ComponentProps<"button"> {
+    label: string;
+    size: TabSize;
+    isActive?: boolean;
+}
+export declare function Tab({ label, isActive, size, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from "./Tabs";

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/services/internal/colorService.d.ts

@@ -36,7 +36,8 @@ export declare function hexToRgb(hex: string): {
     a: number;
 } | null;
 export declare function rgbToHex(r: number, g: number, b: number): string;
-export declare function blendColors(foreground: string, background: string, factor?: number): string | null;
+export declare function blendColors(foreground: string, background: string): string | null;
+export declare function adjustColorForContrast(foreground: string, background: string, factor?: number): string | null;
 export declare const isValidHexColor: (hex: string) => boolean;
 export declare function parseColor(color: string): RGB | null;
 export declare const getColorBrightness: (color: string) => number;

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

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { ImageGroup } from "../../components/badges/ImageGroup";
+declare const meta: Meta<typeof ImageGroup>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/cjs/types/stories/buttons/AccountsButton.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AccountsButton } from "../../components/buttons/AccountsButton";
+declare const meta: Meta<typeof AccountsButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: 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/navigation/Tabs.stories.d.ts

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Tabs } from "../../components/navigation/Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Small: Story;
+export declare const Large: 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;

package/dist/esm/index.js

@@ -3041,6 +3041,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",
@@ -3170,6 +3190,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`,
@@ -3568,13 +3590,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 (jsx(TextSkeleton, { className: className, width: (_c = loading === null || loading === void 0 ? void 0 : loading.width) !== null && _c !== void 0 ? _c : "100%", isLoading: true }));
     }
-    return (jsx("span", Object.assign({}, props, { className: className, children: children })));
+    return (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
@@ -3592,6 +3615,14 @@ function IconLabel({ src, children, rounded }) {
     return (jsxs("div", { className: "tw-inline-flex tw-items-center tw-gap-squid-xxs", children: [src && jsx(Image$1, { src: src, rounded: rounded, size: "medium" }), typeof children === "string" ? (jsx(CaptionText, { children: children })) : (children)] }));
 }
 
+function ImageGroup({ imageUrls, badgeUrl }) {
+    return (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) => (jsx(Image$1, { src: url, size: "medium", rounded: "xxs", style: {
+                    width: "24px",
+                    height: "24px",
+                    borderRadius: "7.5px",
+                } }, url))), jsx("div", { className: "tw-absolute -tw-bottom-[1px] -tw-right-[1px] tw-bg-highlight-700", children: jsx(Image$1, { border: "outline-lg", src: badgeUrl, size: "medium", className: "tw-p-0.5" }) })] }));
+}
+
 function Approve() {
     return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none", viewBox: "0 0 30 31", children: [jsx("path", { fill: "color(display-p3 0.7208 0.5750 0.9250)", d: "M0 5.5a5 5 0 015-5h20a5 5 0 015 5v20a5 5 0 01-5 5H5a5 5 0 01-5-5v-20z" }), jsx("path", { stroke: "color(display-p3 0.9840 0.9861 0.9904)", strokeLinejoin: "round", strokeWidth: "2", d: "M16.454 6.557L16 6.5c-.965 2.309-2.406 4.303-4.107 6.098-.558.589-.893 1.36-.893 2.172v6.455c0 .778.447 1.496 1.178 1.762 2.48.903 5.073 1.097 7.695.87 1.601-.14 2.856-1.376 3.21-2.944l.844-3.755A3 3 0 0021 13.5h-3l.949-3.084a3 3 0 00-2.495-3.86zM6 15.5a2 2 0 012-2 3 3 0 013 3v4a3 3 0 01-3 3 2 2 0 01-2-2v-6z" })] }));
 }
@@ -3620,8 +3651,8 @@ function ChevronTopSmallIcon() {
 function ChevronLargeDownIcon({ size = "24", className, }) {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: 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 (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { 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 (jsx("svg", Object.assign({}, props, { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: 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 (jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M6.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" }) }));
@@ -3921,6 +3952,18 @@ function CodeBracketsIcon({ size = "20", className, }) {
 function CommandIcon({ size = "22", className, }) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 22 22", fill: "none", className: className, children: jsx("path", { d: "M8 17V17C8 16.0219 8.28951 15.0657 8.83205 14.2519L13.1679 7.74808C13.7105 6.93427 14 5.97808 14 5V5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+function NewsIcon({ className }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "34", height: "28", viewBox: "0 0 34 28", fill: "none", className: className, children: [jsx("path", { d: "M22.8645 1H11.1245C5.53665 1 1 5.48783 1 11.0155C1 16.5432 5.53665 21.031 11.1245 21.031H11.4786C12.1978 22.5744 14.4882 26.3727 19.9765 26.9966C20.4965 27.0513 20.8285 26.4383 20.4744 26.0552C19.4011 24.895 18.0401 22.9356 18.8589 21.031H22.8755C28.4633 21.031 33 16.5432 33 11.0155C33 5.48783 28.4633 1 22.8755 1H22.8645Z", fill: "currentColor", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("text", { x: "17", y: "12", fontFamily: "Arial", fontSize: "10", fill: "black", textAnchor: "middle", dominantBaseline: "middle", children: "news" })] }));
+}
+function CelebrateIcon({ className, size = "27", }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 27 27", fill: "none", className: className, children: [jsxs("g", { clipPath: "url(#clip0_1739_52134)", children: [jsx("path", { d: "M15.2972 19.8873L1.47657 26.8989C0.615947 27.3376 -0.295303 26.4179 0.143447 25.5657L7.15501 11.7451L15.2972 19.8873Z", fill: "currentColor" }), jsx("path", { d: "M15.585 19.6563C16.5109 18.7304 15.4264 16.1447 13.1628 13.881C10.8991 11.6173 8.31342 10.5329 7.38752 11.4588C6.46162 12.3847 7.5461 14.9703 9.80978 17.234C12.0735 19.4977 14.6591 20.5822 15.585 19.6563Z", fill: "black" }), jsx("path", { d: "M12.7238 17.314C13.1456 16.8077 13.8459 15.9471 14.3606 15.5505C16.1241 14.1752 18.2588 13.2808 20.5284 13.4412C21.9544 13.5424 23.2622 14.3271 24.705 14.2849C25.8778 14.2512 27.1603 13.399 26.9578 12.0912C26.7553 10.7918 25.3125 10.0155 24.0891 9.76241C22.2581 9.38272 20.4356 9.84679 18.7903 10.6905C16.3856 11.9224 14.2256 13.7618 12.3356 15.6771C12.2934 15.7193 11.6944 16.369 11.6606 16.4027C11.6522 16.4027 11.9644 16.8921 12.7238 17.314Z", fill: "currentColor" }), jsx("path", { d: "M26.6625 22.3172C26.1478 22.8825 25.1691 22.6884 24.5953 22.1822C23.9878 21.6422 23.6419 20.8997 23.1272 20.2837C22.14 19.1194 21.2288 18.3094 19.9294 17.6091C19.4822 17.3644 17.8031 16.7822 17.9297 16.7906C18.1406 16.8075 18.3516 16.8244 18.5625 16.8497C18.9844 16.8919 19.4063 16.9509 19.8281 17.0184C20.6635 17.1534 21.4988 17.3306 22.3088 17.5753C23.8444 18.0394 25.5066 18.765 26.4516 20.1319C26.8988 20.7731 27.2025 21.7266 26.6625 22.3172Z", fill: "currentColor" }), jsx("path", { d: "M14.251 0.0504011C13.635 0.295089 13.4831 1.13884 13.7194 1.75478C13.9641 2.4129 14.4535 2.91915 14.791 3.52665C15.4238 4.68259 15.7866 5.66134 15.9553 6.92696C16.0144 7.36571 15.9806 8.41196 15.9891 8.79165C16.1578 8.2179 16.3181 7.55978 16.3941 7.19696C16.546 6.47978 16.6556 5.76259 16.7147 5.02853C16.8244 3.64478 16.7569 2.09228 15.9469 0.902589C15.5588 0.337276 14.8922 -0.194286 14.251 0.0504011Z", fill: "currentColor" }), jsx("path", { d: "M10.4878 15.0863C11.3737 14.6307 12.6647 13.0275 12.6647 13.0275C15.6769 9.38254 13.9134 4.29472 10.6565 1.48504C9.86342 0.801599 8.94374 0.194099 7.90592 0.0337867C6.87655 -0.126526 5.70374 0.261599 5.17217 1.16441C4.56467 2.22754 5.02874 3.6366 5.88936 4.50566C7.39124 6.03285 9.6778 6.37035 11.1628 7.9566C11.7787 8.60629 12.1837 9.45847 12.2428 10.3697C12.3525 12.1585 9.6778 13.7194 9.55967 13.7785C9.98155 14.5463 9.98155 14.5463 10.4878 15.0863Z", fill: "currentColor" }), jsx("path", { d: "M2.77594 11.9896C4.27177 11.9896 5.48438 10.777 5.48438 9.28119C5.48438 7.78536 4.27177 6.57275 2.77594 6.57275C1.28011 6.57275 0.0675049 7.78536 0.0675049 9.28119C0.0675049 10.777 1.28011 11.9896 2.77594 11.9896Z", fill: "currentColor" }), jsx("path", { d: "M24.0891 5.79674C25.6595 5.79674 26.9325 4.52369 26.9325 2.9533C26.9325 1.38291 25.6595 0.109863 24.0891 0.109863C22.5187 0.109863 21.2456 1.38291 21.2456 2.9533C21.2456 4.52369 22.5187 5.79674 24.0891 5.79674Z", fill: "currentColor" }), jsx("path", { d: "M19.6341 9.13762C20.5148 9.13762 21.2287 8.42365 21.2287 7.54293C21.2287 6.66221 20.5148 5.94824 19.6341 5.94824C18.7533 5.94824 18.0394 6.66221 18.0394 7.54293C18.0394 8.42365 18.7533 9.13762 19.6341 9.13762Z", fill: "currentColor" })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_1739_52134", children: jsx("rect", { width: "27", height: "27", fill: "white" }) }) })] }));
+}
+function SmileFilledIcon({ className, size = "27", }) {
+    return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 27 27", fill: "none", className: className, children: [jsx("path", { d: "M13.3473 25.6812C20.1666 25.6812 25.6947 20.1561 25.6947 13.3406C25.6947 6.52507 20.1666 1 13.3473 1C6.52809 1 1 6.52507 1 13.3406C1 20.1561 6.52809 25.6812 13.3473 25.6812Z", fill: "currentColor", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.2618 16.4004C13.5833 18.38 16.1579 19.2247 18.4518 18.292C20.7457 17.3592 21.9008 15.1253 21.5941 12.8652", fill: "currentColor" }), jsx("path", { d: "M12.2618 16.4004C13.5833 18.38 16.1579 19.2247 18.4518 18.292C20.7457 17.3592 21.9008 15.1253 21.5941 12.8652", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M19.6634 10.5012C19.2946 9.92059 18.557 9.65636 17.8879 9.9108C17.2416 10.1555 16.8695 10.8014 16.9413 11.4571", fill: "currentColor" }), jsx("path", { d: "M19.6634 10.5012C19.2946 9.92059 18.557 9.65636 17.8879 9.9108C17.2416 10.1555 16.8695 10.8014 16.9413 11.4571", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M15.121 12.0857C14.7522 11.5051 14.0146 11.2408 13.3455 11.4953C12.6992 11.7399 12.3271 12.3858 12.3989 13.0415", fill: "currentColor" }), jsx("path", { d: "M15.121 12.0857C14.7522 11.5051 14.0146 11.2408 13.3455 11.4953C12.6992 11.7399 12.3271 12.3858 12.3989 13.0415", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M22.3289 12.7085C21.8132 12.8325 21.2714 12.839 20.7525 12.7346L22.3289 12.7085Z", fill: "currentColor" }), jsx("path", { d: "M22.3289 12.7085C21.8132 12.8325 21.2714 12.839 20.7525 12.7346", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function StarLinesIcon({ 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: "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 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" }) }));
@@ -4178,7 +4221,7 @@ const priceChangeSignToIconMap = {
     [PriceChangeSign.NEGATIVE]: (jsx(ArrowTriangle, { className: "tw-text-status-negative" })),
     [PriceChangeSign.NEUTRAL]: 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
@@ -4254,6 +4297,28 @@ function WalletLink({ imageURI, address }) {
     return (jsx(IconLabel, { src: imageURI, rounded: "full", children: jsx(HashLink, { hash: address, showCopyButton: true, children: jsx(BodyText, { size: "small", children: truncateHash(address) }) }) }));
 }
 
+const extraPaddingMap = {
+    "outline-sm": "1px",
+    "outline-lg": "3px",
+};
+function ImageStack(_a) {
+    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates"]);
+    const imagesToRender = removeDuplicates ? [...new Set(imageUrls)] : imageUrls;
+    return (jsx("div", { style: {
+            // @ts-expect-error Custom CSS property
+            "--image-stack-spacing": spacing,
+            padding: addExtraPadding && imageProps.border
+                ? extraPaddingMap[imageProps.border]
+                : undefined,
+        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imagesToRender.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
+                ? {
+                    style: {
+                        zIndex: self.length - index,
+                    },
+                }
+                : undefined }, imageProps), index))) }));
+}
+
 function Chip(_a) {
     var { label, icon } = _a, props = __rest$1(_a, ["label", "icon"]);
     return (jsx("div", Object.assign({}, props, { className: cn("tw-flex tw-h-squid-m tw-items-center tw-justify-center tw-rounded-squid-m tw-bg-grey-500 tw-text-grey-900", icon && "tw-w-squid-m", props.className), children: label ? (jsx(CaptionText, { className: "tw-min-w-squid-xl tw-text-nowrap tw-px-squid-xxs tw-text-center", children: label })) : (icon) })));
@@ -4321,6 +4386,11 @@ 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) }));
 };
 
+function AccountsButton(_a) {
+    var { imageUrls } = _a, props = __rest$1(_a, ["imageUrls"]);
+    return (jsx(Button$1, Object.assign({}, props, { size: "md", variant: "tertiary", className: cn("tw-group/accounts-button", props.className), children: jsxs("div", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-text-grey-300", children: [jsx(ImageStack, { imageUrls: imageUrls, spacing: "-10px", border: "outline-lg", size: "medium", rounded: "xxs", className: "!tw-outline-button-md-tertiary-bg group-hover/accounts-button:!tw-outline-material-light-blend-grey-800" }), jsx(BodyText, { size: "small", children: "Accounts" }), jsx(ChevronDownSmallIcon, { size: "16" })] }) })));
+}
+
 function AddressButton(_a) {
     var { label, imageUrl, badgeUrl, isLoading } = _a, props = __rest$1(_a, ["label", "imageUrl", "badgeUrl", "isLoading"]);
     return (jsx(Button$1, Object.assign({ size: "md", variant: "tertiary" }, props, { disabled: isLoading, className: !isLoading && imageUrl ? "tw-pl-1 tw-pr-4" : "!tw-px-4", children: isLoading ? (jsx("span", { className: "tw-mx-auto tw-px-4 tw-text-grey-300", children: jsx(Loader, {}) })) : (jsxs(Fragment, { children: [jsx(BadgeImage, { image: {
@@ -18738,7 +18808,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] = useState(_isOpen);
     useEffect(() => {
         if (_isOpen) {
@@ -18760,16 +18830,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: 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: 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 = {
@@ -18865,7 +18937,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
 }
 
 function SwapProgressViewHeader({ title, description, }) {
-    return (jsxs("header", { className: "tw-flex tw-h-[95px] tw-w-full tw-flex-col tw-gap-squid-s tw-bg-grey-800 tw-px-squid-m tw-py-squid-s", children: [jsx(BodyText, { size: "large", className: "tw-h-squid-m !tw-leading-[20px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
+    return (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: [jsx(BodyText, { size: "large", className: "tw-min-h-squid-m !tw-leading-[25px] tw-text-grey-300", children: title }), jsx(CaptionText, { className: "tw-h-squid-l tw-text-grey-500", children: description })] }));
 }
 
 const SPACING = 10;
@@ -19182,28 +19254,6 @@ function DropdownMenuTitle({ title }) {
     return (jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-self-stretch tw-p-squid-xs tw-pb-squid-xxs tw-text-material-light-average", children: jsx(CaptionText, { children: title }) }));
 }
 
-const extraPaddingMap = {
-    "outline-sm": "1px",
-    "outline-lg": "3px",
-};
-function ImageStack(_a) {
-    var { imageUrls, spacing, stackOnTop = true, addExtraPadding, removeDuplicates = false } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop", "addExtraPadding", "removeDuplicates"]);
-    const imagesToRender = removeDuplicates ? [...new Set(imageUrls)] : imageUrls;
-    return (jsx("div", { style: {
-            // @ts-expect-error Custom CSS property
-            "--image-stack-spacing": spacing,
-            padding: addExtraPadding && imageProps.border
-                ? extraPaddingMap[imageProps.border]
-                : undefined,
-        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imagesToRender.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
-                ? {
-                    style: {
-                        zIndex: self.length - index,
-                    },
-                }
-                : undefined }, imageProps), index))) }));
-}
-
 function useOnClickOutside(callback, externalRef) {
     const internalRef = useRef(null);
     const ref = externalRef !== null && externalRef !== void 0 ? externalRef : internalRef;
@@ -19387,7 +19437,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 (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: 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: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsx(Text, { className: cn("tw-flex-1 tw-text-grey-500", labelClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsx(Text, { className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
+    return (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: 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: [jsx("div", { className: cn("tw-w-6 tw-text-grey-500", iconClassName), children: icon }), jsx(Text, { className: cn("tw-min-w-fit tw-flex-1 tw-text-grey-500", labelClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: label }) }), jsx(Text, { truncate: variant === "small" || undefined, className: cn("tw-flex tw-text-grey-300", detailClassName), children: jsx(TextSkeleton, { isLoading: isLoading, children: detail }) })] }) })));
 }
 
 function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
@@ -19496,7 +19546,9 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
     const handleToggleCollapsed = useCallback(() => {
         setIsCollapsed((prev) => !prev);
     }, []);
-    return (jsxs("li", { className: cn("tw-w-full tw-self-stretch", extraSpacing && "tw-px-squid-xs tw-pt-squid-xs", !isCollapsed &&
+    return (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: [jsxs(ContentTag, { onClick: (event) => {
                     onClick === null || onClick === void 0 ? void 0 : onClick(event);
                     if (isCollapsible)
@@ -19504,7 +19556,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
@@ -19512,7 +19564,7 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                         : "tw-h-squid-xl tw-gap-squid-xxs"
                     : isSmallVariant
                         ? "tw-h-[50px] tw-gap-squid-s tw-py-squid-xxs"
-                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxs("div", { className: "tw-relative", children: [jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
+                        : "tw-h-squid-xl tw-gap-squid-xxs"), children: [jsxs("div", { className: "tw-relative tw-min-w-fit", children: [jsx(Image$1, { src: imageUrl, size: isLargeVariant && !isCollapsed
                                     ? "medium"
                                     : (_a = mainImageSizeMap[variant]) !== null && _a !== void 0 ? _a : "medium", rounded: isCompactVariant ? "xxs" : "full", style: {
                                     transition: `${ANIMATION_DURATIONS.GENERIC}ms ${ANIMATION_TIMINGS.GENERIC}`,
@@ -19530,8 +19582,19 @@ function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, bala
                                     ? "-tw-bottom-0 -tw-right-0"
                                     : "-tw-bottom-[3px] -tw-right-[3px]"), children: 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] }) }))] }), 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: [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: [jsx(BodyText, { size: "small", className: "tw-h-fit !tw-leading-[13px]", children: name }), (!isCollapsed || isCompactVariant) && (jsx(ChevronTopIcon, { className: cn("tw-text-grey-500", isCollapsed ? "tw-rotate-90" : "tw-rotate-180") })), balanceUsd ? (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 ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "!tw-leading-[10px] tw-opacity-66", children: "$" }), jsx(CaptionText, { className: "!tw-leading-[10px]", children: balanceUsd })] })) : (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", className: "!tw-leading-[10px] tw-opacity-66", children: "$" }), jsx(BodyText, { size: "small", className: "!tw-leading-[10px]", children: balanceUsd })] })) })) : null] }), !isCompactVariant && (jsx(Collapse, { collapsed: !isCollapsed, contentsClassName: "tw-flex tw-w-full tw-items-start tw-justify-between", className: "tw-w-full", children: jsxs("div", { className: cn("tw-flex tw-w-full tw-items-center tw-justify-between tw-self-stretch", isLargeVariant && "tw-h-squid-m"), children: [jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: jsxs(CaptionText, { className: "!tw-leading-[10px]", children: [balance, symbol] }) }), priceChange && jsx(PriceChange, { value: priceChange })] }) }))] })] }), jsx(Collapse, { collapsed: isCollapsed, children: 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) => (jsx(TokenGroup, Object.assign({}, token, { extraSpacing: false, variant: isCompactVariant ? "small" : "large", onClick: () => onChildClick === null || onChildClick === void 0 ? void 0 : onChildClick(token) }), token.chainImageUrl))) }) })] }));
+                                        : [chainImageUrl] }) }))] }), 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: [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: [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 && (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 ? (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 ? (jsxs(Fragment, { children: [jsx(CaptionText, { className: "tw-opacity-66", children: "$" }), jsx(CaptionText, { children: balanceUsd })] })) : (jsxs(Fragment, { children: [jsx(BodyText, { size: "small", className: "tw-opacity-66", children: "$" }), jsx(BodyText, { size: "small", children: balanceUsd })] })) })) : null] }), !isCompactVariant && (jsx(Collapse, { collapsed: !isCollapsed, contentsClassName: "tw-flex tw-w-full tw-items-start tw-justify-between", className: "tw-w-full", children: jsxs("div", { className: cn("tw-flex tw-w-full tw-items-center tw-justify-between tw-self-stretch", isLargeVariant && "tw-h-squid-m"), children: [jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: jsxs(CaptionText, { children: [balance, " ", symbol] }) }), priceChange && jsx(PriceChange, { value: priceChange })] }) }))] })] }), jsx(Collapse, { collapsed: isCollapsed, children: 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) => (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 = jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
@@ -19672,7 +19735,7 @@ function TransactionAction({ type, props }) {
 }
 
 function Transfer({ isLoading, from, to, className }) {
-    return (jsx("div", { className: cn("tw-flex tw-items-center tw-gap-squid-xxs", className), children: jsxs(Join, { glue: () => jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? jsx(TextSkeleton, {}) : from, isLoading ? jsx(TextSkeleton, {}) : to] }) }));
+    return (jsx("div", { className: cn("tw-flex tw-max-w-full tw-items-center tw-gap-squid-xxs", className), children: jsxs(Join, { glue: () => jsx(ChevronLargeRightIcon, { className: "tw-text-grey-500" }), children: [isLoading ? (jsx(TextSkeleton, {})) : typeof from === "string" ? (jsx(CaptionText, { truncate: true, children: from })) : (from), isLoading ? (jsx(TextSkeleton, {})) : typeof to === "string" ? (jsx(CaptionText, { truncate: true, children: to })) : (to)] }) }));
 }
 
 function TransactionItem({ className, isLoading = false, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant = "full", }) {
@@ -19792,6 +19855,8 @@ function Toast({ headerContent, actionsContent, description, chipLabel, title, }
         }, rounded: "sm", children: [headerContent, 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: jsx(BodyText, { size: "small", className: "tw-text-grey-100", children: title }) }), jsx(CaptionText, { className: "tw-text-center tw-text-material-light-thick", children: description }), 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 && (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, }) => (jsx("div", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center", children: jsxs(BodyText, { size: "small", children: ["Chart (", timeframe, ")"] }) }));
 const TokenModalHeader = ({ token, chain, onLikeToken, onClose, isFavorite, }) => (jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between", children: [jsx("div", { className: "tw-flex tw-items-center tw-gap-squid-xs tw-pb-squid-xs", children: jsx(BadgeImage, { image: {
@@ -19809,34 +19874,35 @@ const TokenInfo = ({ token, tokenPrice, priceChange, loading, }) => (jsxs("div",
 const BalanceInfo = ({ balance, balanceUSD, token, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-400", children: "Balance" }), jsxs("div", { className: "tw-flex tw-flex-row tw-justify-between", children: [jsxs("span", { className: "tw-flex tw-flex-row tw-items-center tw-gap-squid-xxs", children: [jsx("img", { src: token.image, alt: token.name, className: "tw-h-squid-m tw-w-squid-m tw-rounded-full" }), jsxs(BodyText, { size: "small", loading: { isLoading: loading, width: "80px" }, children: [balance, " ", token.symbol] })] }), jsxs(CaptionText, { className: "tw-text-grey-500", loading: { isLoading: loading, width: "60px" }, children: [jsx("span", { className: "tw-opacity-66", children: "$" }), balanceUSD] })] })] }));
 const MarketDataItem = ({ label, value, showDollar, loading, }) => (jsxs("div", { className: "tw-flex tw-flex-col", children: [jsx(CaptionText, { className: "tw-text-grey-500", children: label }), jsxs(CaptionText, { loading: { isLoading: loading, width: "60px" }, children: [showDollar && jsx("span", { className: "tw-text-grey-500", children: "$" }), value] })] }));
 const TokenMarketData = ({ volume24h, marketCap, totalSupply, loading, }) => (jsxs("div", { className: "tw-flex tw-h-full tw-w-full tw-flex-row tw-items-center tw-justify-between", children: [jsx(MarketDataItem, { label: "24h volume", value: volume24h, showDollar: true, loading: loading }), jsx(MarketDataItem, { label: "Market cap", value: marketCap, showDollar: true, loading: loading }), jsx(MarketDataItem, { label: "Total supply", value: totalSupply, loading: loading })] }));
-const SwapButton = ({ label, color, icon, onClick, textColor, }) => (jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [jsx(IconButton, { icon: icon, className: "tw-text-grey-900", style: {
-                height: "40px",
-                width: "40px",
-                borderRadius: "100%",
-                backgroundColor: color,
-                color: textColor,
-            }, onClick: onClick }), jsx(CaptionText, { className: "tw-text-grey-400", children: label })] }));
-const SwapButtons = ({ token, onSwapFrom, onSwapTo, }) => (jsxs("div", { className: "tw-flex tw-justify-between tw-py-5", children: [jsx(SwapButton, { label: "Swap From", color: token.color, textColor: token.textColor, icon: jsx(ArrowUpIcon, {}), onClick: () => {
-                onSwapFrom({ address: token.address, chainId: token.chainId });
-            } }), jsx(SwapButton, { label: "Swap To", color: token.color, textColor: token.textColor, icon: jsx(ArrowDownIcon, {}), onClick: () => {
-                onSwapTo({ address: token.address, chainId: token.chainId });
-            } })] }));
-const TimeframeChip = ({ label, isSelected, onClick, }) => (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 (jsxs("div", { className: "tw-flex tw-flex-1 tw-flex-col tw-items-center tw-justify-center tw-gap-squid-xs", children: [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 })), jsx(CaptionText, { className: props.disabled ? "tw-text-grey-700" : "tw-text-grey-400", children: label })] }));
+};
+const FooterButtons = ({ buttons }) => (jsx("div", { className: "tw-flex tw-justify-between tw-py-5", children: buttons.map((button) => (jsx(FooterButton, Object.assign({}, button), button.label))) }));
+const TimeframeChip = ({ label, isSelected, onClick, }) => (jsx("button", { onClick: onClick, className: "tw-rounded-squid-m", children: 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 (jsx("div", { className: "tw-mt-squid-s tw-flex tw-justify-center tw-gap-squid-xs", children: timeframes.map((timeframe) => (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] = useState(initialTimeframe);
     const handleTimeframeChange = (timeframe) => {
         setSelectedTimeframe(timeframe);
         onTimeframeChange(timeframe);
     };
-    return (jsx(Modal, { animateOpacity: true, isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", children: jsxs(ModalContent, { className: "tw-flex tw-min-h-[631px] tw-flex-col !tw-bg-grey-900 tw-pt-squid-m", children: [jsxs("div", { className: "tw-px-squid-m", children: [jsx(TokenModalHeader, { token: token, chain: chain, onLikeToken: onLikeToken, isFavorite: isFavorite, onClose: onClose }), jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsx(Loader, {}) : jsx(Chart, { timeframe: selectedTimeframe }) }), jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsx(SwapButtons, { token: token, onSwapFrom: onSwapFrom, onSwapTo: onSwapTo })] })] }) }));
+    return (jsx(Modal, { animateOpacity: true, isOpen: isOpen, onBackdropClick: onClose, width: "extra-large", className: "tw-my-auto", backdropStyle: backdropStyle, children: 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: [jsxs("div", { className: "tw-px-squid-m", children: [jsx(TokenModalHeader, { token: token, chain: chain, onLikeToken: onLikeToken, isFavorite: isFavorite, onClose: onClose }), jsx(TokenInfo, { token: token, tokenPrice: tokenPrice, priceChange: priceChange, loading: loading })] }), jsxs("div", { className: "tw-flex tw-w-full tw-grow tw-flex-col tw-justify-between tw-text-center", children: [jsx("span", { className: "tw-flex tw-h-full tw-grow tw-items-center tw-justify-center", children: loading ? jsx(Loader, {}) : jsx(Chart, { timeframe: selectedTimeframe }) }), jsx(ChartTimeframeSelector, { selectedTimeframe: selectedTimeframe, onTimeframeChange: handleTimeframeChange })] }), jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsxs("div", { className: "tw-flex tw-flex-col", children: [jsxs("div", { className: "tw-gap-squid-sm tw-flex tw-flex-col tw-px-squid-m", children: [jsx(BalanceInfo, { balance: balance, balanceUSD: balanceUSD, token: token, loading: loading }), jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsx(TokenMarketData, { volume24h: volume24h, marketCap: marketCap, totalSupply: totalSupply, loading: loading })] }), jsx("hr", { className: "tw-my-squid-xs tw-h-px tw-border-0 tw-bg-material-light-thin" }), jsx(FooterButtons, { buttons: footerButtons })] })] }) }));
 };
 
 const WIDTH_SM = "69";
@@ -27559,16 +27625,16 @@ function FilterButton({ selected, numApplied = 0, onClick, }) {
                     : "!tw-border-transparent !tw-bg-grey-800 !tw-text-grey-500"), onClick: onClick, children: jsx(FilterIcon, {}) }), numApplied > 0 && (jsx("div", { className: "tw-absolute tw-right-0 tw-top-0 tw-h-squid-m tw-w-squid-xl -tw-translate-y-1/2 tw-translate-x-1/2 tw-rounded-full tw-bg-highlight-700 tw-text-center tw-leading-[1]", children: jsx(CaptionText, { children: numApplied }) }))] }));
 }
 
-function SettingsButton({ label, isSelected = false, onClick, }) {
-    return (jsx("button", { onClick: onClick, className: cn("tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs -tw-outline-offset-2 hover:tw-bg-material-light-thin", isSelected && "tw-outline tw-outline-2 tw-outline-royal-500"), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
-}
-
 const IconButton = forwardRef((_a, ref) => {
     var { icon, disabled = false } = _a, props = __rest$1(_a, ["icon", "disabled"]);
     return (jsx("button", Object.assign({}, props, { ref: ref, disabled: disabled, className: cn("tw-flex tw-h-8 tw-w-8 tw-min-w-8 tw-items-center tw-justify-center tw-rounded-squid-xs hover:tw-bg-material-light-thin", disabled ? "tw-text-grey-600" : "tw-text-grey-300", props.className), children: icon })));
 });
 IconButton.displayName = "IconButton";
 
+function SettingsButton({ label, isSelected = false, onClick, }) {
+    return (jsx("button", { onClick: onClick, className: cn("tw-flex tw-h-[30px] tw-items-center tw-justify-center tw-self-stretch tw-rounded-squid-xs tw-border-2 tw-border-transparent tw-p-squid-xs -tw-outline-offset-2 hover:tw-bg-material-light-thin", isSelected && "tw-outline tw-outline-2 tw-outline-royal-500"), children: jsx(CaptionText, { className: "!tw-font-medium", children: label }) }));
+}
+
 function AssetsView({ chains, favoriteTokens, popularTokens, userTokens, }) {
     const matchesMobileLg = useMediaQuery(MEDIA_QUERIES.MOBILE_LG.media);
     return (jsxs(ProductCard, { children: [jsx(NavigationBar, { displayBackButton: true, subtitle: "Select a token to receive" }), jsx("div", { className: "tw-max-h-[60px] tw-px-squid-m tw-py-squid-xs", children: jsx(Input, {}) }), jsx(BorderedContainer, { children: jsxs("div", { className: cn("tw-grid", matchesMobileLg
@@ -69536,7 +69602,17 @@ function rgbToHex(r, g, b) {
 // let bgColor = '#17191C'
 // let resultingColor = blendColors(foregroundColor, bgColor)
 // console.log(resultingColor) // Output: ~#2f3033
-function blendColors(foreground, background, factor = 1) {
+function blendColors(foreground, background) {
+    const fg = hexToRgb(foreground);
+    const bg = hexToRgb(background);
+    if (fg == null || bg == null)
+        return null;
+    const r = Math.round(fg.r * fg.a + bg.r * (1 - fg.a));
+    const g = Math.round(fg.g * fg.a + bg.g * (1 - fg.a));
+    const b = Math.round(fg.b * fg.a + bg.b * (1 - fg.a));
+    return rgbToHex(r, g, b);
+}
+function adjustColorForContrast(foreground, background, factor = 1) {
     const fg = parseColor(foreground);
     const bg = parseColor(background);
     if (fg == null || bg == null)
@@ -69594,4 +69670,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, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button$1 as Button, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, 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, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, 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, ImageIcon, ImageSparkle, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, SettingsButton, SettingsGearIcon, SettingsItem, SettingsSlider, SettingsSliderIcon, ShoppingBagIcon, SizeTransition, SmileIcon, SnapIcon, SortIcon, SparkleIcon, SparklesIcon, SquareArrowCenter, SquareArrowTopLeftIcon, SquareArrowTopRight2Icon, SquidLogo, SquidVector, StakeAction, StartAction, StocksIcon, SuccessAction, SunIcon, SunOutlinedIcon, SunriseIcon, SunriseSmallIcon, SwapAction, SwapConfiguration, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, WrapAction, XSocial, baseTailwindConfig, blendColors, cn, darkTheme, getColorBrightness, getContrastColor, getHexColorFromOpacityPercentage, getWalletCardBackground, hexToRgb, isValidHexColor, lightTheme, linkActionTimelineProps, parseColor, parseSquidTheme, pxToRem, remToPx, rgbToHex, spacing$1 as spacing, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { ANIMATION_DURATIONS, AccountsButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, ActionStatusRow, ActionWrapper, AddressButton, AnimationWrapper, Announcement, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, 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, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, 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, ImageState, IncompleteAction, InfinityIcon, InfoBox, Inline, Input, InteractionHeader, InteractionProperties, InteractionTransactionView, Join, LaptopIcon, LightningIcon, LimitIcon, LinkIcon, List, ListItem, ListItemActionsButton, Loader, LoadingProvider, LoadingSkeleton, MEDIA_QUERIES, MainView, MarketCapIcon, MaxIcon, Menu, MenuItem, MenuSwapIcon, MirrorIcon, Modal, ModalContent, ModalContentDivider, MoonIcon, NavigationBar, NewsIcon, NewspaperIcon, NotAllowedIcon, NumericInput, PathSquareIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PipeSeparator, PlusIcon, PoopIcon, PowerIcon, PriceChange, ProductCard, ProfileHeader, ProfileHeaderBackground, PropertiesLayout, PropertyListItem, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, 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, SwapDetailsView, SwapErrorIcon, SwapHeader, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, TagIcon, TagIconFilled, TextSkeleton, ThemePreference, ThemeProvider, ThumbsUp, Tick, TimeFliesIcon, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, TokenPair, Tooltip, TradingViewStepsIcon, TransactionAction, TransactionFilters, TransactionHeader, TransactionHeaderLayout, TransactionItem, TransactionProperties, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, Transfer, TranslateIcon, TriangleExclamation, UsdAmount, WalletFilledIcon, WalletIcon, WalletLink, WalletsView, 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, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

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

@@ -0,0 +1,6 @@
+interface ImageGroupProps {
+    imageUrls: string[];
+    badgeUrl?: string;
+}
+export declare function ImageGroup({ imageUrls, badgeUrl }: ImageGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/components/badges/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./BadgeImage";
 export * from "./IconLabel";
 export * from "./Image";
+export * from "./ImageGroup";
 export * from "./LoadingSkeleton";
 export * from "./PriceChange";
 export * from "./TransactionState";