@0xsquid/ui 2.2.8 → 2.2.9-beta.1

package/dist/cjs/index.js

@@ -19179,11 +19179,27 @@ function DropdownMenuItemWithSubmenu(_a) {
                 }, children: submenu })) })) }));
 }
 
+function DropdownMenuTitle({ title }) {
+    return (jsxRuntime.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: jsxRuntime.jsx(CaptionText, { children: title }) }));
+}
+
 function ImageStack(_a) {
     var { imageUrls, spacing, stackOnTop = true } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop"]);
-    return (jsxRuntime.jsx("div", { 
-        // @ts-expect-error - Custom CSS property
-        style: { "--image-stack-spacing": spacing }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imageUrls.map((url, index, self) => (jsxRuntime.jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
+    const extraPadding = (() => {
+        switch (imageProps.border) {
+            case "outline-sm":
+                return "1px";
+            case "outline-lg":
+                return "3px";
+            default:
+                return "0px";
+        }
+    })();
+    return (jsxRuntime.jsx("div", { style: {
+            // @ts-expect-error Custom CSS property
+            "--image-stack-spacing": spacing,
+            padding: extraPadding,
+        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imageUrls.map((url, index, self) => (jsxRuntime.jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
@@ -19378,6 +19394,16 @@ function PropertyListItem(_a) {
     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 }) })] }) })));
 }
 
+function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
+    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-self-stretch", children: [jsxRuntime.jsx(Track, { imageUrl: imageUrl }), jsxRuntime.jsx(Label, { subtitle: subtitle, descriptionBlocks: descriptionBlocks })] }), showStepSeparator && (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-justify-center", children: jsxRuntime.jsx("div", { className: "tw-h-squid-m tw-w-1 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-500 tw-to-grey-800" }) }))] }));
+}
+function Track({ imageUrl }) {
+    return (jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-w-squid-xxl tw-min-w-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-xs", children: jsxRuntime.jsx("img", { src: imageUrl, alt: "", className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }) }));
+}
+function Label({ subtitle, descriptionBlocks, }) {
+    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs tw-pr-squid-m tw-text-grey-500", children: jsxRuntime.jsx(CaptionText, { children: subtitle }) }), jsxRuntime.jsx(DescriptionBlocks, { blocks: descriptionBlocks, className: "tw-py-squid-xxs tw-pr-squid-m tw-text-grey-300" })] }));
+}
+
 function SectionTitle(_a) {
     var { title, icon, accessory, actionIcon, className } = _a, props = __rest$1(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
     return (jsxRuntime.jsxs("header", Object.assign({}, props, { className: cn("tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-500", className), children: [icon, jsxRuntime.jsx(CaptionText, { children: title }), accessory ? (jsxRuntime.jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
@@ -19456,6 +19482,57 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
         }, className: "tw-relative tw-flex tw-w-full tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxRuntime.jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn("tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs", !!link && "hover:tw-bg-material-light-thin", statusTextClass), rel: "noreferrer", children: [jsxRuntime.jsxs("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: [jsxRuntime.jsx(Chip, { style: transitionStyle, className: cn("tw-w-squid-xl", statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsxRuntime.jsx("span", { className: cn(separatorClassMap[status], "tw-absolute tw-left-0 tw-top-full tw-mt-0.5"), style: transitionStyle, children: jsxRuntime.jsx(SwapStepSeparator, {}) }))] }), jsxRuntime.jsx(DescriptionBlocks, { className: "tw-min-h-squid-l tw-py-squid-xxs tw-pr-squid-xs", blocks: descriptionBlocks })] }) }));
 }
 
+const DEFAULT_MAX_PREVIEW_ITEMS = 11;
+const mainImageSizeMap = {
+    compact: "medium",
+    large: "xxlarge",
+    small: "xlarge",
+};
+function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems = DEFAULT_MAX_PREVIEW_ITEMS, variant = "large", className, onChildClick, address, chainId, }) {
+    var _a;
+    const [isCollapsed, setIsCollapsed] = React$1.useState(true);
+    const isCollapsible = tokenItems && tokenItems.length > 0;
+    const isInteractive = onClick != null || isCollapsible;
+    const isCompactVariant = variant === "compact";
+    const isLargeVariant = variant === "large";
+    const isSmallVariant = variant === "small";
+    const ContentTag = isInteractive ? "button" : "div";
+    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 &&
+            "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)
+                        handleToggleCollapsed();
+                }, 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
+                        ? "tw-h-[80px] tw-gap-squid-s"
+                        : "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.jsx(BadgeImage, { image: {
+                            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.SHOW_ROUTE}`,
+                                transitionProperty: "width, height",
+                            },
+                        }, badge: isCollapsed && !isCompactVariant
+                            ? {
+                                size: "medium",
+                                rounded: "xxs",
+                                border: "outline-lg",
+                                src: chainImageUrl,
+                                children: tokenItems && (jsxRuntime.jsx("span", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-grey-700 tw-text-grey-300", children: jsxRuntime.jsx(CaptionText, { children: tokenItems.length }) })),
+                            }
+                            : undefined }), 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"), 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", !isSmallVariant), children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: [tokenItems ? (jsxRuntime.jsx(ImageStack, { spacing: "-10px", size: "medium", rounded: "xxs", border: "outline-lg", imageUrls: tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.slice(0, maxPreviewItems).map((item) => item.chainImageUrl) })) : (jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px]", children: balance })), jsxRuntime.jsx(CaptionText, { className: "!tw-leading-[10px]", children: symbol })] }), priceChange && jsxRuntime.jsx(PriceChange, Object.assign({}, 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))) }) })] }));
+}
+
 function ActionLayout({ lineCap = jsxRuntime.jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
     return (jsxRuntime.jsxs(ActionWrapper, { status: status, children: [jsxRuntime.jsx(ActionLineOutRow, { status: nextStatus }), jsxRuntime.jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ActionRow, { children: jsxRuntime.jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsxRuntime.jsx(Timeline.CapTop, {}), jsxRuntime.jsx(Timeline.Straight, {}), jsxRuntime.jsx(Timeline.CapBottom, {})] }) }), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), jsxRuntime.jsx(BodyText, { size: "large", className: cn("tw-flex tw-min-h-squid-l tw-items-center !tw-leading-[1] tw-text-grey-300 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0"), children: title })] })] })), jsxRuntime.jsxs(ActionRow, { children: [jsxRuntime.jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsxRuntime.jsx(Timeline.Straight, {})] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xs tw-pb-squid-xs tw-text-grey-500 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0", title && "tw-pt-squid-xxs"), children: children })] })] }));
 }
@@ -19621,20 +19698,6 @@ const TxTypeLabel = ({ type }) => {
     return (jsxRuntime.jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] }));
 };
 
-function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
-    return (jsxRuntime.jsxs("li", { className: "tw-flex tw-flex-col tw-self-stretch", children: [jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-self-stretch", children: [jsxRuntime.jsx(Track, { imageUrl: imageUrl }), jsxRuntime.jsx(Label, { subtitle: subtitle, descriptionBlocks: descriptionBlocks })] }), showStepSeparator && (jsxRuntime.jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-justify-center", children: jsxRuntime.jsx("div", { className: "tw-h-squid-m tw-w-1 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-500 tw-to-grey-800" }) }))] }));
-}
-function Track({ imageUrl }) {
-    return (jsxRuntime.jsx("div", { className: "tw-relative tw-flex tw-w-squid-xxl tw-min-w-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-xs", children: jsxRuntime.jsx("img", { src: imageUrl, alt: "", className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }) }));
-}
-function Label({ subtitle, descriptionBlocks, }) {
-    return (jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [jsxRuntime.jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs tw-pr-squid-m tw-text-grey-500", children: jsxRuntime.jsx(CaptionText, { children: subtitle }) }), jsxRuntime.jsx(DescriptionBlocks, { blocks: descriptionBlocks, className: "tw-py-squid-xxs tw-pr-squid-m tw-text-grey-300" })] }));
-}
-
-function DropdownMenuTitle({ title }) {
-    return (jsxRuntime.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: jsxRuntime.jsx(CaptionText, { children: title }) }));
-}
-
 const STEPS_LIST_HEIGHT = 400;
 const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
     const { steps, currentStepIndex: _newStepIndex, onOpen, onClose, footerButton, } = props;
@@ -69788,6 +69851,7 @@ exports.Timeline = Timeline;
 exports.Timestamp = Timestamp;
 exports.Toast = Toast;
 exports.TokenDetailsView = TokenDetailsView;
+exports.TokenGroup = TokenGroup;
 exports.TokenPair = TokenPair;
 exports.Tooltip = Tooltip;
 exports.TradingViewStepsIcon = TradingViewStepsIcon;

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { type PriceChange as TPriceChange } from "../../types/components";
 type TokenGroupVariant = "compact" | "large" | "small";
-export interface TokenGroupProps {
+export interface TokenGroupProps<T extends TokenGroupProps<T>> {
+    address?: string;
+    chainId?: string;
     isSelected?: boolean;
     imageUrl: string;
     symbol: string;
@@ -10,11 +12,13 @@ export interface TokenGroupProps {
     balance?: string;
     balanceUsd?: string;
     priceChange?: TPriceChange;
-    tokenItems?: TokenGroupProps[];
+    tokenItems?: T[];
     extraSpacing?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     maxPreviewItems?: number;
     variant?: TokenGroupVariant;
+    className?: string;
+    onChildClick?: (tokenProps: T) => void;
 }
-export declare function TokenGroup({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems, variant, }: TokenGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems, variant, className, onChildClick, address, chainId, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,14 @@
 export * from "./DropdownMenuItem";
+export * from "./DropdownMenuTitle";
 export * from "./HistoryItem";
 export * from "./ListItem";
 export * from "./MenuItem";
 export * from "./PropertyListItem";
+export * from "./RouteStep";
 export * from "./SectionTitle";
 export * from "./SettingsItem";
 export * from "./SwapStepItem";
+export * from "./TokenGroup";
 export * from "./TransactionAction/ActionLayout";
 export * from "./TransactionAction/ApproveAction";
 export * from "./TransactionAction/BaseActionProps";
@@ -23,5 +26,3 @@ export * from "./TransactionAction/SwapAction";
 export * from "./TransactionAction/TransactionAction";
 export * from "./TransactionAction/WrapAction";
 export * from "./TransactionItem";
-export * from "./RouteStep";
-export * from "./DropdownMenuTitle";

package/dist/esm/index.js

@@ -19159,11 +19159,27 @@ function DropdownMenuItemWithSubmenu(_a) {
                 }, children: submenu })) })) }));
 }
 
+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 }) }));
+}
+
 function ImageStack(_a) {
     var { imageUrls, spacing, stackOnTop = true } = _a, imageProps = __rest$1(_a, ["imageUrls", "spacing", "stackOnTop"]);
-    return (jsx("div", { 
-        // @ts-expect-error - Custom CSS property
-        style: { "--image-stack-spacing": spacing }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imageUrls.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
+    const extraPadding = (() => {
+        switch (imageProps.border) {
+            case "outline-sm":
+                return "1px";
+            case "outline-lg":
+                return "3px";
+            default:
+                return "0px";
+        }
+    })();
+    return (jsx("div", { style: {
+            // @ts-expect-error Custom CSS property
+            "--image-stack-spacing": spacing,
+            padding: extraPadding,
+        }, className: "tw-flex tw-items-center tw-space-x-[--image-stack-spacing]", children: imageUrls.map((url, index, self) => (jsx(Image$1, Object.assign({ src: url, containerProps: stackOnTop
                 ? {
                     style: {
                         zIndex: self.length - index,
@@ -19358,6 +19374,16 @@ function PropertyListItem(_a) {
     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 }) })] }) })));
 }
 
+function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
+    return (jsxs("li", { className: "tw-flex tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-items-center tw-self-stretch", children: [jsx(Track, { imageUrl: imageUrl }), jsx(Label, { subtitle: subtitle, descriptionBlocks: descriptionBlocks })] }), showStepSeparator && (jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-justify-center", children: jsx("div", { className: "tw-h-squid-m tw-w-1 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-500 tw-to-grey-800" }) }))] }));
+}
+function Track({ imageUrl }) {
+    return (jsx("div", { className: "tw-relative tw-flex tw-w-squid-xxl tw-min-w-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-xs", children: jsx("img", { src: imageUrl, alt: "", className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }) }));
+}
+function Label({ subtitle, descriptionBlocks, }) {
+    return (jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs tw-pr-squid-m tw-text-grey-500", children: jsx(CaptionText, { children: subtitle }) }), jsx(DescriptionBlocks, { blocks: descriptionBlocks, className: "tw-py-squid-xxs tw-pr-squid-m tw-text-grey-300" })] }));
+}
+
 function SectionTitle(_a) {
     var { title, icon, accessory, actionIcon, className } = _a, props = __rest$1(_a, ["title", "icon", "accessory", "actionIcon", "className"]);
     return (jsxs("header", Object.assign({}, props, { className: cn("tw-flex tw-h-[46px] tw-w-full tw-items-center tw-gap-squid-xxs tw-bg-grey-900 tw-px-squid-m tw-pb-squid-xs tw-pt-squid-m tw-text-royal-500", className), children: [icon, jsx(CaptionText, { children: title }), accessory ? (jsx(CaptionText, { className: "tw-flex-1 tw-text-right tw-text-grey-500", children: accessory })) : actionIcon ? (jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end", children: actionIcon })) : null] })));
@@ -19436,6 +19462,57 @@ function SwapStepItem({ descriptionBlocks, showStepSeparator = false, link, stat
         }, className: "tw-relative tw-flex tw-w-full tw-flex-col tw-items-start tw-justify-center tw-text-grey-300 tw-transition-colors tw-duration-1000", children: jsxs("a", { href: link, target: "_blank", style: Object.assign(Object.assign({}, transitionStyle), { maxHeight: `${STEP_ITEM_HEIGHT}px` }), className: cn("tw-group/swap-step-item tw-flex tw-w-full tw-items-center tw-rounded-squid-xs tw-py-squid-xxs", !!link && "hover:tw-bg-material-light-thin", statusTextClass), rel: "noreferrer", children: [jsxs("span", { className: "tw-relative tw-flex tw-min-h-squid-l tw-items-center tw-justify-center tw-gap-squid-xxs tw-px-squid-xs", children: [jsx(Chip, { style: transitionStyle, className: cn("tw-w-squid-xl", statusBgClassMap[status]), icon: chipContent }), showStepSeparator && (jsx("span", { className: cn(separatorClassMap[status], "tw-absolute tw-left-0 tw-top-full tw-mt-0.5"), style: transitionStyle, children: jsx(SwapStepSeparator, {}) }))] }), jsx(DescriptionBlocks, { className: "tw-min-h-squid-l tw-py-squid-xxs tw-pr-squid-xs", blocks: descriptionBlocks })] }) }));
 }
 
+const DEFAULT_MAX_PREVIEW_ITEMS = 11;
+const mainImageSizeMap = {
+    compact: "medium",
+    large: "xxlarge",
+    small: "xlarge",
+};
+function TokenGroup({ isSelected = false, tokenItems, priceChange, balance, balanceUsd, extraSpacing = true, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems = DEFAULT_MAX_PREVIEW_ITEMS, variant = "large", className, onChildClick, address, chainId, }) {
+    var _a;
+    const [isCollapsed, setIsCollapsed] = useState(true);
+    const isCollapsible = tokenItems && tokenItems.length > 0;
+    const isInteractive = onClick != null || isCollapsible;
+    const isCompactVariant = variant === "compact";
+    const isLargeVariant = variant === "large";
+    const isSmallVariant = variant === "small";
+    const ContentTag = isInteractive ? "button" : "div";
+    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 &&
+            "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)
+                        handleToggleCollapsed();
+                }, 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
+                        ? "tw-h-[80px] tw-gap-squid-s"
+                        : "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: [jsx(BadgeImage, { image: {
+                            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.SHOW_ROUTE}`,
+                                transitionProperty: "width, height",
+                            },
+                        }, badge: isCollapsed && !isCompactVariant
+                            ? {
+                                size: "medium",
+                                rounded: "xxs",
+                                border: "outline-lg",
+                                src: chainImageUrl,
+                                children: tokenItems && (jsx("span", { className: "tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-grey-700 tw-text-grey-300", children: jsx(CaptionText, { children: tokenItems.length }) })),
+                            }
+                            : undefined }), 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"), 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", !isSmallVariant), children: [jsxs("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-squid-xxs tw-text-grey-400", children: [tokenItems ? (jsx(ImageStack, { spacing: "-10px", size: "medium", rounded: "xxs", border: "outline-lg", imageUrls: tokenItems === null || tokenItems === void 0 ? void 0 : tokenItems.slice(0, maxPreviewItems).map((item) => item.chainImageUrl) })) : (jsx(CaptionText, { className: "!tw-leading-[10px]", children: balance })), jsx(CaptionText, { className: "!tw-leading-[10px]", children: symbol })] }), priceChange && jsx(PriceChange, Object.assign({}, 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))) }) })] }));
+}
+
 function ActionLayout({ lineCap = jsx(Timeline.CapTop, {}), status = "executed", showTimeline = true, showBody = true, nextStatus, statusIcon, description, title, icon, children, }) {
     return (jsxs(ActionWrapper, { status: status, children: [jsx(ActionLineOutRow, { status: nextStatus }), jsx(ActionStatusRow, { status: status, icon: statusIcon, children: description }), title && (jsxs(Fragment, { children: [jsx(ActionRow, { children: jsxs(Timeline, { className: cn("tw-h-squid-xs", statusTextClassMap[status]), children: [jsx(Timeline.CapTop, {}), jsx(Timeline.Straight, {}), jsx(Timeline.CapBottom, {})] }) }), jsxs(ActionRow, { children: [jsx("div", { className: "tw-flex tw-items-center tw-justify-center", children: icon }), jsx(BodyText, { size: "large", className: cn("tw-flex tw-min-h-squid-l tw-items-center !tw-leading-[1] tw-text-grey-300 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0"), children: title })] })] })), jsxs(ActionRow, { children: [jsxs(Timeline, { className: showTimeline ? statusTextClassMap[status] : "!tw-text-[transparent]", children: [lineCap, jsx(Timeline.Straight, {})] }), jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-squid-xs tw-pb-squid-xs tw-text-grey-500 tw-transition-opacity tw-duration-200", !showBody && "tw-opacity-0", title && "tw-pt-squid-xxs"), children: children })] })] }));
 }
@@ -19601,20 +19678,6 @@ const TxTypeLabel = ({ type }) => {
     return (jsxs("span", { className: "tw-inline-flex tw-items-center tw-gap-[2px] tw-text-royal-500", children: [type === null || type === void 0 ? void 0 : type.icon, " ", type === null || type === void 0 ? void 0 : type.name] }));
 };
 
-function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator = false, }) {
-    return (jsxs("li", { className: "tw-flex tw-flex-col tw-self-stretch", children: [jsxs("div", { className: "tw-flex tw-items-center tw-self-stretch", children: [jsx(Track, { imageUrl: imageUrl }), jsx(Label, { subtitle: subtitle, descriptionBlocks: descriptionBlocks })] }), showStepSeparator && (jsx("div", { className: "tw-flex tw-h-squid-m tw-w-squid-xxl tw-justify-center", children: jsx("div", { className: "tw-h-squid-m tw-w-1 tw-rounded-full tw-bg-gradient-to-t tw-from-grey-500 tw-to-grey-800" }) }))] }));
-}
-function Track({ imageUrl }) {
-    return (jsx("div", { className: "tw-relative tw-flex tw-w-squid-xxl tw-min-w-squid-xxl tw-items-center tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-xs", children: jsx("img", { src: imageUrl, alt: "", className: "tw-h-squid-m tw-w-squid-m tw-rounded-squid-xxs" }) }));
-}
-function Label({ subtitle, descriptionBlocks, }) {
-    return (jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [jsx("span", { className: "tw-flex tw-items-center tw-gap-squid-xxs tw-self-stretch tw-py-squid-xxs tw-pr-squid-m tw-text-grey-500", children: jsx(CaptionText, { children: subtitle }) }), jsx(DescriptionBlocks, { blocks: descriptionBlocks, className: "tw-py-squid-xxs tw-pr-squid-m tw-text-grey-300" })] }));
-}
-
-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 STEPS_LIST_HEIGHT = 400;
 const SwapStepsCollapsed = forwardRef((props, ref) => {
     const { steps, currentStepIndex: _newStepIndex, onOpen, onClose, footerButton, } = props;
@@ -69510,4 +69573,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 { 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, 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 { 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 };

package/dist/esm/types/components/lists/TokenGroup.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { type PriceChange as TPriceChange } from "../../types/components";
 type TokenGroupVariant = "compact" | "large" | "small";
-export interface TokenGroupProps {
+export interface TokenGroupProps<T extends TokenGroupProps<T>> {
+    address?: string;
+    chainId?: string;
     isSelected?: boolean;
     imageUrl: string;
     symbol: string;
@@ -10,11 +12,13 @@ export interface TokenGroupProps {
     balance?: string;
     balanceUsd?: string;
     priceChange?: TPriceChange;
-    tokenItems?: TokenGroupProps[];
+    tokenItems?: T[];
     extraSpacing?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     maxPreviewItems?: number;
     variant?: TokenGroupVariant;
+    className?: string;
+    onChildClick?: (tokenProps: T) => void;
 }
-export declare function TokenGroup({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems, variant, }: TokenGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems, variant, className, onChildClick, address, chainId, }: TokenGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,14 @@
 export * from "./DropdownMenuItem";
+export * from "./DropdownMenuTitle";
 export * from "./HistoryItem";
 export * from "./ListItem";
 export * from "./MenuItem";
 export * from "./PropertyListItem";
+export * from "./RouteStep";
 export * from "./SectionTitle";
 export * from "./SettingsItem";
 export * from "./SwapStepItem";
+export * from "./TokenGroup";
 export * from "./TransactionAction/ActionLayout";
 export * from "./TransactionAction/ApproveAction";
 export * from "./TransactionAction/BaseActionProps";
@@ -23,5 +26,3 @@ export * from "./TransactionAction/SwapAction";
 export * from "./TransactionAction/TransactionAction";
 export * from "./TransactionAction/WrapAction";
 export * from "./TransactionItem";
-export * from "./RouteStep";
-export * from "./DropdownMenuTitle";

package/dist/index.d.ts

@@ -2040,6 +2040,10 @@ declare function DropdownMenuItem(props: DropdownMenuItemProps & AllOrNone<{
     containerRef: React.RefObject<HTMLDivElement>;
 }>): react_jsx_runtime.JSX.Element;
 
+declare function DropdownMenuTitle({ title }: {
+    title: string;
+}): react_jsx_runtime.JSX.Element;
+
 interface HistoryItemProps {
     firstImageUrl: string;
     secondImageUrl: string;
@@ -2108,6 +2112,14 @@ interface PropertyListItemProps extends ComponentProps<"li"> {
 }
 declare function PropertyListItem({ isLoading, label, detail, icon, className, variant, showGradientBg, labelClassName, iconClassName, detailClassName, ...props }: PropertyListItemProps): react_jsx_runtime.JSX.Element;
 
+interface RouteStepProps {
+    imageUrl: string;
+    descriptionBlocks: DescriptionBlock[];
+    subtitle: string;
+    showStepSeparator?: boolean;
+}
+declare function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator, }: RouteStepProps): react_jsx_runtime.JSX.Element;
+
 interface SectionTitleProps extends React.HTMLAttributes<HTMLDivElement> {
     title: string;
     icon?: React.ReactNode;
@@ -2174,6 +2186,28 @@ interface SwapStepItemProps {
 declare const STEP_ITEM_HEIGHT = 52;
 declare function SwapStepItem({ descriptionBlocks, showStepSeparator, link, status, }: SwapStepItemProps): react_jsx_runtime.JSX.Element;
 
+type TokenGroupVariant = "compact" | "large" | "small";
+interface TokenGroupProps<T extends TokenGroupProps<T>> {
+    address?: string;
+    chainId?: string;
+    isSelected?: boolean;
+    imageUrl: string;
+    symbol: string;
+    name: string;
+    chainImageUrl: string;
+    balance?: string;
+    balanceUsd?: string;
+    priceChange?: PriceChange$1;
+    tokenItems?: T[];
+    extraSpacing?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    maxPreviewItems?: number;
+    variant?: TokenGroupVariant;
+    className?: string;
+    onChildClick?: (tokenProps: T) => void;
+}
+declare function TokenGroup<T extends TokenGroupProps<T>>({ isSelected, tokenItems, priceChange, balance, balanceUsd, extraSpacing, chainImageUrl, imageUrl, symbol, name, onClick, maxPreviewItems, variant, className, onChildClick, address, chainId, }: TokenGroupProps<T>): react_jsx_runtime.JSX.Element;
+
 interface ActionLayoutProps {
     lineCap?: ReactNode;
     status?: ActionStatus;
@@ -2477,18 +2511,6 @@ interface TransactionItemProps {
 }
 declare function TransactionItem({ className, isLoading, status, image, type, hash, fromChain, toChain, fromAmount, toAmount, timestamp, variant, }: TransactionItemProps): react_jsx_runtime.JSX.Element;
 
-interface RouteStepProps {
-    imageUrl: string;
-    descriptionBlocks: DescriptionBlock[];
-    subtitle: string;
-    showStepSeparator?: boolean;
-}
-declare function RouteStep({ imageUrl, descriptionBlocks, subtitle, showStepSeparator, }: RouteStepProps): react_jsx_runtime.JSX.Element;
-
-declare function DropdownMenuTitle({ title }: {
-    title: string;
-}): react_jsx_runtime.JSX.Element;
-
 interface BodyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
     size: TextSize;
@@ -16876,4 +16898,4 @@ declare const transactionRejectedAnimation: {
     markers: never[];
 };
 
-export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageIcon, type ImageProps, 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, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, 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, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, 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, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };
+export { type ActionButton, ActionLayout, ActionLineOutRow, ActionProperties, ActionRow, type ActionStatus, ActionStatusRow, ActionWrapper, AddressButton, type AllOrNone, AnimationWrapper, Announcement, type AnnouncementProps, AppContainer, Approve, ApproveAction, ArrowBottomTopIcon, ArrowButton, ArrowCornerDownRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowOutOfBoxIcon, ArrowRightDownCircleIcon, ArrowRightDownIcon, ArrowRightIcon, ArrowRightUpCircleIcon, ArrowRightUpIcon, ArrowRotate, ArrowSplit, ArrowTriangle, ArrowUpIcon, ArrowWallDownIcon, ArrowsSwapIcon, AssetsButton, type AssetsButtonVariant, AssetsView, AtomIcon, BackpackIcon, BadgeImage, BankIcon, type BaseActionProps, type BaseTransactionViewProps, BellAlarmIcon, BlockSkeleton, BodyText, Boost, BoostBadge, BoostButton, BorderedContainer, Breadcrumb, BridgeAction, BridgeHeader, BridgeProperties, BridgeTransactionView, BrokenHeartIcon, BubblesIcon, Button, type ButtonSize, type ButtonVariant, BuyNFTHeader, BuyNFTProperties, BuyNFTTransactionView, CSS_VARS, Calendar, CaptionText, CatSquareIcon, ChainLink, Checkmark1Icon, Checkmark2Icon, ChevronArrowIcon, ChevronDownSmallIcon, ChevronGrabberVerticalIcon, ChevronLargeDownIcon, ChevronLargeRightIcon, ChevronRightSmallIcon, ChevronTopIcon, ChevronTopSmallIcon, Chip, type ChipProps, CircleMinusIcon, CirclePlusIcon, CircleX, CircleXFilledIcon, ClockOutlineIcon, ClockSolidIcon, CodeBracketsIcon, CodeSolidSquareIcon, CoinsAddIcon, CoinsIcon, CoinsOutlinedIcon, Collapse, CollapsibleMenu, CollectionIcon, ColorPaletteIcon, CommandIcon, CompassRoundOutlinedIcon, CompassRoundSolidIcon, ConsoleIcon, Copy, CopyIcon, CrossAnimatedIcon, CrossedOutSunSolidIcon, DashboardFast, type DeepPartial, type DescriptionBlock, DescriptionBlocks, DetailsToolbar, DiscordIcon, DockIconAnalytics, DockIconCheckout, DockIconHelp, DockIconProfile, DockIconScan, DockIconSwap, DockSwapIcon, DollarOutlinedIcon, DollarSolidIcon, DotGrid1x3HorizontalIcon, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuTitle, type DropdownPosition, type DropdownStyles, EmojiMeh, EmojiSadIcon, EmptyHeartIcon, ErrorMessage, EthereumIcon, ExplosionIcon, EyeOpenIcon, FavouriteFilterIcon, FeeButton, FeesAction, type FeesActionProps, FeesLines, FeesTotal, FileDownloadIcon, FilledHeartIcon, FilterAscendingIcon, FilterButton, FilterIcon, FilterTimelineIcon, GasIcon, GhostIcon, GithubIcon, HashLink, HeadingText, HeartSmallIcon, HelpIcon, HighestPriceRangeIcon, HistoryItem, type HistoryItemStatus, HomeIcon, IconButton, IconLabel, Image, ImageIcon, type ImageProps, 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, type PropertyListItemProps, type PublicTheme, PunkIcon, RangeInput, ReceiptBillIcon, ReceiveNFTAction, ReceiveTokensAction, RecipientView, RefreshIcon, ReorderIcon, RouteStep, STEP_ITEM_HEIGHT, SearchIcon, SectionTitle, SendTokensAction, type Settings, SettingsButton, type SettingsButtonProps, type SettingsControl, SettingsGearIcon, SettingsItem, type SettingsItemProps, SettingsSlider, SettingsSliderIcon, type SettingsSliderProps, 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, type SwapHeaderProps, SwapIcon, SwapInputsIcon, SwapProgressView, SwapProgressViewHeader, SwapProperties, type SwapPropertiesProps, SwapState, type SwapStep, SwapStepItem, SwapStepSeparator, SwapStepsCollapsed, type SwapStepsCollapsedFooterButton, SwapSuccessIcon, SwapTransactionView, SwapWarningIcon, Switch, type SwitchProps, TagIcon, TagIconFilled, TextSkeleton, type Theme, ThemePreference, ThemeProvider, type ThemeType, ThumbsUp, Tick, TimeFliesIcon, type Timeframe, Timeline, Timestamp, Toast, TokenDetailsView, TokenGroup, type TokenGroupProps, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, TradingViewStepsIcon, TransactionAction, type TransactionActionProps, type TransactionActionType, TransactionFilters, TransactionHeader, TransactionHeaderLayout, type TransactionHeaderProps, type TransactionHeaderType, TransactionItem, TransactionProperties, type TransactionPropertiesProps, type TransactionPropertiesType, TransactionSearch, TransactionState, TransactionView, TransactionViewLayout, type TransactionViewProps, type TransactionViewType, 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, statusTextClassMap, transactionErrorPauseAnimation, transactionFailureAnimation, transactionHalfSuccessAnimation, transactionPendingAnimation, transactionProcessingAnimation, transactionRejectedAnimation, transactionSuccessAnimation, useCollapsibleMenu, useDropdownMenu, useMediaQuery, useOnResize, useRect, useTimer, useUserTheme, useVersion };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "2.2.8",
+  "version": "2.2.9-beta.1",
   "author": "",
   "license": "MIT",
   "resolutions": {